OneScript

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>
PropType说明
alignment"top" | "center" | "bottom"子视图垂直对齐方式,默认 "center"。
spacingnumber子视图间距(pt);省略时使用系统间距。
pinnedViewsPinnedScrollableView[]可吸附的 Section 页眉或页脚。
children视图或视图数组按从左到右的顺序显示子视图。

PinnedScrollableViews.sectionHeaders 吸附页眉,PinnedScrollableViews.sectionFooters 吸附页脚。吸附效果在水平 ScrollView 中生效。

How is this guide?

最后更新于