组件功能
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" }]}
效果示例如下:

