Spacer
在 Stack 中分配剩余空间,用于把两侧内容推开或为内容预留弹性距离。minLength 设置最小长度,显式 width 或 height 可固定对应方向的大小。
示例
function main() {
return (
<HStack>
<Text>A</Text>
<Spacer minLength={16} />
<Text>B</Text>
</HStack>
);
}
用法说明
- Spacer 不绘制任何内容。在 HStack 中优先分配横向剩余空间,在 VStack 中分配纵向空间;minLength 是下限。显式 width/height 可把对应轴固定下来,不能给它添加背景、透明度或图形特效。
- 数字尺寸使用屏幕点;auto 根据内容测量,fill 使用父布局分配的空间。先给容器明确尺寸,再调整子 View。fill 不会创建额外空间,长文本也不会自动撑开固定尺寸的父级。
属性
minLength?number在父级 Stack 主轴上保留的最小弹性空间,单位为点。
示例
0通用属性
width?number | "auto" | "fill"宽度:点数、自动测量或填满父区域。
示例
"auto"height?number | "auto" | "fill"高度:点数、自动测量或填满父区域。
示例
"auto"animations?SpacerAnimation[]支持的属性变化时执行动画。duration/delay 单位为秒;from/to 指定端点;repeat 和 autoreverse 控制重复,wrap 指定周期。
示例
[{property: "minLength", duration: 0.25, curve: "easeInOut"}]key?string | number兄弟节点中的稳定标识。
示例
""组合示例
function main() {
return (
<VStack spacing={16}>
<HStack width={240}>
<Text>A</Text>
<Spacer minLength={20} />
<Text>B</Text>
</HStack>
<HStack width={240}>
<Text>A</Text>
<Spacer width={20} />
<Text>B</Text>
</HStack>
</VStack>
);
}
动画
widthheightminLength省略时的行为
下表只列经实现核对的省略行为;属性旁的示例是可复制写法,不是默认值。需要固定效果时显式传值,尺寸、主题颜色等随上下文变化的属性不要当作固定常量。
| 属性 | 省略时的行为 |
|---|---|
minLength | 0 |