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

省略时的行为

下表只列经实现核对的省略行为;属性旁的示例是可复制写法,不是默认值。需要固定效果时显式传值,尺寸、主题颜色等随上下文变化的属性不要当作固定常量。

属性省略时的行为
minLength0