Layout¶
The layout system in NuiiTivet is designed to be simple yet powerful. It incorporates intuitive aspects from Web (CSS) and Flutter, allowing you to build screens with Pythonic syntax.
Key Concepts¶
1. Arranging Boxes (Box Model)¶
The basics are repeatedly "stacking vertically (Column)" and "arranging horizontally (Row)". Even complex screens can be expressed by nesting these.
2. Spacing and Sizing¶
There is no margin. Spacing is controlled entirely by parent container padding or gap between elements.
Sizes can be intuitively specified in three patterns: fixed, auto (fit content), and weight (share the leftover space).
3. Alignment¶
"Where to place" in the remaining space is determined by the alignment property.
"Center", "Right align", etc., are all controlled by this.
Topic Guides¶
Refer to the following guides based on what you want to create.
| What you want to do | Reference | Main Components |
|---|---|---|
| Arrange vertically or horizontally | Layout Basics | Row, Column |
| Partitioning like header/sidebar | Layout Grid | Grid |
| Overlay elements (Badges, backgrounds, etc.) | Layout Extras | Stack |
| Create wrapping lists (Tag lists, etc.) | Layout Extras | Flow |
| Make scrollable | Layout Overflow | VerticalScrollable / HorizontalScrollable |
| Create tab switching | Layout Extras | Deck |
| Dynamically generate a list from data | Dynamic Children | builder() / ForEach |
| Adapt layout to a container's size | Adaptive Layout | on_size_changed |
More Details¶
This guide focuses on practical usage in app code.