垂直布局（VStack）#

在Scripting 应用程序中，VStack 组件是一个布局视图，用于垂直排列其子视图。它提供了灵活的选项，用于调整子视图的对齐方式以及控制它们之间的间距。

VStack 组件#

类型声明#

1declare const VStack: FunctionComponent<VStackProps>

描述#

VStack 组件会将其子视图垂直排列，非常适合创建垂直堆叠的布局。您可以根据设计需求，自定义子视图的对齐方式和它们之间的间距。

属性#

alignment （可选）#

• 类型: HorizontalAlignment
• 默认值: "center"
• 描述: 确定堆栈中子视图的水平对齐方式。对齐方式指定了垂直排列的视图如何在水平方向上相互定位。
• 可接受的值:
  • "leading"：将视图向左对齐。
  • "center"：将视图水平居中对齐。
  • "trailing"：将视图向右对齐。

示例#

1<VStack alignment="leading">
2  <Text>左对齐</Text>
3  <Text>另一个项目</Text>
4</VStack>

spacing （可选）#

• 类型: number | undefined
• 默认值: 如果未指定，则会根据子视图自动计算。
• 描述: 设置相邻子视图之间的距离（像素）。使用 undefined 时，堆栈将自动确定最佳间距。

示例#

1<VStack spacing={10}>
2  <Text>项目 1</Text>
3  <Text>项目 2</Text>
4</VStack>

children （可选）#

• 类型:

  1(VirtualNode | undefined | null | (VirtualNode | undefined | null)[])[] | VirtualNode | undefined
• 描述: 堆栈中显示的子元素。您可以传递单个元素、元素数组或 undefined/null 值。null 和 undefined 值会被忽略，从而支持动态布局。

示例#

1<VStack>
2  <Text>第一个项目</Text>
3  <Image systemName="star" />
4</VStack>

HorizontalAlignment 类型#

水平对齐控制了当视图在 VStack 中垂直排列时，如何在水平方向上相互定位。

类型声明#

1type HorizontalAlignment = 'leading' | 'center' | 'trailing'

对齐选项#

• leading：将所有子视图与堆栈的左边缘对齐。
• center：将所有子视图水平居中对齐。
• trailing：将所有子视图与堆栈的右边缘对齐。

视觉指南#

以下是三种对齐选项的示例图：

使用示例#

1<VStack alignment="leading" spacing={10}>
2  <Image systemName="globe" />
3  <Text>左对齐项目</Text>
4  <Text>另一个项目</Text>
5</VStack>

解释#

1. alignment="leading"：将所有子视图左对齐。
2. spacing={10}：为每个子视图之间添加 10 像素的间距。
3. 包含两个子视图：
   • 一个显示系统图标的 Image 视图。
   • 两个显示标签项目的 Text 视图。

最佳实践#

1. 使用 alignment 来控制堆叠文本和图标的水平定位，以实现更好的视觉一致性。
2. 利用 spacing 创建间距合理、视觉美观的布局。
3. 动态或条件性地传递子元素时，无需担心 null 或 undefined 值。

通过本指南，您可以自信地使用 VStack 组件，在Scripting 应用项目中创建清晰的垂直堆叠布局。