ZStack#

ZStack 组件在 Scripting 应用中用于将子视图以层叠堆栈的形式排列。它支持通过预定义的对齐指南，在 x 和 y 轴上灵活地对齐这些图层。

ZStackProps#

ZStack 组件接受以下属性：

Alignment#

Alignment 类型定义了一组常用的对齐方式，用于堆叠视图。这些对齐方式结合了水平和垂直方向的对齐指南。下图展示了这些对齐方式：

支持的值：#

ZStack 组件#

ZStack 是一个函数组件，用于将其子元素以层叠堆栈的形式排列。每个子元素的位置相对于 alignment 属性中定义的对齐方式。

导入组件#

要使用 ZStack 组件，请确保从 Scripting 应用的 scripting 包中导入它：

1import { ZStack } from 'scripting'

示例用法#

1. 基础示例#

将子视图对齐到顶部：

1<ZStack alignment="top">
2  <Image systemName="globe" />
3  <Text>
4    Hello world.
5  </Text>
6</ZStack>

2. 高级对齐#

使用复杂的对齐方式（如 bottomLeading）定位子元素：

1<ZStack alignment="bottomLeading">
2  <Rectangle fill="gray" />
3  <Text>
4    Bottom Leading Text
5  </Text>
6</ZStack>

3. 嵌套 ZStack 示例#

将 ZStack 与其他布局组件结合以实现复杂布局：

1<ZStack alignment="center">
2  <Rectangle fill="blue" />
3  <ZStack alignment="topTrailing">
4    <Image systemName="star" />
5    <Text>
6      Nested ZStack
7    </Text>
8  </ZStack>
9</ZStack>

注意事项#

• 性能考虑：避免向 ZStack 添加过多的子视图，以免在复杂布局中导致潜在的性能瓶颈。
• 组合布局：将 ZStack 与其他组件（如 VStack 和 HStack）结合使用，以创建灵活动态的用户界面。