UI布局
Lazy Grid
使用固定、弹性或自适应轨道排列网格内容。
LazyVGrid 按列描述布局内容，LazyHGrid 按行描述布局内容。两者都使用 GridItem 定义轨道尺寸、间距和对齐方式。
OneScript 当前会在提交视图前解析完整的 TypeScript/TSX 子节点树。SwiftUI 在布局和显示阶段按需创建对应视图。
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 | 说明 |
|---|---|---|
columns | GridItem[] | 非空列描述数组。 |
alignment | "leading" | "center" | "trailing" | 网格水平对齐方式，默认 "center"。 |
spacing | number | 行间距（pt）；省略时使用系统间距。 |
pinnedViews | PinnedScrollableView[] | 可吸附的 Section 页眉或页脚。 |
LazyHGrid
| Prop | Type | 说明 |
|---|---|---|
rows | GridItem[] | 非空行描述数组。 |
alignment | "top" | "center" | "bottom" | 网格垂直对齐方式，默认 "center"。 |
spacing | number | 列间距（pt）；省略时使用系统间距。 |
pinnedViews | PinnedScrollableView[] | 可吸附的 Section 页眉或页脚。 |
GridItem
GridItem.fixed(size, options?)创建固定尺寸的行或列。GridItem.flexible({ minimum?, maximum?, spacing?, alignment? })创建弹性行或列，minimum默认10，maximum默认Infinity。GridItem.adaptive({ minimum, maximum?, spacing?, alignment? })在可用空间内重复创建自适应行或列，maximum默认Infinity。
spacing 设置当前轨道与下一轨道的间距，alignment 设置当前轨道内单元格的对齐方式。
How is this guide?
最后更新于