QML布局管理之Layouts

Layouts

QtQuick布局管理器是一组用于在用户界面中排列项目的类型。与前面讲到的定位器不同，布局管理器不仅进行布局，而且会改变项目的大小，所以更适用于需要改变用户界面大小的应用。因为布局管理器也是继承自Item，所以它们可以嵌套。Qt Quick布局管理器与传统QtWidgets应用中的布局管理器很相似。QtQuick布局管理器主要包括RowLayout、ColumnLayout和GridLayout。对于可以在Qt帮助中通过Qt Quick Layouts Overview关键字查看。

主要特点

Qt Quick Layouts拥有下面几个主要特色：

• 项目的对其方式可以使用Layout.alignment属性指定，主要有Qt::AlignLeft、
  Qt::AlignHCenter、Qt::AlignRight、Qt::AlignTop、Qt::Align VCenter、Qt::
  AlignBottom,Qt:: AlignBaseline。
• 可变大小的项目可以使用Layout.fillWidth 和Layout.fillHeight属性指定，当
  将其值设置为true时会根据约束条件变宽或变高。
• 大小约束可以通过Layout.minimumWidth、Layout.preferredWidth和Layout.maximumWidth属性(另外还有相对height的类似属性）指定。
• 间距可以通过spacing、rowSpacing和columnSpacing属性指定。除了上面所述的这些特色，在GridLayout中还添加了如下特色：
• 网格中的坐标可以通过Layout.row和Layout.column指定。
• 自动网格坐标同时使用了flow、rows、column属性。
• 行或列的跨度可以通过Layout.rowSpan和Layout.columnSpan属性来指定。

大小约束

要想使一个项目可以通过布局管理器调整大小，需要指定其最小宽高(minimumWidth和minimumHeight)、最佳宽高（preferredWidth和preferredHeight)和最大宽高（maximumWidth和maximumHeight),并将对应的Layout.fillWidth 或Layout.fillHeight设置为true。

import QtQuick.Controls 2.15
import QtQuick.Layouts 1.1

    Item {
        RowLayout {
            id: layout
            anchors.fill: parent
            spacing: 6
            Rectangle {
                color: 'green'
                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: "red"
                Layout.fillWidth: true
                Layout.minimumWidth: 100
                Layout.preferredWidth: 200
                Layout.preferredHeight: 100
                Text {
                    anchors.centerIn: parent
                    text: parent.width + 'x' + parent.height
                }
            }
        }
    }
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
29
30
31
32
33
34

有效的最佳(preferred)属性的值，可能来自几个候选属性。要决定有效的最佳属
性，会对这些候选属性以下面的顺序进行查询，使用第一个有效的值。

• Layout.preferredWidth 或 Layout.preferredHeight;
• implicit Width 或implicitHeight;
• width或height。
  一个项目可以仅指定Layout.preferredWidth 而不指定Layout.preferredHeight,
  此时，有效的最佳高度会从implicitHeight或最终的height中选取。

LayoutMirroring

LayoutMirroring附加属性用来在水平方向镜像项目锚布局、定位器（Row和Grid等）和视图（GridView和水平ListView等)。镜像只是视觉上的变化，例如左侧布局变成右侧布局。当在项目中将LayoutMirroring的enabled 属性设置为true时启用镜像，默认镜像只影响该项目本身。如果将childrenInherit属性设置为true，那么该项目
的所有子项目都会启用镜像。
下面的例子中，Row被锚定在了其父项目的左侧，然而，因为启用了镜像，锚在水
平方向进行了翻转，现在Row被锚定在了右侧。又因为Row中的子项目默认从左向
右排列，它们现在会从右向左排列。

    Rectangle {
        LayoutMirroring.enabled: true
        LayoutMirroring.childrenInherit: true
        width: 300; height: 50
        color: "yellow"
        border.width: 1
        Row {
            anchors { left: parent.left; margins: 5}
            y: 5; spacing: 5
            Repeater {
                model: 5
                Rectangle {
                    color: "red"
                    opacity: (5 - index)/5
                    width: 40; height: 40
                    Text {
                        text: index + 1
                        anchors.centerIn: parent
                    }
                }
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

布局镜像在需要同时支持从左到右和从右到左布局的应用中是很有用的。如果想了解更多关于从右到左用户界面的内容，可以在帮助中索引Right-to-left User Interfaces关键字。