Layout controls how the children of a container widget are arranged. This guide covers the layout options available in anyui-LIVE and how they behave in the generated LVGL output.

Overview

Every widget can be a layout container. When a container uses a layout, its children are placed automatically according to the layout rules instead of at fixed positions. anyui-LIVE renders layout live on the canvas, so changes are visible immediately and are reflected in preview and in the generated code.

The layout settings are available in the inspector under the Layout group.

Mode

The Mode option selects the layout engine for the container:

  • None - children are placed manually and are not affected by layout rules.
  • Flex - children are arranged by a flex container.

Flex flow

Flex flow sets the direction and wrapping strategy of the flex container. It determines whether children lay out as a row, a column, or a wrapped variant:

  • Row / Row Reverse
  • Column / Column Reverse
  • Row Wrap / Row Wrap Reverse
  • Column Wrap / Column Wrap Reverse

Alignment

The flex container provides three alignment options:

  • Main align - distributes children along the main axis (the direction of the flex flow): Start, Center, End, Space Evenly, Space Around, or Space Between.
  • Cross align - aligns children along the cross axis, perpendicular to the flex flow direction.
  • Track align - aligns wrapped flex tracks when the flow creates multiple rows or columns.

Gaps

  • Row gap - sets the gap between rows of children.
  • Column gap - sets the gap between columns of children.

Gap values are non-negative integers, in pixels.

  • Image - assign raster resources to widgets.
  • Font - typography and text layout.
  • Overview - design screens on the canvas.
  • Preview - validate layout in a live simulation.
  • Codegen - how layout becomes generated LVGL code.
  • Override screen size - change the display resolution at runtime.