Qml学习——布局

最近在学习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	 //矩形的下锚定线对齐窗口的下锚定线
    }
}

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

anchors提供了以下属性。

属性名	类型	描述
anchors.alignWhenCentered	bool	居中时是否对齐
anchors.baseline	AnchorLine	基准线，作用和anchors.top一样
anchors.baselineOffset	real	基准线偏移量
anchors.bottom	AnchorLine	下锚定线
anchors.bottomMargin	real	下锚定线间距
anchors.centerIn	Item	位于目标控件中心
anchors.fill	Item	填满目标控件
anchors.horizontalCenter	AnchorLine	水平方向的中心锚定线
anchors.horizontalCenterOffset	real	水平方向的中心锚定线偏移量
anchors.left	AnchorLine	左锚定线
anchors.leftMargin	real	左锚定线间距
anchors.margins	real	上下左右四根锚定线的间距
anchors.right	AnchorLine	右锚定线
anchors.rightMargin	real	右锚定线间距
anchors.top	AnchorLine	上锚定线
anchors.topMargin	real	上锚定线间距
anchors.verticalCenter	AnchorLine	垂直方向的中心锚定线
anchors.verticalCenterOffset	real	垂直方向的中心锚定线偏移量

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
    }
}

设置间隙

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
    }
}

填满窗口

Window {
    visible: true; width: 200; height: 200
    Rectangle {
        color: "blue";
        anchors.fill: parent
    }
}

混合使用

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
    }
}

2 Qt Quick Layouts布局

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

名称	描述
GridLayout	提供一种在网格中动态排列项目的方法
ColumnLayout	与GridLayout相同，但只有一列
RowLayout	与GridLayout相同，但只有一行
StackLayout	只会同时显示一个控件的控件堆栈

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";}
    }
}

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";}
    }
}

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";}
    }
}

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
        }
    }
}