UI布局
LazyHStack
按需布局横向排列的子视图。
LazyHStack 使用 SwiftUI 原生 Lazy 容器横向布局内容,适合放在水平 ScrollView 中显示较长内容。
OneScript 当前会在提交视图前解析完整的 TypeScript/TSX 子节点树。SwiftUI 在布局和显示阶段按需创建对应视图。
import {
LazyHStack, PinnedScrollableViews, ScrollView, Section, Text,
} from "onescript/views"
<ScrollView axes="horizontal">
<LazyHStack
alignment="top"
spacing={12}
pinnedViews={[PinnedScrollableViews.sectionHeaders]}
>
<Section header={<Text>推荐</Text>}>
<Text>项目 A</Text>
<Text>项目 B</Text>
</Section>
<Section header={<Text>最近</Text>}>
<Text>项目 C</Text>
</Section>
</LazyHStack>
</ScrollView>| Prop | Type | 说明 |
|---|---|---|
alignment | "top" | "center" | "bottom" | 子视图垂直对齐方式,默认 "center"。 |
spacing | number | 子视图间距(pt);省略时使用系统间距。 |
pinnedViews | PinnedScrollableView[] | 可吸附的 Section 页眉或页脚。 |
children | 视图或视图数组 | 按从左到右的顺序显示子视图。 |
PinnedScrollableViews.sectionHeaders 吸附页眉,PinnedScrollableViews.sectionFooters 吸附页脚。吸附效果在水平 ScrollView 中生效。
How is this guide?
最后更新于