{"id":15288674,"url":"https://github.com/tevelee/swiftui-flow","last_synced_at":"2025-04-08T09:07:27.178Z","repository":{"id":42615502,"uuid":"510654727","full_name":"tevelee/SwiftUI-Flow","owner":"tevelee","description":"Flow Layout implemented in SwiftUI","archived":false,"fork":false,"pushed_at":"2025-03-21T14:19:55.000Z","size":7087,"stargazers_count":496,"open_issues_count":3,"forks_count":38,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-08T09:07:02.992Z","etag":null,"topics":["flow-layout","layout","swiftui"],"latest_commit_sha":null,"homepage":"https://swiftpackageindex.com/tevelee/swiftui-flow/main/documentation/flow","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tevelee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2022-07-05T08:42:21.000Z","updated_at":"2025-04-03T22:43:32.000Z","dependencies_parsed_at":"2022-09-07T13:21:04.246Z","dependency_job_id":"cfa105c7-5b04-4194-939c-2790b043995e","html_url":"https://github.com/tevelee/SwiftUI-Flow","commit_stats":{"total_commits":56,"total_committers":3,"mean_commits":"18.666666666666668","dds":0.0535714285714286,"last_synced_commit":"c563b275142ff3226f453b3314e5a224c591bc71"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tevelee%2FSwiftUI-Flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tevelee%2FSwiftUI-Flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tevelee%2FSwiftUI-Flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tevelee%2FSwiftUI-Flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tevelee","download_url":"https://codeload.github.com/tevelee/SwiftUI-Flow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809962,"owners_count":20999816,"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":["flow-layout","layout","swiftui"],"created_at":"2024-09-30T15:51:57.972Z","updated_at":"2025-04-08T09:07:27.151Z","avatar_url":"https://github.com/tevelee.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SwiftUI Flow Layout\n\nIntroduces `HFlow` and `VFlow` similar to `HStack` and `VStack`. \nArranges views in lines and cuts new lines accordingly (if elements don't fit the bounding space).\n\n## HFlow\n\n```swift\nstruct Colors: View {\n    let colors: [Color] = [\n        .blue,\n        .orange,\n        .green,\n        .yellow,\n        .brown,\n        .mint,\n        .indigo,\n        .cyan,\n        .gray,\n        .pink\n    ]\n\n    var body: some View {\n        HFlow {\n            ForEach(colors, id: \\.description) { color in\n                RoundedRectangle(cornerRadius: 10)\n                    .fill(color.gradient)\n                    .frame(width: .random(in: 40...60), height: 50)\n            }\n        }\n        .frame(maxWidth: 300)\n    }\n}\n```\n\n![HFlow](Resources/hflow.png)\n\n## VFlow\n\n```swift\nVFlow {\n    ForEach(colors, id: \\.description) { color in\n        RoundedRectangle(cornerRadius: 10)\n            .fill(color.gradient)\n            .frame(width: 50, height: .random(in: 40...60))\n    }\n}\n.frame(maxHeight: 300)\n```\n\n![VFlow](Resources/vflow.png)\n\n## Alignment\n\nSupports the same alignments as HStack and VStack do.\n\n```swift\nHFlow(alignment: .top) {\n    ForEach(colors, id: \\.description) { color in\n        RoundedRectangle(cornerRadius: 10)\n            .fill(color.gradient)\n            .frame(width: 50, height: .random(in: 40...60))\n    }\n}\n.frame(maxWidth: 300)\n```\n\n![HFlow](Resources/hflow-top.png)\n\nAdditionally, alignment can be specified on both axes. Ideal for tags.\n\n```swift\nHFlow(horizontalAlignment: .center, verticalAlignment: .top) {\n    ForEach(colors, id: \\.description) { color in\n        RoundedRectangle(cornerRadius: 10)\n            .fill(color.gradient)\n            .frame(width: .random(in: 30...60), height: 30)\n    }\n}\n.frame(maxWidth: 300)\n```\n\n![HFlow](Resources/hflow-center.png)\n\n## Spacing\n\nCustomize spacing between rows and items separately.\n\n```swift\nHFlow(itemSpacing: 4, rowSpacing: 20) {\n    ForEach(colors, id: \\.description) { color in\n        RoundedRectangle(cornerRadius: 10)\n            .fill(color.gradient)\n            .frame(width: 50, height: 50)\n    }\n}\n.frame(maxWidth: 300)\n```\n\n![HFlow](Resources/hflow-spacing.png)\n\n## Distribute items\n\nDistribute items evenly by minimizing the empty spaces left in each row. \nImplements the Knuth-Plass line breaking algorithm.\n\n```swift\nHFlow(distributeItemsEvenly: true) {\n    ForEach(colors, id: \\.description) { color in\n        RoundedRectangle(cornerRadius: 10)\n            .fill(color.gradient)\n            .frame(width: 65, height: 50)\n    }\n}\n.frame(width: 300, alignment: .leading)\n```\n\n![HFlow](Resources/hflow-distributed.png)\n\n## Justified\n\n```swift\nHFlow(justified: true) {\n    ForEach(colors, id: \\.description) { color in\n        RoundedRectangle(cornerRadius: 10)\n            .fill(color.gradient)\n            .frame(width: 50, height: 50)\n    }\n}\n.frame(width: 300)\n```\n\n![HFlow](Resources/hflow-justified.png)\n\n## Flexibility\n\n```swift\nHFlow { // distributes flexible items proportionally\n    RoundedRectangle(cornerRadius: 10)\n        .fill(.red)\n        .frame(minWidth: 50, maxWidth: .infinity)\n        .frame(height: 50)\n        .flexibility(.minimum) // takes as little space as possible, rigid\n    RoundedRectangle(cornerRadius: 10)\n        .fill(.green)\n        .frame(minWidth: 50, maxWidth: .infinity)\n        .frame(height: 50)\n        .flexibility(.natural) // expands\n    RoundedRectangle(cornerRadius: 10)\n        .fill(.blue)\n        .frame(minWidth: 50, maxWidth: .infinity)\n        .frame(height: 50)\n        .flexibility(.natural) // expands\n    RoundedRectangle(cornerRadius: 10)\n        .fill(.yellow)\n        .frame(minWidth: 50, maxWidth: .infinity)\n        .frame(height: 50) // takes as much space as possible\n        .flexibility(.maximum)\n}\n.frame(width: 300)\n```\n\n![HFlow](Resources/hflow-flexibility.png)\n\n## Line breaks\n\n```swift\nHFlow {\n    RoundedRectangle(cornerRadius: 10)\n        .fill(.red)\n        .frame(width: 50, height: 50)\n    RoundedRectangle(cornerRadius: 10)\n        .fill(.green)\n        .frame(width: 50, height: 50)\n    RoundedRectangle(cornerRadius: 10)\n        .fill(.blue)\n        .frame(width: 50, height: 50)\n    LineBreak()\n    RoundedRectangle(cornerRadius: 10)\n        .fill(.yellow)\n        .frame(width: 50, height: 50)\n}\n.frame(width: 300)\n```\n\n![HFlow](Resources/hflow-linebreak.png)\n\n```swift\nHFlow {\n    RoundedRectangle(cornerRadius: 10)\n        .fill(.red)\n        .frame(width: 50, height: 50)\n    RoundedRectangle(cornerRadius: 10)\n        .fill(.green)\n        .frame(width: 50, height: 50)\n        .startInNewLine()\n    RoundedRectangle(cornerRadius: 10)\n        .fill(.blue)\n        .frame(width: 50, height: 50)\n    RoundedRectangle(cornerRadius: 10)\n        .fill(.yellow)\n        .frame(width: 50, height: 50)\n}\n.frame(width: 300)\n```\n\n![HFlow](Resources/hflow-newline.png)\n\n## RTL\n\nAdapts to left-to-right and right-to-left environments too.\n\n```swift\nHFlow {\n    ForEach(colors, id: \\.description) { color in\n        RoundedRectangle(cornerRadius: 10)\n            .fill(color.gradient)\n            .frame(width: .random(in: 40...60), height: 50)\n    }\n}\n.frame(maxWidth: 300)\n.environment(\\.layoutDirection, .rightToLeft)\n```\n\n![HFlow](Resources/hflow-rtl.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftevelee%2Fswiftui-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftevelee%2Fswiftui-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftevelee%2Fswiftui-flow/lists"}