QML中的Layout和Anchor

相較於QWidget，QQuick中使用QML來寫界面，開發效率和代碼結構都有了明顯的進步，而且新版本對QQuick的支持也越來越完備，無論效率，還是界面效果都要優於原有的Widget架構。

QML中界面排布提供了兩種方式Layout和Anchor，兩個形式結合起來非常方便，之前Widget中只提供了Layout的支持，對於有些特殊分佈非常不便。

Layout(佈局):  適用於元素並列排布的場景，元素之間沒有重疊關係，大的方面界面的主要元素的分佈都可以用RowLayout和ColumnLayout規劃好:

Rectangle{
    color: "black"
    anchors.fill: parent
    RowLayout{
        spacing: 0
        Rectangle{
            Layout.preferredHeight: 30
            Layout.preferredWidth: 100
            Layout.alignment: Qt.AlignLeft
            color: "red"
        }
        Rectangle {
            Layout.preferredHeight: 30
            Layout.preferredWidth: 100
            Layout.alignment: Qt.AlignLeft
            color: "white"
        }
        Rectangle{
            Layout.preferredHeight: 50
            Layout.preferredWidth: 100
            Layout.alignment: Qt.AlignRight
            color: "blue"
        }
    }
}

Anchor(錨點): 適用於元素重疊的場景，比如一個Text放在Rectangle上，這種場景想用佈局做就非常費勁了，但是Anchor可以很方便的搞定,比如讓一個Text在Rectangle中居中顯示:

Rectangle{
    color: "black"
    anchors.fill: parent
    Rectangle{
        color: "pink"
        width: 500
        height: 100
        Text {
            anchors.centerIn: parent
            text: qsTr("最愛吹吹風")
            color: "white"
        }
    }
}

Layout的界面排布思想被用廣泛用在App上，之前在是dui時也用到這種方式。Anchor佈局可以說是一大亮點了，之前元素重疊的情況都是用座標move來實現，非常不便，現在引入了Anchor可以說在界面開發方面更加完備了。