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
Layoutprotocol - Supports Right-to-Left layout direction
- Sample SwiftUI View to tweak parameters
HFlow
struct Colors: View {
let colors: [Color] = [
.blue,
.orange,
.green,
.yellow,
.brown,
.mint,
.indigo,
.cyan,
.gray,
.pink
]
var body: some View {
HFlow {
ForEach(colors + colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: Double.random(in: 40...60), height: 50)
}
}
.frame(maxWidth: 300)
}
}
VFlow
VFlow {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: 50, height: Double.random(in: 40...60))
}
}
.frame(maxHeight: 300)
Alignment
HFlow(alignment: .top) {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: 50, height: Double.random(in: 40...60))
}
}
.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: Double.random(in: 40...60), height: 50)
}
}
.frame(maxWidth: 300)
.environment(\.layoutDirection, .rightToLeft)