文章目录
一、Positioner(定位器)
1.1、行列、网格定位
1.2、流定位(Flow)
1.3、重复器(Repeater)
四、Anchor(锚)
QML编程中可以使用x、y属性手动布局元素,但这些属性是与元素父对象左上角位置紧密相关的,不容易确定各子元素间的相对位置。为此,QML提供了定位器和锚点来简化元素的布局。
一、Positioner(定位器)
1.1、行列、网格定位
(1)RedRectangle.qml、GreenRectangle.qml、YellowRectangle.qml
//RedRectangle.qml
import QtQuick 2.0
Rectangle {
width: 64; height: 32
color: "red"
border.color: Qt.lighter(color)
}
//GreenRectangle
import QtQuick 2.0
Rectangle {
width: 64; height: 32
color: "green"
border.color: Qt.lighter(color)
}
//YellowRectangle
import QtQuick 2.0
Rectangle {
width: 64; height: 32
color: "yellow"
border.color: Qt.lighter(color)
}
(2)MainForm.qml
import QtQuick 2.7
Rectangle {
width: 360; height: 360
MouseArea {
id: mouseArea
anchors.fill: parent
}
Row { //(a)
x: 25; y: 25
spacing: 10
layoutDirection: Qt.RightToLeft
//以下添加被Row定位的元素成员
RedRectangle {}
GreenRectangle {}
YellowRectangle {}
}
Column { //(b)
x: 25; y: 120
spacing: 2
//以下添加被Column定位的元素成员
RedRectangle {}
GreenRectangle {}
YellowRectangle {}
}
Grid { //(c)
x: 140; y: 120
columns: 3
spacing: 5
//以下是被Grid定位的元素成员
YellowRectangle {}
YellowRectangle {}
YellowRectangle {}
YellowRectangle {}
YellowRectangle {}
}
}
(a)Row {...}:Row将其定位的元素成员都放置在一行的位置,所有元素之间的间距相等(由spacing属性设置),顶端保持对齐。layoutDirection属性设置元素的排列顺序,可取值为Qt.LeftToRight(默认,从左向右)、Qt.RightToLeft(从右向左)。
(b)Column {...}:Column将元素成员按照加入的顺序从上到下在同一列排列出来,同样由spacing属性指定元素间距,所有元素靠左对齐。
(c)Grid {...}:Grid将其元素成员排列成一个网格,默认从左向右排列,每行4个元素。可通过设置rows和columns属性来自定义行和列的数值,如果 二者有一个不显示设置,则另一个会根据元素成员的总数计算出来。例如,本例中的columns设置为3,一共放入5个蓝色矩形,行数就会自动计算为2.
(3)运行结果
1.2、流定位(Flow)
(1)MainForm.qml
import QtQuick 2.7
Rectangle {
width: 360; height: 360
MouseArea {
id: mouseArea
anchors.fill: parent
}
Flow { //(a)
anchors.fill: parent
anchors.margins: 15
spacing: 5
RedRectangle {}
GreenRectangle {}
YellowRectangle {}
}
}
(a)Flow {...}:顾名思义,Flow会将其元素成员以流的形式显示出来,它既可以从左向右横向布局,也可以从上向下纵向布局,或反之。但与Row、Column等定位器不同的是,添加到Flow里的元素,会根据显示区(窗体)尺寸变化动态地调整其布局。以本程序为例,初始时元素是横向排列显示,当窗体被拉窄时,元素是纵向排列显示。
(2)、运行效果
1.3、重复器(Repeater)
重复器用户创建大量相似的元素成员,常与其他定位器结合起来使用。
示例:Repeater结合Grid来排列一组矩形元素:
(1)MainForm.qml
import QtQuick 2.7
Rectangle {
width: 200; height: 200
MouseArea {
id: mouseArea
anchors.fill: parent
}
Grid {
x: 25; y: 25
spacing: 4
Repeater { //(a)
model: 16
Rectangle {
width: 48; height: 48
color: "aqua"
Text {
anchors.centerIn: parent
color: "black"
font.pointSize: 20
text: index //(b)
}
}
}
}
}
(a)Repeater {...}:重复器,作为Grid的数据提供者,它可以创建任何QML基本的可是原始。因Repeater会按照其model属性定义的个数循环生成子元素,故上面代码重复生成16个Rectangle。
(b)text: index:Repeater会为每个子元素注入一个index属性,作为当前的循环索引(本例中是0~15)。因可以在子元素中直接使用这个属性,故可以用它给Text的text属性赋值。
(2)运行效果
四、Anchor(锚)
除前面介绍的Row、Column和Grid等外,QML还提供了Anchor(锚)来进行元素布局的方法。每个元素都可以被认为有一组无线的“锚线”:left、horizontalCenter、right、top、verticalCenter和bottom,如下图示:
这些锚线分别对应元素中的anchors.left、anchors.horizontalCenter等属性,所有的可视元素都可以使用锚来布局。锚系统还允许为一个元素的锚指定边距(margin)和偏移(offset)。边距指定了元素锚到外边界的空间量,而偏移允许使用中心锚线来定位。一个元素可以通过leftMargin、rightMargin、topMargin和bottomMargin来独立地指定锚边界,如下图示。也可以使用anchors.margins来为所有的4个锚指定相同的边距。
锚偏移使用horizontalCenterOffset、verticalCenterOffset和baselineOffset来指定。编程中经常使用anchors.fill将一个元素充满另一个元素,这等价于使用4个直接的锚。但要注意,智能在父子或兄弟元素之间使用锚,而且基于锚的布局不能与绝对的位置定义(如直接设置x和y属性值)混合使用,否则会出现不确定的结果。
(1)MainForm.qml
import QtQuick 2.7
Rectangle {
width: 360; height: 360
property alias mouseArea: mouseArea
MouseArea {
id: mouseArea
anchors.fill: parent
}
YellowRectangle {
id: yellowRect
anchors.left: parent.left
anchors.top: parent.top
anchors.leftMargin: 25
anchors.topMargin: 25
}
GreenRectangle {
id: greenRect
anchors.left: yellowRect.right
anchors.top: yellowRect.top
anchors.leftMargin: 40
}
RedRectangle {
id: redRect
anchors.left: greenRect.right
anchors.top: greenRect.top
anchors.leftMargin: 40
}
}
(2)运行效果