API reference

FlexBox Struct

Extends ViewComponentSerializable, RootViewSerializable, FlexShapedComponent, Sendable

A flex layout container that arranges children along a configurable axis.

FlexBox is the root-level display component. Create a FlexBox and pass it to Display.send(_:) to show content on glasses.

FlexBox is also the only layout type that accepts the layout-shape modifiers flexGrow(_:), flexShrink(_:), alignSelf(_:), padding(_:)-3lpgz, background(_:), and onTap(_:) — each returns a copy of the same FlexBox with one field changed, never wrapping it in another container.

Signature

struct FlexBox: ViewComponentSerializable, RootViewSerializable, FlexShapedComponent, Sendable

Constructors

init ( direction , spacing , alignment , crossAlignment , wrap , padding , content )

Creates a FlexBox with children built using the result builder DSL.

Signature

public init( direction: Direction,  spacing: CGFloat,  alignment: Alignment,  crossAlignment: Alignment,  wrap: Bool,  padding: EdgeInsets?,  content: () -> [any ViewComponent])

Parameters

direction: Direction The layout direction for children. Defaults to Direction.column.

spacing: CGFloat Spacing in dp between children. Defaults to 0.

alignment: Alignment Alignment of children along the main axis. Defaults to Alignment.start.

crossAlignment: Alignment Alignment of children along the cross axis. Defaults to Alignment.start. For column layouts children always stretch to fill the cross axis; this value applies to row layouts.

wrap: Bool Whether children should wrap to the next line. Defaults to false.

padding: EdgeInsets? Padding applied to the edges of the container. Defaults to nil.

content: () -> [any ViewComponent] A builder block for adding child components.

Properties

alignment : Alignment	Alignment of children along the main axis.
alignSelf : Alignment?	Per-child cross-axis alignment override applied when this FlexBox is a child of another FlexBox.
background : Background	Background style for this FlexBox. Defaults to Background.none.
children : [any ViewComponent]	The child components arranged within this flex layout.
crossAlignment : Alignment	Alignment of children along the cross axis. For Direction.column and Direction.columnReverse layouts, children always stretch to fill the cross axis and this value is not applied; it takes effect for row layouts.
direction : Direction	The layout direction for children.
flexGrow : Float	Flex-grow factor applied when this FlexBox is itself a child of another FlexBox.
flexShrink : Float	Flex-shrink factor applied when this FlexBox is itself a child of another FlexBox.
onClick : (@Sendable () -> Void)?	Optional callback invoked when this FlexBox is tapped on the wearable. Set via onTap(_:).
padding : EdgeInsets?	Padding applied to the edges of the flex container.
spacing : CGFloat	Spacing in dp between children.
wrap : Bool	Whether children should wrap to the next line when they exceed the container.

Functions

alignSelf ( value )	Overrides the cross-axis alignment for this FlexBox. Signature public func alignSelf(_ value: Alignment) -> FlexBox Parameters `_ value: Alignment` Returns `FlexBox`
background ( value )	Sets the background style for this FlexBox. Signature public func background(_ value: Background) -> FlexBox Parameters `_ value: Background` Returns `FlexBox`
flexGrow ( value )	Sets the flex-grow factor for this FlexBox. Signature public func flexGrow(_ value: Float) -> FlexBox Parameters `_ value: Float` Returns `FlexBox`
flexShrink ( value )	Sets the flex-shrink factor for this FlexBox. Signature public func flexShrink(_ value: Float) -> FlexBox Parameters `_ value: Float` Returns `FlexBox`
onTap ( handler )	Adds a tap handler. Signature public func onTap(_ handler: @escaping @Sendable () -> Void) -> FlexBox Parameters `_ handler: @escaping @Sendable () -> Void` Returns `FlexBox`
padding ( value )	Sets edge insets as the FlexBox padding. Signature public func padding(_ value: CGFloat) -> FlexBox Parameters `_ value: CGFloat` Returns `FlexBox`
padding ( edges , value )	Sets padding on a specific subset of edges. Signature public func padding(_ edges: Edge, _ value: CGFloat) -> FlexBox Parameters `_ edges: Edge` `_ value: CGFloat` Returns `FlexBox`