最近在学习Qml，但对Qml的各种用法都不太熟悉，总是会搞忘，所以写几篇文章对学习过程中的遇到的东西做一个记录。
学习参考视频：https://www.bilibili.com/video/BV1Ay4y1W7xd?p=1&vd_source=0b527ff208c63f0b1150450fd7023fd8

目录

• 1 锚点布局
• • 1.1 锚定线和间距
  • 1.2 示例
  • • 控件之间相对位置
    • 设置间隙
    • 填满窗口
    • 混合使用
• 2 Qt Quick Layouts布局
• • 2.1 GridLayout(网格布局)
  • 2.2 ColumnLayout(列布局)
  • 2.3 RowLayout(行布局)
  • 2.3 StackLayout(栈布局)

1 锚点布局

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

Window {visible: true; width: 200; height: 200Rectangle {width: 50; height: 50; color: "blue";anchors.right: parent.right      //矩形的右锚定线对齐窗口的右锚定线anchors.bottom: parent.bottom	 //矩形的下锚定线对齐窗口的下锚定线}
}

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

anchors提供了以下属性。

1.1 锚定线和间距

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

若设置了anchors.topMargin不为0。

1.2 示例

控件之间相对位置

Window {visible: true; width: 200; height: 200Rectangle {id: r1width: 50; height: 50; color: "red";/* 以r2为基准布局 */anchors.right: r2.leftanchors.top: r2.top}Rectangle {id: r2width: 50; height: 50; color: "blue";/* 布局到窗口中央 */anchors.centerIn: parent}
}

设置间隙

Window {visible: true; width: 200; height: 200Rectangle {width: 50; height: 50; color: "blue";/* 设置矩形位置在parent的右下角，间隙为10 */anchors.right: parent.rightanchors.rightMargin: 10anchors.bottom: parent.bottomanchors.bottomMargin: 10}
}

填满窗口

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

混合使用

Window {visible: true; width: 200; height: 200Rectangle {id: r1color: "blue";anchors.fill: parentanchors.topMargin: 50anchors.rightMargin: 50}Rectangle {id: r2color: "red";anchors.top: parent.topanchors.left: parent.leftanchors.right: parent.rightanchors.bottom: r1.top}Rectangle {id: r3color: "green";anchors.top: r1.topanchors.left: r1.rightanchors.right: parent.rightanchors.bottom: parent.verticalCenter}Rectangle {id: r4color: "orange";anchors.top: parent.verticalCenteranchors.left: r1.rightanchors.right: parent.rightanchors.bottom: parent.bottom}
}

2 Qt Quick Layouts布局

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

2.1 GridLayout(网格布局)

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12Window {visible: true; width: 200; height: 120GridLayout {id: gridcolumns: 2Text { 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.12Window {visible: true; width: 200; height: 120ColumnLayout {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.12Window {visible: true; width: 200; height: 120RowLayout {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.12Window {visible: true; width: 200; height: 120StackLayout {id: stackText { text: "1";}Text { text: "22";}Text { text: "333";}Text { text: "4444";}Text { text: "55555";}}RowLayout {anchors.bottom: parent.bottomButton {text: '上一个'onClicked: stack.currentIndex > 0 ? stack.currentIndex-- : 0}Button {text: '下一个'onClicked: stack.currentIndex < 4 ? stack.currentIndex++ : 0}}
}