一、基础用法
通过在布局容器中插入 Spacer,它会自动占用父容器的剩余空间,从而控制元素间距或对齐方式。
Template 示例:
<Row> <Text value="左侧内容" /> <Spacer /> <Button label="右侧按钮" /></Row>
效果展示如下:
二、属性说明
| 属性名 | 类型 | 描述 | 默认值 |
| minSize | number | string | 最小尺寸 | – |
三、工作原理
Spacer 组件会自动填充其父容器中的剩余空间:
·在 Row 容器中,会填充水平方向的空白。
·在 Col 容器中,会填充垂直方向的空白。
四、使用场景
1. 将按钮推到右侧。
Template 示例:
<Row> <Title value="标题" /> <Spacer /> <Button label="操作" /></Row>
效果示例如下:
2. 垂直居中对齐。
Template 示例:
<Col height="400px"> <Spacer /> <Text value="居中内容" /> <Spacer /></Col>
效果示例如下: