QML布局概述(Qt Quick Layouts Overview)


Qt Quick布局(Qt Quick Layouts)概述

Qt Quick Layouts是用于在用户界面中排列Items的, 它们本身也是Items。 由于Qt Quick Layouts也可以调整其本身的大小，因此非常适合可调整大小的用户界面.

首先

使用import语句将QML类型导入到您的应用程序中

1
import QtQuick.Layouts 1.11

关键点

关键点:

  • 可以使用Layout.alignment属性指定项目的对齐方式
  • 可调整大小的Item可以使用Layout.fillWidth和Layout.fillHeight属性指定
  • 可以使用Layout.minimumWidth，Layout.preferredWidth和Layout.maximumWidth属性指定尺寸限制（“width”可以替换为“height”，就指定的是height的限制）
  • 可以使用space，rowSpacing或columnSpacing来指定间距
    除上述功能外，GridLayout还添加了以下功能：
  • 可以使用Layout.row和Layout.column属性确定Grid坐标
  • 自动Grid坐标和flow, rows, columns 参数一起使用
  • 可以使用Layout.rowSpan(Item所占行数)和Layout.columnSpan(Item所占列数)属性指定跨行或跨列的Item的跨度。

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    RowLayout {
        anchors.fill: parent
        spacing: 6                  //布局中的所有Item之间的间距均为6像素
        Rectangle {
            color: "black"
            Layout.preferredWidth: 100  //建议宽度
            //Layout.preferredHeight: 150   //建议高度
            Layout.fillHeight: true         //占据为其分配的所有高度
        }
        Rectangle {
            color: "plum"
            Layout.fillWidth: true      //占据为其分配的所有宽度
            Layout.fillHeight: true     //占据为其分配的所有高度
        }
    }
}

注意: 布局负责分配其子Items的几何形状, 因此你不应指定子Items的width, height, x, y或其他任何可能影响布局的因素(如anchors等). 否则会产生冲突, 导致布局的结果具有不确定性. 如果子Item也是布局, 也同样要遵循这个原理. 因此，只有没有父布局的布局才能具有anchors.fill：parent.

大小控制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
RowLayout {
    id: layout
    anchors.fill: parent
    spacing: 6
    Rectangle {
        color: 'azure'
        Layout.fillWidth: true
        Layout.minimumWidth: 50         //最小宽度50
        Layout.preferredWidth: 100      //建议宽度100
        Layout.maximumWidth: 300        //最大宽度300
        Layout.minimumHeight: 150       //最小高度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
        }
    }
}

Loyout会组合每个Item的约束, 为布局元素提供最终的隐式约束. 如上述中子Item实际占用高宽如下表:

最小值 建议值 最大值
隐式约束 (width) 156 306 ∞
隐式约束 (height) 150 150 150

指定首选尺寸

当存在多个约束时, 它将按下表中的顺序查询这些候选属性，并使用具有有效宽度或高度的第一个候选:

候选属性 说明
Layout.preferredWidth 或 Layout.preferredHeight 如果默认的隐式大小未给出最佳设置，则应由应用程序修改这些属性。
implicitWidth 或 implicitHeight 这些属性应该由每个Item提供，以提供有意义的理想大小，例如，显示Text类型的所有内容所需的大小。 隐式宽度或高度0会被解析为无效。
width 和 height 如果以上属性均无效，则布局将会采纳width和height属性。

一个项目可以指定Layout.preferredWidth，而不必指定Layout.preferredHeight。 在这种情况下，有效的首选高度将由implicitHeight（或最终的height）确定。

注意: width或height属性仅作为最终的备用。 如果要覆盖首选大小，建议使用Layout.preferredWidth或Layout.preferredHeight。 依靠width或height属性来指定首选大小可能会带来一些意外的行为。 例如，更改width或height属性不会触发布局重新排列。 此外，当强制布局进行完全重建时，它可能会使用实际的宽度和高度，而不是QML文件中指定的宽度和高度。

连接windows和布局

你只可以通过锚定来设置Layout根据windows窗口大小来变化:

1
2
3
RowLayout {
    id: layout
    anchors.fill: parent

Layout的大小限制可用来限制其父元素window的大小。 你可以从Layout中获取大小约束，并在Window元素的minimumWidth，minimumHeight，maximumWidth和maximumHeight上设置这些约束。 以下代码确保了window的大小不能超出Layout的限制：

1
2
3
4
minimumWidth: layout.Layout.minimumWidth
minimumHeight: layout.Layout.minimumHeight
maximumWidth: 1000
maximumHeight: layout.Layout.maximumHeight

注意：由于在这个场景下layout.Layout.maximumWidth是无限的，因此我们不能将其绑定到Window的maximumWidth属性。它需要绑定一个整数, 因此，我们将固定的最大宽度设置为1000。

最后，你通常希望窗口的初始大小为布局的隐式大小：

1
2
width: layout.implicitWidth
height: layout.implicitHeight

以上文章参考自Qt官方文档: https://doc.qt.io/qt-5/qtquicklayouts-overview.html
依个人理解, 简要翻译, 如有错漏, 欢迎指正.