UILayouts
Lazy Grid
Arrange grid content with fixed, flexible, or adaptive tracks.
LazyVGrid lays out content using column descriptions, while LazyHGrid uses row descriptions. Both use GridItem values to define track size, spacing, and alignment.
OneScript currently resolves the complete TypeScript/TSX child-node tree before committing the view. SwiftUI creates the corresponding views on demand during layout and display.
import { GridItem, LazyVGrid, Text } from "onescript/views"
<LazyVGrid
columns={[
GridItem.fixed(64),
GridItem.flexible({ minimum: 80 }),
GridItem.adaptive({ minimum: 100, maximum: 180 }),
]}
alignment="leading"
spacing={12}
>
<Text>One</Text>
<Text>Two</Text>
<Text>Three</Text>
</LazyVGrid>LazyVGrid
| Prop | Type | Description |
|---|---|---|
columns | GridItem[] | A nonempty array of column descriptions. |
alignment | "leading" | "center" | "trailing" | Horizontal grid alignment. Defaults to "center". |
spacing | number | Space between rows in pt. Uses the system spacing when omitted. |
pinnedViews | PinnedScrollableView[] | Section headers or footers that remain pinned while scrolling. |
LazyHGrid
| Prop | Type | Description |
|---|---|---|
rows | GridItem[] | A nonempty array of row descriptions. |
alignment | "top" | "center" | "bottom" | Vertical grid alignment. Defaults to "center". |
spacing | number | Space between columns in pt. Uses the system spacing when omitted. |
pinnedViews | PinnedScrollableView[] | Section headers or footers that remain pinned while scrolling. |
GridItem
GridItem.fixed(size, options?)creates a fixed-size row or column.GridItem.flexible({ minimum?, maximum?, spacing?, alignment? })creates a flexible row or column.minimumdefaults to10andmaximumdefaults toInfinity.GridItem.adaptive({ minimum, maximum?, spacing?, alignment? })repeats adaptive rows or columns within the available space.maximumdefaults toInfinity.
spacing controls the gap after the current track. alignment controls cell alignment within the current track.
How is this guide?
Last updated on