SwiftUI Flow Layout

A flow layout (wrapping HStack) for SwiftUI — perfect for tags, chips, and badges. Built on the Layout protocol for native performance.

Installation

https://github.com/tjdrhs90/swiftui-flow-layout.git

Usage

Tags

import FlowLayout

let tags = ["Swift", "SwiftUI", "iOS", "Xcode", "UIKit", "Combine", "SPM"]

FlowLayout(spacing: 8) {
    ForEach(tags, id: \.self) { tag in
        Text(tag)
            .padding(.horizontal, 12)
            .padding(.vertical, 6)
            .background(Color.blue.opacity(0.1))
            .cornerRadius(16)
    }
}

Custom Spacing

Separate horizontal and vertical spacing for better visual control:

// Tight horizontal, more vertical breathing room
FlowLayout(horizontalSpacing: 8, verticalSpacing: 16) {
    ForEach(tags, id: \.self) { tag in
        Text(tag)
            .padding(.horizontal, 12)
            .padding(.vertical, 6)
            .background(Color.blue.opacity(0.1))
            .cornerRadius(16)
    }
}

Styled Chips

FlowLayout(spacing: 8) {
    ForEach(filters, id: \.self) { filter in
        Text(filter)
            .font(.caption)
            .padding(.horizontal, 10)
            .padding(.vertical, 5)
            .background(selectedFilters.contains(filter) ? Color.blue : Color.gray.opacity(0.2))
            .foregroundColor(selectedFilters.contains(filter) ? .white : .primary)
            .cornerRadius(12)
            .onTapGesture { toggle(filter) }
    }
}

Requirements

• iOS 16+ (uses the Layout protocol)
• Swift 5.9+
• Xcode 15+

License

MIT License. See LICENSE for details.