组件/EUI 扩展

EFlexItem 弹性布局项

import EUI 1.0

示例与代码

按权重增长

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFlex { gap: 12 width: 420 height: 140 EFlexItem { grow: 1 basis: 80 ERectangle { radius: 6 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "A" color: "white" anchors.centerIn: parent } } } EFlexItem { grow: 2 basis: 80 ERectangle { radius: 6 opacity: 0.65 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "B" color: "white" anchors.centerIn: parent } } } }

效果

运行代码，体验组件交互

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

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

按权重收缩

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFlex { gap: 12 width: 420 height: 140 EFlexItem { shrink: 1 basis: 300 ERectangle { radius: 6 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "A" color: "white" anchors.centerIn: parent } } } EFlexItem { shrink: 2 basis: 300 ERectangle { radius: 6 opacity: 0.65 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "B" color: "white" anchors.centerIn: parent } } } }

效果

运行代码，体验组件交互

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

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

最小和最大尺寸

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFlex { gap: 12 width: 420 height: 140 EFlexItem { grow: 1 basis: 80 minSize: 60 maxSize: 140 ERectangle { radius: 6 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "A" color: "white" anchors.centerIn: parent } } } EFlexItem { grow: 1 basis: 80 minSize: 60 ERectangle { radius: 6 opacity: 0.65 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "B" color: "white" anchors.centerIn: parent } } } }

效果

运行代码，体验组件交互

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

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

排序与反向

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFlex { gap: 12 width: 420 height: 140 EFlexItem { grow: 1 order: 2 basis: 80 ERectangle { radius: 6 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "A" color: "white" anchors.centerIn: parent } } } EFlexItem { grow: 1 order: 1 basis: 80 ERectangle { radius: 6 opacity: 0.65 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "B" color: "white" anchors.centerIn: parent } } } }

效果

运行代码，体验组件交互

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

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

单项交叉轴对齐

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFlex { gap: 12 width: 420 height: 140 EFlexItem { grow: 1 basis: 80 implicitHeight: 40 alignSelf: "center" ERectangle { radius: 6 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "A" color: "white" anchors.centerIn: parent } } } EFlexItem { grow: 1 basis: 80 alignSelf: "end" implicitHeight: 60 ERectangle { radius: 6 opacity: 0.65 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "B" color: "white" anchors.centerIn: parent } } } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

alignSelfstring

子项单独的交叉轴对齐方式。

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

默认值"auto"

basisreal

基础主轴尺寸；负数表示使用内容隐式尺寸。

默认值-1

contentalias

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

默认值body.data

flexItembool只读

标识该对象提供弹性布局参数。

默认值自动计算

growreal

剩余主轴空间的增长权重；0 表示不增长。

默认值0

maxSizereal

允许的最大主轴尺寸；Infinity 表示不限。

默认值Infinity

minSizereal

允许的最小主轴尺寸。

默认值0

orderint

布局顺序；数值相同时保持声明顺序。

默认值0

shrinkreal

空间不足时的收缩权重，按基础尺寸加权；0 表示不收缩。

默认值1