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).
import Flow
struct Colors: View {
let colors: [Color] = [
.blue,
.orange,
.green,
.yellow,
.brown,
.mint,
.indigo,
.cyan,
.gray,
.pink
]
var body: some View {
HFlow {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: .random(in: 40...60), height: 50)
}
}
.frame(maxWidth: 300)
}
}VFlow {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: 50, height: .random(in: 40...60))
}
}
.frame(maxHeight: 300)Supports the same alignments as HStack and VStack do.
HFlow(alignment: .top) {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: 50, height: .random(in: 40...60))
}
}
.frame(maxWidth: 300)Additionally, alignment can be specified on both axes. Ideal for tags.
HFlow(horizontalAlignment: .center, verticalAlignment: .top) {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: .random(in: 30...60), height: 30)
}
}
.frame(maxWidth: 300)Customize spacing between rows and items separately.
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)Distribute items evenly by minimizing the empty spaces left in each row. Implements the Knuth-Plass line breaking algorithm.
HFlow(distributeItemsEvenly: true) {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: 65, height: 50)
}
}
.frame(width: 300, alignment: .leading)HFlow(justified: true) {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: 50, height: 50)
}
}
.frame(width: 300)HFlow { // distributes flexible items proportionally
RoundedRectangle(cornerRadius: 10)
.fill(.red)
.frame(minWidth: 50, maxWidth: .infinity)
.frame(height: 50)
.flexibility(.minimum) // takes as little space as possible, rigid
RoundedRectangle(cornerRadius: 10)
.fill(.green)
.frame(minWidth: 50, maxWidth: .infinity)
.frame(height: 50)
.flexibility(.natural) // expands
RoundedRectangle(cornerRadius: 10)
.fill(.blue)
.frame(minWidth: 50, maxWidth: .infinity)
.frame(height: 50)
.flexibility(.natural) // expands
RoundedRectangle(cornerRadius: 10)
.fill(.yellow)
.frame(minWidth: 50, maxWidth: .infinity)
.frame(height: 50) // takes as much space as possible
.flexibility(.maximum)
}
.frame(width: 300)HFlow {
RoundedRectangle(cornerRadius: 10)
.fill(.red)
.frame(width: 50, height: 50)
RoundedRectangle(cornerRadius: 10)
.fill(.green)
.frame(width: 50, height: 50)
RoundedRectangle(cornerRadius: 10)
.fill(.blue)
.frame(width: 50, height: 50)
LineBreak()
RoundedRectangle(cornerRadius: 10)
.fill(.yellow)
.frame(width: 50, height: 50)
}
.frame(width: 300)HFlow {
RoundedRectangle(cornerRadius: 10)
.fill(.red)
.frame(width: 50, height: 50)
RoundedRectangle(cornerRadius: 10)
.fill(.green)
.frame(width: 50, height: 50)
.startInNewLine()
RoundedRectangle(cornerRadius: 10)
.fill(.blue)
.frame(width: 50, height: 50)
RoundedRectangle(cornerRadius: 10)
.fill(.yellow)
.frame(width: 50, height: 50)
}
.frame(width: 300)Adapts to left-to-right and right-to-left environments too.
HFlow {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: .random(in: 40...60), height: 50)
}
}
.frame(maxWidth: 300)
.environment(\.layoutDirection, .rightToLeft)