{"id":15052849,"url":"https://github.com/sanhee16/SDFlowLayout","last_synced_at":"2025-09-25T21:30:57.794Z","repository":{"id":255098378,"uuid":"848537132","full_name":"sanhee16/SDFlowLayout","owner":"sanhee16","description":"The best SwiftUI FlowLayout package available for use in iOS 14.0+","archived":false,"fork":false,"pushed_at":"2024-11-04T03:38:24.000Z","size":411,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-04T04:25:16.786Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sanhee16.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-28T00:15:10.000Z","updated_at":"2024-11-04T03:38:27.000Z","dependencies_parsed_at":"2024-11-04T04:32:17.100Z","dependency_job_id":null,"html_url":"https://github.com/sanhee16/SDFlowLayout","commit_stats":null,"previous_names":["sanhee16/sdflowlayout"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanhee16%2FSDFlowLayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanhee16%2FSDFlowLayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanhee16%2FSDFlowLayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanhee16%2FSDFlowLayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sanhee16","download_url":"https://codeload.github.com/sanhee16/SDFlowLayout/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234251237,"owners_count":18803019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T21:37:44.152Z","updated_at":"2025-09-25T21:30:57.466Z","avatar_url":"https://github.com/sanhee16.png","language":"Swift","funding_links":[],"categories":["Grid"],"sub_categories":["Content"],"readme":" # SDFlowLayout\n### SwiftUI Flow Layout  \nSDFlowLayout 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.\n\n\n## Requirements\n\niOS 14.0  \nmacOS 11.0  \n\n## Features\n\n- Supports a GridView with flexible widths.\n- Easily customizable using SwiftUI views.\n- Compatible with various data collections.\n\n## Installation\nYou can install this package using Swift Package Manager. Add the following dependency to your Package.swift file:\n### Swift Package Manager\n\n```swift\n/// Package.swift\n/// ...\ndependencies: [\n    .package(url: \"https://github.com/sanhee16/SDFlowLayout.git\", branch: \"main\"),\n]\n/// ...\n```\n \n## Usage  \n\nHere’s a simple example of how to use SDFlowLayout:\n```swift\nimport SwiftUI\nimport SDFlowLayout\n\n\nstruct ContentView: View {\n    private let colors: [Color] = [.red, .blue, .green, .orange, .pink, .yellow, .gray, .purple]\n    @StateObject private var vm: ContentVM = ContentVM()\n    \n    var body: some View {\n        VStack {\n            SDFlowLayout(data: vm.items1, id: \\.self) { item in\n                Text(item)\n                    .padding()\n                    .background(\n                        RoundedRectangle(cornerRadius: 8)\n                            .foregroundColor(self.colors.randomElement()?.opacity(0.5))\n                    )\n                    .padding(.trailing, 5)\n            }\n            \n            Divider()\n                .padding(.vertical, 30)\n            \n            SDFlowLayout(data: vm.items2, id: \\.self) { item in\n                peopleView(item)\n                    .padding(.trailing, 5)\n            }\n        }\n        .padding()\n    }\n    \n    private func peopleView(_ item: People) -\u003e some View {\n        HStack(alignment: .center, spacing: 0, content: {\n            Text(\"\\(item.name)\")\n                .padding(.trailing, 10)\n            Text(item.grade)\n        })\n        .padding()\n        .background(\n            RoundedRectangle(cornerRadius: 8)\n                .foregroundColor(self.colors.randomElement()?.opacity(0.5))\n        )\n    }\n}\n\nstruct People: Equatable, Hashable {\n    var name: String\n    var age: Int\n    var grade: String\n}\n\nclass ContentVM: ObservableObject {\n    @Published var items1: [String] = [\"Mercury\",  \"Venus\", \"Earth\", \"Mars\", \"Jupiter\",  \"Saturn\", \"Uranus\", \"Neptune\", \"Pluto\"]\n    @Published var items2: [People] = [\n        People(name: \"Sandy\", age: 24, grade: \"A\"),\n        People(name: \"Tom\", age: 24, grade: \"B-\"),\n        People(name: \"Ruby\", age: 24, grade: \"A+\"),\n        People(name: \"Jane\", age: 24, grade: \"C+\"),\n        People(name: \"Mike\", age: 24, grade: \"C-\"),\n        People(name: \"Teddy\", age: 24, grade: \"D+\"),\n        People(name: \"Mat\", age: 24, grade: \"B+\"),\n    ]\n}\n```\n\u003cimg src=\"./Resources/Sample.png\" width=\"400px\" height=\"800px\"/\u003e   \n\nDo you want to create a hashtag view? You can do it!\n```swift\ninternal struct ContentView: View {\n    @State private var tags: [String] = [\"Mercury\",  \"Venus\", \"Earth\", \"Mars\", \"Jupiter\",  \"Saturn\", \"Uranus\", \"Neptune\", \"Pluto\"]\n    \n    var body: some View {\n        VStack(alignment: .leading, spacing: 0) {\n            ScrollView(.vertical) {\n                VStack(alignment: .leading, spacing: 0, content: {\n                    Text(\"HashTag\")\n                        .font(.headline)\n                        .padding(.bottom, 10)\n                    \n                    SDFlowLayout(data: $tags.wrappedValue.indices, id: \\.self) { idx in\n                        hashTagItem($tags.wrappedValue[idx], onTapDelete: {\n                            $tags.wrappedValue.remove(at: idx)\n                        })\n                        .padding([.trailing, .bottom], 5)\n                    }\n                })\n                .padding()\n            }\n        }\n    }\n    \n    private func hashTagItem(_ text: String, onTapDelete: @escaping ()-\u003e()) -\u003e some View {\n        HStack(alignment: .center, spacing: 0) {\n            Text(\"#\")\n            Text(text)\n                .padding(.trailing, 4)\n        }\n        .padding(3)\n    }\n}\n```\n\u003cimg src=\"./Resources/ContentView.png\" width=\"340px\" height=\"800px\"/\u003e  \n\nAn example is available in ContentView!  \n\n### Parameters\n- `data`: The collection of data to display.\n- `id`: A key path to identify each data item.\n- `content`: A closure that generates a view for each data item.\n\n\n## Contributing\nIf you would like to contribute, please fork this repository and submit a pull request.\n\n\n\n## Author\n\nsanhee16, sinhioa20@gmail.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanhee16%2FSDFlowLayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanhee16%2FSDFlowLayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanhee16%2FSDFlowLayout/lists"}