Qml学习——布局_qml gridlayout 动态布局

最近在学习Qml，但对Qml的各种用法都不太熟悉，总是会搞忘，所以写几篇文章对学习过程中的遇到的东西做一个记录。
学习参考视频：https://www.bilibili.com/video/BV1Ay4y1W7xd?p=1&vd_source=0b527ff208c63f0b1150450fd7023fd8
其他文章：
Qml学习——动态加载控件
Qml学习——控件状态
Qml学习——使用JavaScript
Qml学习——动画
Qml学习——鼠标事件处理MouseArea
Qml学习——布局
Qml学习——基本控件

---

1 锚点布局

Qt Quick控件的基类Item提供了anchor(锚点)，可以用来布局控件的位置。
下面是一个简单的锚点布局示例，将矩形块布局到窗口的右下角。

Window {
    visible: true; width: 200; height: 200
    Rectangle {
        width: 50; height: 50; color: "blue";

        anchors.right: parent.right      //矩形的右锚定线对齐窗口的右锚定线
        anchors.bottom: parent.bottom	 //矩形的下锚定线对齐窗口的下锚定线
    }
}
1
2
3
4
5
6
7
8
9

在这个示例中，矩形的右锚定线和下锚定线分别被设置为了窗口的右锚定线和下锚定线，所以最终矩形出现在窗口的右下角。

anchors提供了以下属性。

1.1 锚定线和间距

以anchors.top为例。
若没有设置anchors.topMargin或anchors.topMargin为0。

若设置了anchors.topMargin不为0。

1.2 示例

控件之间相对位置

Window {
    visible: true; width: 200; height: 200
    Rectangle {
        id: r1
        width: 50; height: 50; color: "red";
        /* 以r2为基准布局 */
        anchors.right: r2.left
        anchors.top: r2.top
    }

    Rectangle {
        id: r2
        width: 50; height: 50; color: "blue";
		/* 布局到窗口中央 */
        anchors.centerIn: parent
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

设置间隙

Window {
    visible: true; width: 200; height: 200
    Rectangle {
        width: 50; height: 50; color: "blue";

        /* 设置矩形位置在parent的右下角，间隙为10 */
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

填满窗口

Window {
    visible: true; width: 200; height: 200
    Rectangle {
        color: "blue";
        anchors.fill: parent
    }
}
1
2
3
4
5
6
7

混合使用

Window {
    visible: true; width: 200; height: 200
    Rectangle {
        id: r1
        color: "blue";
        anchors.fill: parent
        anchors.topMargin: 50
        anchors.rightMargin: 50
    }
    Rectangle {
        id: r2
        color: "red";
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: r1.top
    }
    Rectangle {
        id: r3
        color: "green";
        anchors.top: r1.top
        anchors.left: r1.right
        anchors.right: parent.right
        anchors.bottom: parent.verticalCenter
    }
    Rectangle {
        id: r4
        color: "orange";
        anchors.top: parent.verticalCenter
        anchors.left: r1.right
        anchors.right: parent.right
        anchors.bottom: parent.bottom
    }
}
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

2 Qt Quick Layouts布局

Qt Quick Layouts提供了以下几种布局方式。

2.1 GridLayout(网格布局)

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12

Window {
    visible: true; width: 200; height: 120
    GridLayout {
        id: grid
        columns: 2

        Text { text: "1";}
        Text { text: "22";}
        Text { text: "333";}
        Text { text: "4444";}
        Text { text: "55555";}
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.2 ColumnLayout(列布局)

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12

Window {
    visible: true; width: 200; height: 120

    ColumnLayout {
        Text { text: "1";}
        Text { text: "22";}
        Text { text: "333";}
        Text { text: "4444";}
        Text { text: "55555";}
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.3 RowLayout(行布局)

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12

Window {
    visible: true; width: 200; height: 120

    RowLayout {
        Text { text: "1";}
        Text { text: "22";}
        Text { text: "333";}
        Text { text: "4444";}
        Text { text: "55555";}
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.3 StackLayout(栈布局)

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12

Window {
    visible: true; width: 200; height: 120

    StackLayout {
        id: stack
        Text { text: "1";}
        Text { text: "22";}
        Text { text: "333";}
        Text { text: "4444";}
        Text { text: "55555";}
    }

    RowLayout {
        anchors.bottom: parent.bottom
        
        Button {
            text: '上一个'
            onClicked: stack.currentIndex > 0 ? stack.currentIndex-- : 0
        }
        
        Button {
            text: '下一个'
            onClicked: stack.currentIndex < 4 ? stack.currentIndex++ : 0
        }
    }
}
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