QML 布局：列布局（ColumnLayout）和行布局（RowLayout ）

列布局和行布局相同，都具备以下属性。

导入模块

import QtQuick.Layouts 1.1

继承
item类


属性
layoutDirection
设置布局的布局方向。

spacing
设置每个单元格之间的间距。

布局中的项支持以下附加属性
Layout.minimumWidth
设置布局中项的最小宽度。将该值设置为-1将把宽度重置为隐式的最小宽度。

Layout.minimumHeight
设置布局中项目的最小高度。

Layout.preferredWidth
设置布局中项目的首选宽度。如果首选宽度是-1，它将被忽略，而布局将使用implicitWidth代替。缺省值是-1。

Layout.preferredHeight
设置布局中项目的首选高度。

Layout.maximumWidth
设置布局中项的最大宽度。

Layout.maximumHeight
设置布局中项的最大高度。

Layout.fillWidth
如果此属性为true，则该项将在遵守给定约束的情况下尽可能宽（可拉伸）。如果该属性为false，则将该项的首选宽度设置为固定宽度。默认为false，除了布局本身，它默认为true。

Layout.fillHeight

Layout.alignment
此属性允许您指定项在其占用的单元格中的对齐方式。格式：Qt.AlignCenter

Layout.margins
设置项的外边距。需导入 QtQuick.Layouts 1.2

Layout.leftMargin
设置项的左外边距。需导入 QtQuick.Layouts 1.2

Layout.rightMargin
Layout.topMargin
Layout.bottomMargin

举例

ColumnLayout{
    spacing: 2

    Rectangle {
        Layout.alignment: Qt.AlignCenter
        color: "red"
        Layout.preferredWidth: 40
        Layout.preferredHeight: 40
    }

    Rectangle {
        Layout.alignment: Qt.AlignRight
        color: "green"
        Layout.preferredWidth: 40
        Layout.preferredHeight: 70
    }

    Rectangle {
        Layout.alignment: Qt.AlignBottom
        Layout.fillHeight: true
        color: "blue"
        Layout.preferredWidth: 70
        Layout.preferredHeight: 40
    }
}

以上布局没有设置anchors.fill: parent，则三个矩形均为固定大小。如果设置了anchors.fill: parent，则红色矩形和绿色矩形固定大小，蓝色矩形高度可拉伸。

RowLayout {
    id: layout
    anchors.fill: parent   //填充到父项
    spacing: 6
    Rectangle {
        color: 'teal'
        Layout.fillWidth: true   //可拉伸
        Layout.minimumWidth: 50
        Layout.preferredWidth: 100
        Layout.maximumWidth: 300
        Layout.minimumHeight: 150
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
    Rectangle {
        color: 'plum'
        Layout.fillWidth: true
        Layout.minimumWidth: 100
        Layout.preferredWidth: 200
        Layout.preferredHeight: 100
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
}

以上两个矩形宽度均可拉伸，绿色最大拉伸置300。


官方文档：https://doc.qt.io/qt-6/qml-qtquick-layouts-columnlayout.html
https://doc.qt.io/qt-6/qml-qtquick-layouts-rowlayout.html