Flow

1.1.0

Flow Layout implemented in SwiftUI
tevelee/SwiftUI-Flow

What's New

2023-02-12T23:50:01Z

First contribution of @aehlke: #1 (lowering target platform to iOS 15 and macOS 12)

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

Description

  • Swift Tools 5.7.0
View More Packages from this Author

Dependencies

Last updated: Thu Mar 30 2023 12:03:20 GMT-0500 (GMT-05:00)