QML–元素布局


文章目录

  • 一、Positioner（定位器）
    • 1.1、行列、网格定位
    • 1.2、流定位（Flow）
    • 1.3、重复器（Repeater）
  • 四、Anchor（锚）

QML编程中可以使用x、y属性手动布局元素，但这些属性是与元素父对象左上角位置紧密相关的，不容易确定各子元素间的相对位置。为此，QML提供了定位器和锚点来简化元素的布局。
一、Positioner（定位器）

1.1、行列、网格定位

（1）RedRectangle.qml、GreenRectangle.qml、YellowRectangle.qml

1
2
3
4
5
6
7
8
9
//RedRectangle.qml

import QtQuick 2.0

Rectangle {
    width: 64; height: 32
    color: "red"
    border.color: Qt.lighter(color)
}
1
2
3
4
5
6
7
8
9
//GreenRectangle

import QtQuick 2.0

Rectangle {
    width: 64; height: 32
    color: "green"
    border.color: Qt.lighter(color)
}
1
2
3
4
5
6
7
8
9
//YellowRectangle

import QtQuick 2.0

Rectangle {
    width: 64; height: 32
    color: "yellow"
    border.color: Qt.lighter(color)
}

（2）MainForm.qml

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
35
36
37
38
import QtQuick 2.7

Rectangle {
    width: 360; height: 360

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
    Row {  //(a)
        x: 25; y: 25
        spacing: 10
        layoutDirection: Qt.RightToLeft
        //以下添加被Row定位的元素成员
        RedRectangle {}
        GreenRectangle {}
        YellowRectangle {}
    }
    Column {  //(b)
        x: 25; y: 120
        spacing: 2
        //以下添加被Column定位的元素成员
        RedRectangle {}
        GreenRectangle {}
        YellowRectangle {}
    }
    Grid {  //(c)
        x: 140; y: 120
        columns: 3
        spacing: 5
        //以下是被Grid定位的元素成员
        YellowRectangle {}
        YellowRectangle {}
        YellowRectangle {}
        YellowRectangle {}
        YellowRectangle {}
    }
}

（a）Row {...}：Row将其定位的元素成员都放置在一行的位置，所有元素之间的间距相等（由spacing属性设置），顶端保持对齐。layoutDirection属性设置元素的排列顺序，可取值为Qt.LeftToRight（默认，从左向右）、Qt.RightToLeft（从右向左）。
（b）Column {...}：Column将元素成员按照加入的顺序从上到下在同一列排列出来，同样由spacing属性指定元素间距，所有元素靠左对齐。
（c）Grid {...}：Grid将其元素成员排列成一个网格，默认从左向右排列，每行4个元素。可通过设置rows和columns属性来自定义行和列的数值，如果 二者有一个不显示设置，则另一个会根据元素成员的总数计算出来。例如，本例中的columns设置为3，一共放入5个蓝色矩形，行数就会自动计算为2.

（3）运行结果
在这里插入图片描述

1.2、流定位（Flow）

（1）MainForm.qml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import QtQuick 2.7

Rectangle {
    width: 360; height: 360

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
    Flow {  //（a）
        anchors.fill: parent
        anchors.margins: 15
        spacing: 5
        RedRectangle {}
        GreenRectangle {}
        YellowRectangle {}
    }
}

（a）Flow {...}：顾名思义，Flow会将其元素成员以流的形式显示出来，它既可以从左向右横向布局，也可以从上向下纵向布局，或反之。但与Row、Column等定位器不同的是，添加到Flow里的元素，会根据显示区（窗体）尺寸变化动态地调整其布局。以本程序为例，初始时元素是横向排列显示，当窗体被拉窄时，元素是纵向排列显示。

（2）、运行效果
在这里插入图片描述

1.3、重复器（Repeater）

重复器用户创建大量相似的元素成员，常与其他定位器结合起来使用。
示例：Repeater结合Grid来排列一组矩形元素：

（1）MainForm.qml

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
import QtQuick 2.7

Rectangle {
    width: 200; height: 200

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
    Grid {
        x: 25; y: 25
        spacing: 4
        Repeater {  //(a)
            model: 16
            Rectangle {
                width: 48; height: 48
                color: "aqua"
                Text {
                    anchors.centerIn: parent
                    color: "black"
                    font.pointSize: 20
                    text: index  //(b)
                }
            }
        }
    }
}

（a）Repeater {...}：重复器，作为Grid的数据提供者，它可以创建任何QML基本的可是原始。因Repeater会按照其model属性定义的个数循环生成子元素，故上面代码重复生成16个Rectangle。
（b）text: index：Repeater会为每个子元素注入一个index属性，作为当前的循环索引（本例中是0~15）。因可以在子元素中直接使用这个属性，故可以用它给Text的text属性赋值。

（2）运行效果
在这里插入图片描述

四、Anchor（锚）

除前面介绍的Row、Column和Grid等外，QML还提供了Anchor（锚）来进行元素布局的方法。每个元素都可以被认为有一组无线的“锚线”：left、horizontalCenter、right、top、verticalCenter和bottom，如下图示：
在这里插入图片描述
这些锚线分别对应元素中的anchors.left、anchors.horizontalCenter等属性，所有的可视元素都可以使用锚来布局。锚系统还允许为一个元素的锚指定边距（margin）和偏移（offset）。边距指定了元素锚到外边界的空间量，而偏移允许使用中心锚线来定位。一个元素可以通过leftMargin、rightMargin、topMargin和bottomMargin来独立地指定锚边界，如下图示。也可以使用anchors.margins来为所有的4个锚指定相同的边距。
在这里插入图片描述

锚偏移使用horizontalCenterOffset、verticalCenterOffset和baselineOffset来指定。编程中经常使用anchors.fill将一个元素充满另一个元素，这等价于使用4个直接的锚。但要注意，智能在父子或兄弟元素之间使用锚，而且基于锚的布局不能与绝对的位置定义（如直接设置x和y属性值）混合使用，否则会出现不确定的结果。

（1）MainForm.qml

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
import QtQuick 2.7

Rectangle {
    width: 360; height: 360
    property alias mouseArea: mouseArea

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }

    YellowRectangle {
        id: yellowRect
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 25
        anchors.topMargin: 25
    }

    GreenRectangle {
        id: greenRect
        anchors.left: yellowRect.right
        anchors.top: yellowRect.top
        anchors.leftMargin: 40
    }

    RedRectangle {
        id: redRect
        anchors.left: greenRect.right
        anchors.top: greenRect.top
        anchors.leftMargin: 40
    }
}

（2）运行效果
在这里插入图片描述