Skip to content

[Feature] UI layout system #149

@vmarcella

Description

@vmarcella

Overview

Add a layout system that automatically positions and sizes widgets based on
constraints, similar to flexbox.

Current State

No response

Scope

Goals:

  • Container widgets with layout rules
  • Horizontal and vertical stacking
  • Flexible sizing (grow, shrink)
  • Fixed size and percentage sizing
  • Padding and margins

Non-Goals:

  • Grid layout
  • Absolute positioning
  • CSS-like styling

Proposed API

pub enum LayoutDirection {
  Horizontal,
  Vertical,
}

pub enum Size {
  Fixed(f32),
  Percent(f32),
  Grow(f32), // flex grow factor
}

pub struct LayoutContainer {
  direction: LayoutDirection,
  children: Vec<Box<dyn Widget>>,
  padding: f32,
  spacing: f32,
}

impl LayoutContainer {
  pub fn horizontal() -> Self;
  pub fn vertical() -> Self;
  pub fn with_padding(self, padding: f32) -> Self;
  pub fn with_spacing(self, spacing: f32) -> Self;
  pub fn add_child(&mut self, widget: impl Widget, size: Size);
  pub fn layout(&mut self, available: Rect);
}

Acceptance Criteria

  • Horizontal layout arranges children left to right
  • Vertical layout arranges children top to bottom
  • Fixed size children get exact size
  • Grow children share remaining space
  • Padding and spacing applied correctly

Affected Crates

lambda-rs

Notes

  • Yoga or Taffy libraries implement flexbox, should look into them for implementation references

Metadata

Metadata

Assignees

No one assigned

    Labels

    UIAll things user interface relatedenhancementNew feature or requestlambda-rsIssues pertaining to the core framework

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions