containerRelativeFrame#

将当前视图放置在一个相对于其最近容器尺寸的“隐形框架”中。该修饰符适用于 ScrollView、Grid、布局栈等容器中，用于实现按比例布局或视图对齐。

类型定义#

1containerRelativeFrame?: {
2  axes: AxisSet
3  alignment?: Alignment
4  count: never
5  span: never
6  spacing: never
7} | {
8  axes: AxisSet
9  alignment?: Alignment
10  count: number
11  span?: number
12  spacing: number
13}

描述#

该修饰符允许视图根据其父容器的尺寸进行相对的布局和定位。常用于构建按比例划分空间的布局，或配合滚动视图对视图进行精准定位。

属性说明#

• axes (AxisSet，必填) 指定在哪些轴向上应用相对布局（可选值：horizontal、vertical 或 all）。

• alignment (Alignment，可选，默认值："center"） 控制视图在容器内的对齐方式。

• count (number，可选，仅在第二种用法中有效) 容器会被划分为多少等分。

• span (number，可选，默认值为 1) 当前视图应占据多少等分。

• spacing (number，仅在第二种用法中为必填) 分段之间的间距。

使用方式#

该修饰符支持两种配置模式：

1. 自动适应模式#

仅指定对齐方向和轴向，不设置具体划分方式。

1containerRelativeFrame={{
2  axes: 'horizontal',
3  alignment: 'leading'
4}}

2. 按比例划分模式#

将容器划分为若干等分，并为每个视图分配所占比例及间距。

1containerRelativeFrame={{
2  axes: 'horizontal',
3  count: 4,
4  span: 2,
5  spacing: 10
6}}

示例#

1<HStack>
2  <Text
3    containerRelativeFrame={{
4      axes: 'horizontal',
5      count: 3,
6      span: 1,
7      spacing: 8,
8      alignment: 'center'
9    }}
10  >
11    占据三分之一宽度
12  </Text>
13</HStack>

该示例将文字放入一个宽度为容器三分之一的区域内，视图之间的间距为 8。

参考资料#

• Apple 官方文档
• Hacking with Swift 教程