https://github.com/banghuazhao/swiftui-flow-layout
A lightweight and flexible SwiftUI flow layout that arranges views in a horizontal, wrapping flow—perfect for tags, chips, and more.
https://github.com/banghuazhao/swiftui-flow-layout
chips flow-layout ios layout open-source spm swift swift-package swiftui tags ui wrapping-layout
Last synced: 2 months ago
JSON representation
A lightweight and flexible SwiftUI flow layout that arranges views in a horizontal, wrapping flow—perfect for tags, chips, and more.
- Host: GitHub
- URL: https://github.com/banghuazhao/swiftui-flow-layout
- Owner: banghuazhao
- License: mit
- Created: 2025-07-19T21:41:43.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-19T22:12:18.000Z (11 months ago)
- Last Synced: 2025-07-31T12:39:37.791Z (11 months ago)
- Topics: chips, flow-layout, ios, layout, open-source, spm, swift, swift-package, swiftui, tags, ui, wrapping-layout
- Language: Swift
- Homepage:
- Size: 3.11 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SwiftUIFlowLayout
A lightweight and flexible FlowLayout for SwiftUI, supporting dynamic wrapping of views in a horizontal flow, similar to tag or chip layouts. Designed for easy integration and reuse in your SwiftUI projects.
## Screenshots
## Features
- Arranges child views in a horizontal flow, wrapping to new lines as needed
- Customizable horizontal and vertical spacing
- Simple API using generics and @ViewBuilder
- Supports iOS 14+
## Installation
### Swift Package Manager
You can add SwiftUIFlowLayout to your project using [Swift Package Manager](https://swift.org/package-manager/):
**In Xcode:**
1. Go to **File > Add Packages...**
2. Enter the repository URL:
```
https://github.com/banghuazhao/swiftui_flow_layout
```
3. Select the version or branch you want to use (e.g., `main` or a tagged release).
**Or add it directly to your `Package.swift` dependencies:**
```swift
.package(url: "https://github.com/banghuazhao/swiftui_flow_layout.git", branch: "main")
```
## Usage
```swift
import SwiftUIFlowLayout
struct ExampleView: View {
let tags = ["Swift", "UI", "Flow", "Layout", "Reusable"]
var body: some View {
FlowLayout(items: tags) { tag in
Text(tag)
.padding(8)
.background(Color.blue.opacity(0.2))
.cornerRadius(8)
}
}
}
```
## Usage Example
```swift
import SwiftUI
import SwiftUIFlowLayout
struct ExampleView: View {
let tags = ["Swift", "Kotlin", "JavaScript", "Python", "Rust", "Go", "Ruby"]
var body: some View {
FlowLayout(items: tags, horizontalSpacing: 12, verticalSpacing: 12) { tag in
Text(tag)
.padding(.horizontal, 12)
.padding(.vertical, 8)
.background(Color.blue.opacity(0.2))
.foregroundColor(.blue)
.cornerRadius(8)
}
.padding()
}
}
```
You can use `FlowLayout` in any SwiftUI view to arrange items in a flexible, wrapping layout.
## License
MIT