组件/基础组件

ESpace 间距

import EUI 1.0

示例与代码

双向间距、换行与分隔内容

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESpace { wrap: true spacer: "·" size: [20, 14] width: parent.width EButton { text: "Design" } EButton { text: "Components" } EButton { text: "Interaction" } EButton { text: "Accessibility" } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

间距

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESpace { size: 16 EButton { text: "One" } EButton { text: "Two" } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

alignmentstring

子项在交叉轴上的对齐方式。

"start" / "center"
"end" / "stretch"

默认值"center"

contentalias

内容插槽；直接在组件内部声明 QML 子对象。

默认值别名：body.data

directionvar

子项的排列方向。

Qt.Horizontal / Qt.Vertical
"horizontal" / "vertical"

默认值Qt.Horizontal

enabledbool

是否允许交互；false 时控件禁用。

默认值true

fillbool

让间距容器中的内容填充可用空间。

默认值false

fillRatioreal

填充模式中子项占可用宽度的百分比。

默认值100

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

layoutHeightreal

显式布局高度；0 时根据内容计算。

默认值0

sizevar

子项之间的间距。

非负数值
"small" / "default" / "large"
[水平间距, 垂直间距]

默认值12

spacervar

内容项之间的分隔文字或 Component。

文字或 Component

默认值""

spacingreal

相邻内容、列、行或文字间距，单位为像素。

默认值动态绑定

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

wrapbool

空间不足时允许内容换行。

默认值true

flowint只读

间距容器是否使用自动换行布局。

默认值由运行时计算

horizontalbool只读

实际布局是否采用水平或垂直方向。

默认值由运行时计算

horizontalGapreal只读

布局实际使用的水平或垂直间距。

默认值由运行时计算

positionsvar只读

根据子项尺寸和布局规则计算的位置列表。

默认值由运行时计算

verticalGapreal只读

布局实际使用的水平或垂直间距。

默认值由运行时计算