frame#

frame 属性用于设置视图的尺寸（固定或弹性）以及在容器中的对齐方式。支持两种不同的配置格式：

1. 固定尺寸格式#

1frame?: {
2  width?: number
3  height?: number
4  alignment?: Alignment
5}

用于指定固定的宽度和高度，并设置在该区域内的对齐方式。

示例#

1<VStack
2  frame={{
3    width: 100,
4    height: 100,
5    alignment: 'center'
6  }}
7>
8  <Text>固定尺寸</Text>
9</VStack>

2. 弹性尺寸格式#

1frame?: {
2  alignment?: Alignment
3  minWidth?: number
4  minHeight?: number
5  maxWidth?: number | 'infinity'
6  maxHeight?: number | 'infinity'
7  idealWidth?: number | 'infinity'
8  idealHeight?: number | 'infinity'
9}

用于设置最小、最大和理想尺寸。数值可以为具体数值或字符串 'infinity'，表示尽可能占满可用空间。

示例#

1<HStack
2  frame={{
3    minWidth: 100,
4    maxWidth: 'infinity',
5    minHeight: 50,
6    idealHeight: 100,
7    alignment: 'leading'
8  }}
9>
10  <Text>可扩展宽度</Text>
11</HStack>

对齐方式（Alignment）#

alignment 决定视图在其 frame 内的布局位置。支持的值包括：

• 'center'（居中）
• 'top'（顶部对齐）
• 'bottom'（底部对齐）
• 'leading'（前导边对齐，LTR 中为左）
• 'trailing'（尾部边对齐，LTR 中为右）
• 'topLeading'（左上角）
• 'topTrailing'（右上角）
• 'bottomLeading'（左下角）
• 'bottomTrailing'（右下角）

注意：仅当 frame 的尺寸大于内容视图的自然尺寸时，对齐方式才会起作用。

示例#

1<Text
2  frame={{
3    width: 200,
4    height: 100,
5    alignment: 'bottomTrailing'
6  }}
7>
8  对齐文本
9</Text>

使用建议#

• 如果需要精确控制尺寸，建议使用固定格式的 width 和 height。
• 如果希望布局适应不同屏幕或内容，推荐使用弹性尺寸的 min / max / ideal 格式。
• 请勿在同一个 frame 对象中混合使用 width / height 与 minWidth / maxWidth 等，以避免冲突。

总结#

frame 属性是布局控制的基础工具，可用于设定视图尺寸和定位方式。借助 CommonViewProps，你可以灵活地构建适配性强、结构清晰的界面布局。