SwiftUI Flow Layout

Introduces HFlow and VFlow similar to HStack and VStack. Arranges views in lines and cuts new lines accordingly (if elements don’t fit the bounding space).

Spacing (separate item spacing and line spacing)
Alignment
Conforms to Layout protocol
Supports Right-to-Left layout direction
Sample SwiftUI View to tweak parameters

HFlow

struct Colors: View {
    let colors = [
        Color.blue,
        Color.orange,
        Color.green,
        Color.yellow,
        Color.brown,
        Color.mint,
        Color.indigo,
        Color.cyan
    ]

    var body: some View {
        HFlow {
            ForEach(colors, id: \.description) { color in
                RoundedRectangle(cornerRadius: 10)
                    .fill(color.gradient)
                    .frame(width: 50, height: 50)
            }
        }
        .frame(maxWidth: 300)
    }
}

VFlow

VFlow {
    ForEach(colors, id: \.description) { color in
        RoundedRectangle(cornerRadius: 10)
            .fill(color.gradient)
            .frame(width: 50, height: 50)
    }
}
.frame(maxHeight: 300)

Alignment

HFlow(alignment: .top) {
    ForEach(colors, id: \.description) { color in
        RoundedRectangle(cornerRadius: 10)
            .fill(color.gradient)
            .frame(width: CGFloat.random(in: 50...80),
                   height: CGFloat.random(in: 50...80))
    }
}
.frame(maxWidth: 300)

Spacing

HFlow(itemSpacing: 4, rowSpacing: 20) {
    ForEach(colors, id: \.description) { color in
        RoundedRectangle(cornerRadius: 10)
            .fill(color.gradient)
            .frame(width: 50, height: 50)
    }
}
.frame(maxWidth: 300)

RTL

HFlow {
    ForEach(colors, id: \.description) { color in
        RoundedRectangle(cornerRadius: 10)
            .fill(color.gradient)
            .frame(width: 50, height: 50)
    }
}
.frame(maxWidth: 300)
.environment(\.layoutDirection, .rightToLeft)

GitHub

View Github