网格布局（Grid）#

Scripting 应用中的 Grid 组件提供了一个灵活的容器，用于将子视图排列为二维网格布局。它支持自定义对齐、间距以及嵌套子组件，从而创建美观的布局。

Grid 组件#

一个容器视图，用于将其他视图排列为二维布局。

导入路径#

1import { Grid, GridRow } from 'scripting'

类型：GridProps#

GridRow 组件#

Grid 的子组件，表示网格布局中的水平行。使用 GridRow 可水平分组并对齐网格中的子视图。

类型：GridRowProps#

使用示例#

以下示例展示了如何使用 Grid 和 GridRow 组件创建包含行、文本、图像和分隔符的布局。

1<Grid
2  alignment="center"
3  horizontalSpacing={10}
4  verticalSpacing={15}
5>
6  <GridRow alignment="center">
7    <Text>Hello</Text>
8    <Image systemName="globe" />
9  </GridRow>
10  <Divider />
11  <GridRow alignment="bottom">
12    <Image systemName="hand.wave" />
13    <Text>World</Text>
14  </GridRow>
15</Grid>

输出布局

• 第一行： 包含一个 Text 元素（“Hello”）和一个显示 globe 图标的 Image，垂直居中对齐。
• 分隔符： 分隔两行。
• 第二行： 包含一个显示 wave 图标的 Image 和一个 Text 元素（“World”），垂直底部对齐。

属性详细说明#

1. Grid: Alignment（对齐）

   • 设置每个单元格内内容的对齐方式。
   • 可选值：
     • leading：内容对齐到单元格的起始位置。
     • center：内容居中对齐（默认值）。
     • trailing：内容对齐到单元格的结束位置。
   • 示例：

     1<Grid alignment="leading">
     2  <GridRow>
     3    <Text>Aligned to start</Text>
     4  </GridRow>
     5</Grid>

2. GridRow: Alignment（行对齐）

   • 设置每行内容的垂直对齐方式。
   • 可选值：
     • top：内容对齐到行顶部。
     • center：内容垂直居中（默认值）。
     • bottom：内容对齐到行底部。
   • 示例：

     1<Grid>
     2  <GridRow alignment="top">
     3    <Text>Top-aligned</Text>
     4  </GridRow>
     5  <GridRow alignment="bottom">
     6    <Text>Bottom-aligned</Text>
     7  </GridRow>
     8</Grid>

3. 水平和垂直间距

   • 自定义单元格和行之间的间距。
   • 示例：

     1<Grid horizontalSpacing={5} verticalSpacing={20}>
     2  <GridRow>
     3    <Text>Item 1</Text>
     4    <Text>Item 2</Text>
     5  </GridRow>
     6</Grid>

4. Children（子组件）

   • 接受任意组合的 VirtualNode 组件，包括 Text、Image、GridRow 和自定义组件。
   • 支持嵌套数组或空值，以便灵活创建动态布局。

嵌套组件#

Grid 和 GridRow 组件可与其他支持的 UI 元素无缝结合使用：

• Divider： 在行之间添加视觉分隔。
• Text、Image 和自定义组件： 可将任意支持的 UI 组件作为 GridRow 的子元素。

图像示例#

以下示例展示了输出布局的图像：

此布局对应前述示例，显示了两行内容及一个分隔符。

注意事项#

• 默认间距： 水平和垂直间距值针对 iOS 进行了优化，但可根据具体设计需求进行自定义。
• 对齐选项： 将 Grid 的单元格对齐与 GridRow 的垂直对齐结合使用，实现精确的布局控制。
• 动态布局： Grid 和 GridRow 的灵活性使其适用于具有可变内容的响应式设计。

欢迎尝试使用不同的子组件和间距配置，创建适合您 UI 的定制设计！