HFlow

HFlow is a multi-line HStack that starts a new line every time elements don't fit in the bounding space.

public func HFlow(
  itemAlignment: VerticalAlignment = .center,
  lineAlignment: HorizontalAlignment = .center,
  itemSpacing: CGFloat = 0,
  lineSpacing: CGFloat = 0,
  @FastArrayBuilder<Element> children: () -> [Element]
) -> Element & Layout

var body: Layout {
  HFlow {
    icon
    label
    Button
  }
}

Item Alignment

Items within a line can be aligned vertically using the itemAlignment parameter. The default value is .center

var body: Layout {
  HFlow(itemAlignment: .center) {
    icon
    label
    Button
  }
}

Line Alignment

Similarily, lines can be aligned horizontally using the lineAlignment parameter. The default value is .center

var body: Layout {
  HFlow(lineAlignment: .leading) {
    icon
    label
    Button
  }
}

Spacing

A fixed amount of spacing can be added between each item using the itemSpacing parameter or betweeen each line using the lineSpacing parameter. The default value is 0.

var body: Layout {
  HFlow(itemSpacing: 8) {
    icon
    label
    Button
  }
}

var body: Layout {
  HFlow(lineSpacing: 8) {
    icon
    label
    Button
  }
}

Like all other parameters, itemSpacing and lineSpacing can be combined.

var body: Layout {
  HFlow(itemSpacing: 8, lineSpacing: 8) {
    icon
    label
    Button
  }
}

Performance Considerations

HFlow measures each child element exactly once.

note

Spacer Element cannot be used with HFlow