Spacer 间距

最近更新时间:2025-12-30 17:25:52

我的收藏

组件功能

Spacer 是弹性空白组件,用于在布局中创建可伸缩的空白区域,帮助子组件在容器中灵活对齐或拉开间距。

基础用法

通过在布局容器中插入 Spacer,它会自动占用父容器的剩余空间,从而控制元素间距或对齐方式。
Template 示例:
<Row>
<Text value="左侧内容" />
<Spacer />
<Button label="右侧按钮" />
</Row>
效果展示如下:




属性说明

属性名
类型
描述
默认值
minSize
number | string
最小尺寸
-

工作原理

Spacer 组件会自动填充其父容器中的剩余空间:
在 Row 容器中,会填充水平方向的空白。
在 Col 容器中,会填充垂直方向的空白。

使用场景

1. 将按钮推到右侧。
JSON 格式:
// 将按钮推到右侧
{
"type": "Row",
"children": [
{ "type": "Title", "value": "标题" },
{ "type": "Spacer" },
{ "type": "Button", "label": "操作" }
]
}
效果示例如下:



2. 垂直居中对齐。
JSON格式:
// 垂直居中对齐
{
"type": "Col",
"height": "400px",
"children": [
{ "type": "Spacer" },
{ "type": "Text", "value": "居中内容" },
{ "type": "Spacer" }
]
}
效果示例如下: