一、概述
QML中有两套与布局有关的类库,一套叫做定位器,一套叫做布局。
定位器包括Row(行定位器)、Column(列定位器)、Grid(表格定位器)、Flow(流式定位器)。
布局管理器有RowLayout(行布局)、ColumnLayout(列布局)、GridLayoout(表格布局)。
二、定位器
定位器是一种容器元素,专门管理界面中的其他元素,与传统的QtWidget中的布局管理器类似。使用定位器,你可以很方便得把众多的元素组织在一起,形成非常规则的界面效果。注意,定位器不会改变元素的大小,即使用户调整界面,也不会干涉孩子的尺寸。
Row
沿着一行安置孩子们,当你需要在水平设置一系列Item时,可以使用行定位器。
示例代码如下:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
Window {
visible: true
width: 300
height: 200
title: qsTr("Hello World")
Rectangle {
anchors.fill: parent
anchors.margins: 10
color: "#EEEEEF"
border.color: "blue"
Row{
anchors.verticalCenter: parent.verticalCenter
spacing: 6
Button{
text: "button1"
width: 60
}
Button{
text: "button2"
width: 100
}
Button{
text: "button3"
width: 60
}
Button{
text: "button3"
width: 100
}
}
}
}
由此可见,行定位器单单把元素组织在一起,并不会根据界面大小,自动调节孩子们的尺寸。
Column
Column和Row类似,不过是在垂直方向上安排它的子项。
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
Window {
visible: true
width: 300
height: 200
title: qsTr("Hello World")
Rectangle {
anchors.fill: parent
anchors.margins: 10
color: "#EEEEEF"
border.color: "blue"
Column{
anchors.verticalCenter: parent.verticalCenter
spacing: 6
Button{
text: "button1"
width: 60
}
Button{
text: "button2"
width: 100
}
Button{
text: "button3"
width: 60
}
Button{
text: "button3"
width: 100
}
}
}
}
Grid
Grid是在一个网格上放置它的子项。它会创建一个拥有多个单元格的网格,足够容纳所有的子项,Grid会从左到右,从上到下把Item一个个塞到单元格里,Item默认会被放到单元格左上角,即(0,0)的位置。
rows、columns来设置表格的行数和列数,默认是4列,行数自动计算。
rowSpacing、columnSpacing指定行列间距;
更多属性的设置可以查看Qt官方文档!
Flow
Flow和Grid类似,不同之处是,Flow没有显式的行数、列数,它会计算Item的尺寸,然后与自身的尺寸比较,按需折行。Flow的flow属性,默认取值是Flow.leftToRight,从左至右安排Item,直到Flow本身的宽度不能容乃新的子Item时,折行。当flow取Flow.ToptoBotton时,从上到下安排Item,直到Flow本身的高度不能容纳新的Item时,开始在下一列上安排Item.
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.0
Window {
visible: true
width: 300
height: 200
title: qsTr("Hello World")
Rectangle {
anchors.fill: parent
anchors.margins: 10
color: "#EEEEEF"
border.color: "blue"
Flow{
anchors.fill: parent
anchors.margins: 10
spacing: 6
Button{
text: "button1"
width: 60
}
Button{
text: "button2"
width: 100
}
Button{
text: "button3"
width: 60
}
Button{
text: "button3"
width: 100
}
}
}
}
三、布局管理器
QML 中的布局管理器和QWidget中国的相似,与定位器不同的是,布局管理器会自动调整子Item的尺寸来适应界面大小的变化。
使用布局管理器需要导入Layout模块
import QtQuick.Layouts 1.1
RowLayout
行布局可以看作只有一行的GridLayout,它与Row的行为类似,不同之处在于,RowLayout所管理的元素可以使用下列附加属性
ColumnLayout
列布局可以看作只有一列的GridLayout,它的行为与Column类似,不同之处在于,它所管理的元素可以有下列附加属性:
Layout.minimumHeight: 40 //最小高度
Layout.minimumWidth:60 //最小宽度
Layout.preferredWidth:80 //首选宽度 默认-1,为-1时忽略该值
Layout.preferredHeight:80 //首选高度 默认-1,为-1时忽略该值
Layout.maximumHeight:50 //最大高度
Layout.maximumWidth:100 //最大宽度
Layout.fillWidth:true //true:尽可能宽 false:固定宽度设为首选宽度 默认为true
Layout.fillHeight:true //true:尽可能高 false:固定宽度设为首选高度 默认为true
Layout.alignment:
GridLayout
GridLayout与QWidget中的QGridLayout功能类似,它在一个表格中安排它管理的Item,如果用户调整界面尺寸,GridLayout会自动调整Item的位置。
GridLayout管理的Item,可以使用下列附加属性:
Layout.row: 0 //行号
Layout.column: 0 //列号
Layout.rowSpan: 1 //所占行数
Layout.columnSpan: 1 //所占列数
Layout.minimumHeight: 40 //最小高度
Layout.minimumWidth:60 //最小宽度
Layout.preferredWidth:80 //首选宽度 默认-1,为-1时忽略该值
Layout.preferredHeight:80 //首选高度 默认-1,为-1时忽略该值
Layout.maximumHeight:50 //最大高度
Layout.maximumWidth:100 //最大宽度
Layout.fillWidth:true //true:尽可能宽 false:固定宽度设为首选宽度 默认为true
Layout.fillHeight:true //true:尽可能高 false:固定宽度设为首选高度 默认为true
四、其他布局方式
Qt Quick中的Item都有x、y、width、height属性,其实可以使用他们来定位Item,就是我们常用的绝对坐标布局。