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"

       }

   }