Scripting
开始
文档
更新日志
开始
文档
更新日志
简体中文

惰性垂直网格布局（LazyVGrid）

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

LazyVGrid

类型: FunctionComponent<LazyVGridProps>

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

LazyVGridProps

属性 类型 默认值 描述
columns GridItem[] 必需 定义网格中列的配置，包括其大小和对齐方式。
alignment HorizontalAlignment undefined 控制网格在其父视图中的水平对齐方式。
spacing number undefined（默认间距） 相邻网格项之间的距离。如果设置为 undefined，网格将使用默认间距值。
pinnedViews 'sectionHeaders' | 'sectionFooters' | 'sectionHeadersAndFooters' undefined 指定哪些子视图会固定在父滚动视图的边界内。
children (VirtualNode | undefined | null | (VirtualNode | undefined | null)[])[] | VirtualNode undefined 要在网格中显示的内容。接受一个或多个 VirtualNode 元素，包括数组以及可选的 null 或 undefined 值。

GridItem

定义网格中单列的属性。

属性 类型 默认值 描述
alignment Alignment undefined 指定在此列中放置每个子视图时使用的对齐方式。
spacing number undefined（默认间距） 此列与下一列之间的间距。
size GridSize 必需 定义列的大小。可以是固定大小，也可以是基于内容的灵活/自适应大小。

GridSize

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

类型 属性 描述
number 无 行或列的固定大小。
adaptive min: number, max?: number | 'infinity' 指定一个灵活大小，根据内容进行调整，带有最小值和可选的最大值限制。
flexible min?: number, max?: number | 'infinity' 指定一个动态调整的灵活大小，可以使用可选的最小值和最大值约束。

PinnedScrollViews

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

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

示例用法

1import { LazyVGrid, Text } from 'scripting'
2
3const Example = () => {
4  const columns = [
5    { size: 50 },
6    { size: { type: 'adaptive', min: 40, max: 100 } },
7    { size: { type: 'flexible', min: 30, max: 'infinity' } }
8  ]
9
10  return (
11    <ScrollView>
12      <LazyVGrid
13        columns={columns}
14        alignment="leading"
15        spacing={16}
16      >
17        <Text>项目 1</Text>
18        <Text>项目 2</Text>
19        <Text>项目 3</Text>
20      </LazyVGrid>
21    </ScrollView>
22  )
23}

说明：

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

注意事项

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

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

大纲