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)
    }
}

HFlow

VFlow

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

VFlow

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)

VFlow

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)

VFlow

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)

VFlow

GitHub

View Github