EFlex 弹性布局

import EUI 1.0

示例与代码

方向与间距

QML 代码QML

效果

运行代码，体验组件交互

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

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

主轴分布

QML 代码QML

效果

运行代码，体验组件交互

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

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

自动换行

QML 代码QML

import EUI 1.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

EFlex {
    width: 420
    wrap: true
    height: 200
    gap: [12, 16]
    align: "start"

ERectangle {
        radius: 6
        width: 92
        height: 32
        opacity: 1
        color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)
    }
    ERectangle {
        radius: 6
        width: 92
        height: 48
        opacity: 0.75
        color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)
    }
    ERectangle {
        radius: 6
        width: 92
        height: 64
        opacity: 0.5
        color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)
    }
    ERectangle {
        radius: 6
        width: 92
        height: 32
        opacity: 1
        color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)
    }
    ERectangle {
        radius: 6
        width: 92
        height: 48
        opacity: 0.75
        color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)
    }
    ERectangle {
        radius: 6
        width: 92
        height: 64
        opacity: 0.5
        color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)
    }
}

效果

运行代码，体验组件交互

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

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

垂直与反向

QML 代码QML

效果

运行代码，体验组件交互

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

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

弹性增长与约束

QML 代码QML

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

alignstring

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

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

默认值"stretch"

alignContentstring

多行内容在交叉轴上的分布方式。

"start" / "center"
"end" / "stretch"
"space-between" / "space-around"
"space-evenly"

默认值"start"

contentalias

默认内容槽；EFloatButton 中为按钮文字的别名。

默认值body.data

contentChildrenalias只读

当前布局中的可视子项目。

默认值body.children

gapvar

子项之间的横向和纵向间距。

数值或 [水平间距, 垂直间距]

默认值12

horizontalbool只读

是否使用水平主轴。

默认值自动计算

horizontalGapreal只读

校验后的水平间距。

默认值自动计算

insetreal只读

校验后的容器内边距。

默认值自动计算

justifystring

子项在主轴上的分布方式。

"start" / "end"
"center" / "space-between"
"space-around" / "space-evenly"

默认值"start"

layoutvar只读

计算后的项目坐标和尺寸。

默认值自动计算

naturalCrossreal只读

内容在交叉轴上的自然尺寸。

默认值自动计算

naturalMainreal只读

内容在主轴上的自然尺寸。

默认值自动计算

orientationstring

弹性布局的方向。

horizontal
vertical

默认值"horizontal"

paddingreal

容器四周内边距，单位为像素。

默认值0

reversebool

是否反转主轴布局方向。

默认值false

verticalGapreal只读

校验后的垂直间距。

默认值自动计算

wrapbool

空间不足时是否换行。

默认值false

EFlex 弹性布局 ​

示例与代码 ​

方向与间距 ​

主轴分布 ​

自动换行 ​

垂直与反向 ​

弹性增长与约束 ​

属性 ​

EFlex 弹性布局

示例与代码

方向与间距

主轴分布

自动换行

垂直与反向

弹性增长与约束

属性