惰性垂直网格布局（LazyVGrid）#

LazyVGrid 组件是 Scripting 应用的用户界面库的一部分。它通过可自定义的大小和对齐选项将其子元素排列在网格布局中。组件仅根据需要创建和显示项目，从而为处理大型或动态数据集提供了性能优化。

#LazyVGrid

#类型: FunctionComponent<LazyVGridProps>

LazyVGrid 将其子元素排列在一个垂直扩展的网格中。与普通网格不同，它以懒加载方式加载和显示项目，仅在项目即将出现在屏幕上时创建它们。这使其非常适合处理包含大量或动态内容的网格。

#LazyVGridProps

#GridItem

定义网格中单列的属性。

#GridSize

定义网格布局中行或列的大小。

#PinnedScrollViews

定义网格中哪些视图会固定在父滚动视图的边界内：

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

#示例用法

import { LazyVGrid, Text } from 'scripting'

const Example = () => {
  const columns = [
    { size: 50 },
    { size: { type: 'adaptive', min: 40, max: 100 } },
    { size: { type: 'flexible', min: 30, max: 'infinity' } }
  ]

  return (
    <ScrollView>
      <LazyVGrid
        columns={columns}
        alignment="leading"
        spacing={16}
      >
        <Text>项目 1</Text>
        <Text>项目 2</Text>
        <Text>项目 3</Text>
      </LazyVGrid>
    </ScrollView>
  )
}

#说明：

• 定义了三个具有不同大小的列：
  • 一个大小为 50 的固定列
  • 一个最小大小为 40，最大大小为 100 的自适应列
  • 一个最小大小为 30，无最大大小的灵活列
• 网格与其父视图的起始边对齐，项目之间的间距为 16 点

#注意事项

• LazyVGrid 非常适合处理包含大量或动态内容的垂直扩展网格布局
• 使用 GridSize 定义基于可用空间的灵活或自适应布局
• pinnedViews 属性确保关键视图（如标题或页脚）在滚动过程中始终可见

此 API 为基于网格的垂直布局提供了灵活性和性能优化。