Skip to content

Flow Layout

<flow-layout>
Containers.verticalFlow(...) | Containers.horizontalFlow(...)

The flow layout component arranges its children in a vertical or horizontal flow. It supports various alignment and sizing options.

Parameters:

  • direction (required): The direction of the flow layout (vertical, horizontal, or ltr-text-flow).
  • gap: The gap between child components in pixels.
  • padding: The padding around the child components.
  • surface: The background surface of the flow layout.
  • horizontal-alignment: The horizontal alignment of the child components.
  • vertical-alignment: The vertical alignment of the child components.
  • allow-overflow: Whether to allow child components to overflow the bounds of the flow layout.

Example (Code-driven):

Containers.verticalFlow(Sizing.fill(100), Sizing.content())
    .child(Components.label(Text.literal("Item 1")))
    .child(Components.label(Text.literal("Item 2")))
    .gap(10)
    .padding(Insets.of(20))
    .surface(Surface.PANEL)
    .horizontalAlignment(HorizontalAlignment.CENTER)
    .verticalAlignment(VerticalAlignment.CENTER)

Example (Data-driven):

<flow-layout direction="vertical">
    <children>
        <label>
            <text>Item 1</text>
        </label>
        <label>
            <text>Item 2</text>
        </label>
    </children>
    <gap>10</gap>
    <padding>
        <all>20</all>
    </padding>
    <surface>
        <panel/>
    </surface>
    <horizontal-alignment>center</horizontal-alignment>
    <vertical-alignment>center</vertical-alignment>
</flow-layout>
Last update: 2024-03-22