惰性垂直布局（LazyVStack）#

LazyVStack 组件是 Scripting 应用用户界面库的一部分。它将子元素排列在垂直堆叠中，仅根据需要创建和显示项目，从而为大型数据集提供了性能优化。

#LazyVStack

#类型: FunctionComponent<LazyVStackProps>

LazyVStack 将其子元素排列成一个垂直扩展的线性布局。与普通垂直堆叠不同，它仅在视图即将出现在屏幕上时懒加载和显示内容。这使其非常适合处理列表或动态生成的大量内容。

#LazyVStackProps

#PinnedScrollViews

PinnedScrollViews 类型定义了哪些类型的子视图可以在滚动期间固定在滚动视图的边界内：

• 'sectionHeaders'：仅固定节标题
• 'sectionFooters'：仅固定节页脚
• 'sectionHeadersAndFooters'：同时固定节标题和页脚

#示例用法

import { LazyVStack, Text, ScrollView, Section } from 'scripting'

const Example = () => {
  return (
    <ScrollView>
      <LazyVStack alignment="leading" spacing={12} pinnedViews="sectionHeaders">
        {list.map(item => 
          <Section
            key={item.id}
            header={
              <Text>{item.title}</Text>
            }
          >
            <ItemView
              item={item}
            />
          </Section>
        )}
      </LazyVStack>
    </ScrollView>
  )
}

#说明：

• 堆叠以 12 点的间距将 Section 视图垂直排列
• alignment 属性将项目对齐到堆叠的起始边
• pinnedViews 属性确保节标题在滚动视图顶部保持固定状态

#注意事项

• 懒加载确保仅在视图变得可见时创建视图，从而提高大型内容的性能
• 使用 spacing 控制项目之间的垂直距离，使用 alignment 自定义水平对齐
• pinnedViews 属性对于具有粘性标题或页脚的表格或列表布局特别有用

此 API 允许您高效管理垂直增长的内容，同时提供布局和滚动行为的定制选项。