锚布局anchors
- 锚点锚线:left, horizontalCenter, right, top, verticalCenter, baseline, bottom
baseline的作用和top一致
- 锚定方式:
anchors.fill:使一个元素填充到另一个元素,即同时指定上下左右四个锚点
anchors.centerIn:将一个元素放到另一个元素中心,即指定了水平中心和垂直中心 - 四个边界的边距
anchors.margins:同时指定四个边界的边距
leftMargin, rightMargin, topMargin和bottomMargin:设置单独一边的边距 - 设置部件的偏移
horizontalCenterOffset:水平中心的偏移
verticalCenterOffset:垂直中心的偏移
baselineOffset:基线的偏移
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
anchors.fill: parent //填充到整个窗口
anchors.margins: 20 //边距,与界面边界到间隙
color: "blue"
radius: 20
Text {
id: text
anchors.centerIn: parent //锚定方式:界面到中心
text: qsTr("Welcome To My World!")
font.pointSize: 30
color: "orange"
anchors.verticalCenterOffset: -50 //垂直中心的偏移负数表示往上偏移
}
Button{
id:button1
anchors.top: text.bottom //button到上边界就是text到底部
anchors.topMargin: 70 //与text到间距
text: "进入"
font.pixelSize: 20
anchors.horizontalCenter: text.horizontalCenter //以text到垂直中心为中心
anchors.horizontalCenterOffset: -150 //向左偏移150
background: Rectangle {
color: "orange"
radius: 15
border.color: "black"
}
}
Button{
id:button2
anchors.top: text.bottom
anchors.topMargin: 70
text: "退出"
font.pixelSize: 20
anchors.left: button1.right
anchors.leftMargin: 250
background: Rectangle {
color: "orange"
radius: 15
border.color: "black"
}
}
}
}
定位器
一种容器,很方便把众多控件组合在一起
无法根据界面尺寸自动改变定位器管理的控件大小
- Row
水平放置管理的控件。layoutDirection属性设置排列的方向;spacing指定管理的组件之间的间隔
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("layout")
color: "gray"
Row{
anchors.centerIn: parent
spacing: 10
Rectangle{
width: 100
height: 100
color: "blue"
}
Rectangle{
width: 100
height: 100
color: "orange"
}
Rectangle{
width: 100
height: 100
color: "green"
}
}
}
- Column
竖直放置管理的控件,属性和使用方法和Row一样
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("layout")
color: "gray"
Column{
anchors.centerIn: parent
spacing: 10
Rectangle{
width: 100
height: 100
color: "blue"
}
Rectangle{
width: 100
height: 100
color: "orange"
}
Rectangle{
width: 100
height: 100
color: "green"
}
}
}
- Grid
将所有子项目放到一个包括足够多单元格的网格中,会从上到下,从左到右的把其管理的元素放到单元格中- 属性
rows和Columns:属性设置表格的行数和列数,如果不设置的话默认是只有四列,行数则会根据实际的元素数量自动的进行计算。
rowSpacing 和 columnSpacing:指定行、列间距
flow:描述表格的流模式,默认模式为Grid.LeftToRight,表示按行放置,一行满了再放下一行。
Grid.TopToBottom表示按列放置
horizontalItemAlignment 和 verticalItemAlignment:指定单元格对其方式
- 属性
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("layout")
color: "gray"
Grid{
anchors.centerIn: parent
rows: 2
rowSpacing: 10
columns: 2
columnSpacing: 10
Rectangle{
width: 100
height: 100
color: "blue"
}
Rectangle{
width: 100
height: 100
color: "orange"
}
Rectangle{
width: 100
height: 100
color: "green"
}
Rectangle{
width: 100
height: 100
color: "purple"
}
}
}
- Flow
与Grid类似,不同之处是:没有明确的行、列数,Flow的子项目会在超出边界后会自动换行,每行的控件数量不一定是相同的
可以添加一个width属性来改变大小
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("layout")
color: "gray"
Flow{
anchors.centerIn: parent
spacing: 10
width: 400
Rectangle{
width: 100
height: 100
color: "blue"
}
Rectangle{
width: 100
height: 100
color: "orange"
}
Rectangle{
width: 100
height: 100
color: "green"
}
Rectangle{
width: 100
height: 100
color: "purple"
}
}
}
布局管理器
Qt5.1开始
需要导入模块
import QtQuick.Layouts 1.3
- RowLayout
在水平方向上布局,属性如下:
Layout.minimumWidth:设置最小宽度
Layout.minimumHeight:设置最小高度
Layout.preferredWidth:设置建议的宽度
Layout.preferredHeight:设置建议的高度
Layout.maximumWidth:设置最大宽度
Layout.maximumHeight:设置最大高度
Layout.fillWidth:设置填充宽度,当界面被拉伸出现更多空间时,该控件的宽度会自动增加来填充这些空间
Layout.fillHeight:设置填充高度
Layout.alignment:设置对其方式
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Window {
visible: true
width: 640
height: 480
title: qsTr("layout")
color: "gray"
RowLayout{
anchors.fill: parent
spacing: 20
Rectangle{
Layout.alignment: Qt.AlignTop //对齐方式 默认居中对齐
color: "orange"
Layout.preferredWidth: 100
Layout.preferredHeight: 100
}
Rectangle{
Layout.alignment: Qt.AlignTop
color: "blue"
Layout.preferredWidth: 100
Layout.preferredHeight: 100
}
Rectangle{
Layout.alignment: Qt.AlignBottom
color: "green"
Layout.preferredWidth: 100
Layout.preferredHeight: 100
}
Rectangle{
Layout.alignment: Qt.AlignBottom
color: "purple"
Layout.preferredWidth: 100
Layout.preferredHeight: 100
}
}
}
- ColumnLayout
垂直布局管理器与RowLayout用法类似,应用例如一列选项。比groupbox更加灵活
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Window {
visible: true
width: 640
height: 480
title: qsTr("layout")
color: "gray"
ColumnLayout{
anchors.centerIn: parent
spacing: 20
Text{
text: "请选择喜欢的科目"
font.pointSize: 20
color: "purple"
font.bold: true
Layout.leftMargin: 30
}
CheckBox{
text: "语文"
Layout.leftMargin: 30
font.pixelSize: 15
}
CheckBox{
text: "数学"
Layout.leftMargin: 30
font.pixelSize: 15
}
CheckBox{
text: "英语"
Layout.leftMargin: 30
font.pixelSize: 15
}
CheckBox{
text: "物理"
Layout.leftMargin: 30
font.pixelSize: 15
}
CheckBox{
text: "计算机"
Layout.leftMargin: 30
font.pixelSize: 15
}
}
}
- GridLayout
和上面的Grid一样,新增了行列和sapcing的配置。应用例如登陆界面
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Window {
visible: true
width: 640
height: 480
title: qsTr("layout")
color: "gray"
GridLayout{
anchors.centerIn: parent
columns: 2
rows: 3
columnSpacing: 20
rowSpacing: 20
Layout.rowSpan: 20
//第一行
Label{
text:"用户名"
font.pixelSize: 20
}
Rectangle{
id:rect1
border.color: "black"
width: 200
height: 30
TextEdit{
anchors.fill: rect1
font.pixelSize: 20
}
}
//第二行
Label{
text:"密码"
font.pixelSize: 20
}
Rectangle{
id:rect2
border.color: "black"
width: 200
height: 30
TextEdit{
anchors.fill: rect2
font.pixelSize: 20
}
}
//第三行
Button{
text: "登录"
font.pixelSize: 20
Layout.leftMargin: -30
Layout.topMargin: 50
}
Button{
text: "退出"
font.pixelSize: 20
Layout.leftMargin: 140
Layout.topMargin: 50
}
}
}
- StackLayout
提供了一个一次只能显示一个项目堆栈。只包含两个特有属性,count用来获取子项目的数量,currentIndex用来设置当前显示项目的索引。放在StackLayout中的子项目默认设置为Layout.fillWidth和 Layout.fillHeight ,也就是说默认会填充整个布局区域
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Window {
visible: true
width: 640
height: 480
title: qsTr("layout")
color: "gray"
StackLayout {
id: layout
anchors.fill: parent
currentIndex: 1
Rectangle {
color: 'teal'
implicitWidth: 200
implicitHeight: 200
}
Rectangle {
color: 'plum'
implicitWidth: 300
implicitHeight: 200
}
}
MouseArea {
anchors.fill: parent
onClicked: {
layout.currentIndex === 1 ?
layout.currentIndex = 0
: layout.currentIndex = 1
}
}
}