QML之anchors锚布局

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.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"

       }

   }