QML的布局方式一般采用两种，一种就是直接设置，X与Y坐标的值。一种是采用相对位置布局，anchors锚布局。使用锚布局的能够使界面更紧凑，更有整体化。我个人相对比较喜欢使用锚布局，选取一个最合适的参考点，其他点对它采用锚布局。
anchors.baseline : AnchorLine
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.mirrored : bool
anchors.right : AnchorLine
anchors.rightMargin : real
anchors.top : AnchorLine
anchors.topMargin : real
anchors.baseline : AnchorLine
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.mirrored : bool
anchors.right : AnchorLine
anchors.rightMargin : real
anchors.top : AnchorLine
anchors.topMargin : real
anchors.verticalCenter : AnchorLine
anchors.verticalCenterOffset : real
Rectangle{
id:xiaohuang
height: 80
width: 80
color: "yellow"
radius: 5
anchors.centerIn: parent //锚定位在父项的中间
//anchors.fill: parent //填充满父项，
Text {
anchors.centerIn: parent
font.pixelSize: 30
text: qsTr("小黄")
}
}
Rectangle{
id:xiaohong
height: 80
width: 80
color: "red"
radius: 5
anchors.right: xiaohuang.left //本项的右边对齐于 xiaohuang的左边,
anchors.rightMargin: 50 //右边缘的距离，距离为0时可以理解成边缘线公用
//上面两条语句相当决定xiaohong的X左边
//注意的是同时使用x，y坐标和锚布局，x，y坐标布局失效，有限与锚布局
anchors.verticalCenter: xiaohuang.verticalCenter //垂直线中心的定位
anchors.verticalCenterOffset: 0 //垂直线中心的偏移
//上面两句代码相当决定于Y坐标
Text {
anchors.centerIn: parent
font.pixelSize: 30
text: qsTr("小红")
}
}
Rectangle{
id:xiaolv
height: 80
width: 80
color: "green"
radius: 5
anchors.left: xiaohuang.right
anchors.leftMargin: 50
//anchors.margins: 20 //所有进行边缘对齐的偏移量,优先级比上行低
anchors.verticalCenter: xiaohuang.verticalCenter
anchors.verticalCenterOffset: 0
Text {
anchors.centerIn: parent
font.pixelSize: 30
text: qsTr("小绿")
}
}
Rectangle{
id:xiaoqing
height: 80
width: 80
color: "cyan"
radius: 5
anchors.bottom: xiaohuang.top //本项的低端与xiaohuang和小黄的顶端对齐
anchors.bottomMargin: 50
//上面两行决定了Y坐标
anchors.horizontalCenter: xiaohuang.horizontalCenter//水平线中心的定位
anchors.horizontalCenterOffset: 0 //水平中心的偏移量
//上面两行代码决定了X坐标的值
Text {
anchors.centerIn: parent
font.pixelSize: 30
text: qsTr("小青")
}
}
Rectangle{
id:xiaolan
height: 80
width: 80
color: "blue"
radius: 5
anchors.top: xiaohuang.bottom
anchors.topMargin: 50
anchors.horizontalCenter: xiaohuang.horizontalCenter
anchors.horizontalCenterOffset: 0
Text {
//anchors.centerIn: parent
anchors.baseline: parent.baseline //底线等于（对齐）父的顶线
anchors.baselineOffset: 20 //偏移量
font.pixelSize: 30
text: qsTr("小蓝")
color: "red"
}
}
