ERow 栅格布局

import EUI 1.0

示例与代码

响应栅格与对齐

QML 代码QML

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

ERow {
    gutter: [12, 12]
    width: parent.width
    viewportWidth: width

ECol {
        md: 8
        sm: 12
        xs: 24
        height: 56

ERectangle {
            radius: 8
            color: "#409eff"
            anchors.fill: parent

EText {
                color: "white"
                anchors.centerIn: parent
                text: "xs 24 / sm 12 / md 8"
            }
        }
    }
    ECol {
        md: 8
        sm: 12
        xs: 24
        height: 56

ERectangle {
            radius: 8
            color: "#67c23a"
            anchors.fill: parent

EText {
                color: "white"
                anchors.centerIn: parent
                text: "Responsive column"
            }
        }
    }
    ECol {
        md: 8
        sm: 24
        xs: 24
        height: 56

ERectangle {
            radius: 8
            color: "#909399"
            anchors.fill: parent

EText {
                color: "white"
                anchors.centerIn: parent
                text: "Responsive column"
            }
        }
    }
}

效果

运行代码，体验组件交互

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

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

栅格布局

QML 代码QML

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

ERow {
    gutter: 16
    height: 64
    width: parent.width

ECol {
        span: 8
        height: parent.height

ERectangle {
            radius: 4
            border.width: 1
            anchors.fill: parent
            color: EPaletteManager.BasePalette.transparent
            border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark)

EText {
                font.pixelSize: 14
                anchors.centerIn: parent
                text: "8 / 24"
                color: EPaletteManager.ThemePalette.textRegular(ETheme.dark)
            }
        }
    }
    ECol {
        span: 16
        height: parent.height

EText {
                font.pixelSize: 14
                anchors.centerIn: parent
                text: "16 / 24"
                color: EPaletteManager.ThemePalette.textRegular(ETheme.dark)
            }
        }
    }
}

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

alignstring

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

"top" / "middle"
"bottom"

默认值"top"

enabledbool

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

默认值true

guttervar

栅格间距，支持数字或 [水平间距, 垂直间距]，单位为像素。

默认值0

heightreal

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

默认值implicitHeight

justifystring

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

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

默认值"start"

viewportWidthreal

计算响应式断点所使用的视口宽度，单位为像素。

默认值Window.window ? Window.window.width : width

visiblebool

是否显示组件。

默认值true

widthreal

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

默认值动态绑定

horizontalGutterreal只读

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

默认值由运行时计算

positionsvar只读

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

默认值由运行时计算

verticalGutterreal只读

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

默认值由运行时计算

ERow 栅格布局 ​

示例与代码 ​

响应栅格与对齐 ​

栅格布局 ​

属性 ​

ERow 栅格布局

示例与代码

响应栅格与对齐

栅格布局

属性