https://github.com/sanhee16/SDFlowLayout
The best SwiftUI FlowLayout package available for use in iOS 14.0+
https://github.com/sanhee16/SDFlowLayout
Last synced: 3 months ago
JSON representation
The best SwiftUI FlowLayout package available for use in iOS 14.0+
- Host: GitHub
- URL: https://github.com/sanhee16/SDFlowLayout
- Owner: sanhee16
- Created: 2024-08-28T00:15:10.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-11-04T03:38:24.000Z (5 months ago)
- Last Synced: 2024-11-04T04:25:16.786Z (5 months ago)
- Language: Swift
- Homepage:
- Size: 401 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-swiftui-libraries - SDFlowLayout - Flow Layout for iOS 14+ with SwiftUI (Grid / Content)
README
# SDFlowLayout
### SwiftUI Flow Layout
SDFlowLayout is a fluid FlowLayout created with SwiftUI. This package is designed for iOS 14 and allows you to easily implement a GridView with flexible widths.
## Requirements
iOS 14.0
macOS 11.0
## Features
- Supports a GridView with flexible widths.
- Easily customizable using SwiftUI views.
- Compatible with various data collections.
## Installation
You can install this package using Swift Package Manager. Add the following dependency to your Package.swift file:
### Swift Package Manager
```swift
/// Package.swift
/// ...
dependencies: [
.package(url: "https://github.com/sanhee16/SDFlowLayout.git", branch: "main"),
]
/// ...
```
## Usage
Here’s a simple example of how to use SDFlowLayout:
```swift
import SwiftUI
import SDFlowLayout
struct ContentView: View {
private let colors: [Color] = [.red, .blue, .green, .orange, .pink, .yellow, .gray, .purple]
@StateObject private var vm: ContentVM = ContentVM()
var body: some View {
VStack {
SDFlowLayout(data: vm.items1, id: \.self) { item in
Text(item)
.padding()
.background(
RoundedRectangle(cornerRadius: 8)
.foregroundColor(self.colors.randomElement()?.opacity(0.5))
)
.padding(.trailing, 5)
}
Divider()
.padding(.vertical, 30)
SDFlowLayout(data: vm.items2, id: \.self) { item in
peopleView(item)
.padding(.trailing, 5)
}
}
.padding()
}
private func peopleView(_ item: People) -> some View {
HStack(alignment: .center, spacing: 0, content: {
Text("\(item.name)")
.padding(.trailing, 10)
Text(item.grade)
})
.padding()
.background(
RoundedRectangle(cornerRadius: 8)
.foregroundColor(self.colors.randomElement()?.opacity(0.5))
)
}
}
struct People: Equatable, Hashable {
var name: String
var age: Int
var grade: String
}
class ContentVM: ObservableObject {
@Published var items1: [String] = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune", "Pluto"]
@Published var items2: [People] = [
People(name: "Sandy", age: 24, grade: "A"),
People(name: "Tom", age: 24, grade: "B-"),
People(name: "Ruby", age: 24, grade: "A+"),
People(name: "Jane", age: 24, grade: "C+"),
People(name: "Mike", age: 24, grade: "C-"),
People(name: "Teddy", age: 24, grade: "D+"),
People(name: "Mat", age: 24, grade: "B+"),
]
}
```
Do you want to create a hashtag view? You can do it!
```swift
internal struct ContentView: View {
@State private var tags: [String] = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune", "Pluto"]
var body: some View {
VStack(alignment: .leading, spacing: 0) {
ScrollView(.vertical) {
VStack(alignment: .leading, spacing: 0, content: {
Text("HashTag")
.font(.headline)
.padding(.bottom, 10)
SDFlowLayout(data: $tags.wrappedValue.indices, id: \.self) { idx in
hashTagItem($tags.wrappedValue[idx], onTapDelete: {
$tags.wrappedValue.remove(at: idx)
})
.padding([.trailing, .bottom], 5)
}
})
.padding()
}
}
}
private func hashTagItem(_ text: String, onTapDelete: @escaping ()->()) -> some View {
HStack(alignment: .center, spacing: 0) {
Text("#")
Text(text)
.padding(.trailing, 4)
}
.padding(3)
}
}
```
An example is available in ContentView!
### Parameters
- `data`: The collection of data to display.
- `id`: A key path to identify each data item.
- `content`: A closure that generates a view for each data item.
## Contributing
If you would like to contribute, please fork this repository and submit a pull request.
## Author
sanhee16, [email protected]