Layout System

Reox provides a flexible, declarative layout system with stacks, grids, and containers for building responsive UIs.

Stack Layouts

Linear layouts using vstack, hstack, and zstack.

VStack

Vertical stack - items arranged top to bottom

vstack(gap: float) → View

HStack

Horizontal stack - items arranged left to right

hstack(gap: float) → View

ZStack

Overlay stack - items layered on top of each other

zstack() → View
// Vertical stack with 16px gap
let column: View = vstack(16.0);
view_add_child(column, text_view("Title"));
view_add_child(column, text_view("Subtitle"));

// Horizontal row with 8px gap
let row: View = hstack(8.0);
view_add_child(row, button_primary("Save"));
view_add_child(row, button_secondary("Cancel"));

// Overlay (e.g., badge on avatar)
let overlay: View = zstack();
view_add_child(overlay, avatar_view("user.png"));
view_add_child(overlay, badge_view("3"));

Grid Layout

Create grid-based layouts with a fixed number of columns.

// 3-column grid with 12px gap
let grid: View = grid_view(3, 12.0);

// Add items - they wrap automatically
for i in 0..9 {
    let card: View = vstack(8.0);
    view_set_background(card, color_surface());
    view_set_corner_radius(card, 12.0);
    view_add_child(grid, card);
}

Flex & Scroll Containers

flex_view()

Flexbox-style container for complex layouts

view_set_flex(v, grow, shrink)

scroll_view()

Scrollable container for overflow content

scroll_view() → View

list_view()

Virtualized list for large data sets

list_view() → View

center()

Centers its child view

center() → View

Spacing Helpers

spacer()

Expands to fill available space (like CSS flex: 1)

divider()

Horizontal line separator

// Header with spacer pushes button to right
let header: View = hstack(0.0);
view_add_child(header, text_view("Title"));
view_add_child(header, spacer()); // fills middle
view_add_child(header, button_icon("menu"));

Padding & Margins

Use EdgeInsets to control spacing around views.

// EdgeInsets constructors
insets_all(20.0);              // All sides equal
insets_symmetric(16.0, 24.0);  // Vertical, Horizontal
insets(10.0, 20.0, 10.0, 20.0); // Top, Right, Bottom, Left

// Apply to view
view_set_padding(card, insets_all(16.0));
view_set_margin(card, insets_symmetric(8.0, 0.0));

Size Modifiers

view_set_size(v, 200.0, 100.0);    // Fixed width & height
view_set_width(v, 300.0);           // Width only
view_set_height(v, 50.0);           // Height only
view_set_min_size(v, 100.0, 40.0);  // Minimum constraints
view_set_max_size(v, 500.0, 300.0); // Maximum constraints
view_set_flex(v, 1.0, 0.0);        // Flex grow, shrink
← WidgetsEvents & Actions →