OneScript

LazyVStack

按需布局纵向排列的子视图。

LazyVStack 使用 SwiftUI 原生 Lazy 容器纵向布局内容,适合放在垂直 ScrollView 中显示较长列表。

OneScript 当前会在提交视图前解析完整的 TypeScript/TSX 子节点树。SwiftUI 在布局和显示阶段按需创建对应视图。

import {
  LazyVStack, PinnedScrollableViews, ScrollView, Section, Text,
} from "onescript/views"

<ScrollView>
  <LazyVStack
    alignment="leading"
    spacing={8}
    pinnedViews={[PinnedScrollableViews.sectionHeaders]}
  >
    <Section header={<Text>A</Text>}>
      <Text>Alice</Text>
      <Text>Alex</Text>
    </Section>
    <Section header={<Text>B</Text>}>
      <Text>Bob</Text>
    </Section>
  </LazyVStack>
</ScrollView>
PropType说明
alignment"leading" | "center" | "trailing"子视图水平对齐方式,默认 "center"。
spacingnumber子视图间距(pt);省略时使用系统间距。
pinnedViewsPinnedScrollableView[]可吸附的 Section 页眉或页脚。
children视图或视图数组按从上到下的顺序显示子视图。

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

How is this guide?

最后更新于