在QML中使用anchor设定元素的位置

通常确定一个组件的位置，我们会使用x、y坐标，但在Qt Quick程序中，使用QML编写界面时，有一种方法可以使界面更加灵活，不需要计算x、y坐标就可以实现组件之间的联动。这就是Qt Quick中的“anchor”概念。

在这个概念下，一个组件可以认为拥有7条“anchor line”，分别是left、horizontalCenter、right、top、verticalCenter、baseline和bottom。其中baseline是带文本的组件文本显示的位置，在图中没有画出。

下面是一些使用anchor设定组件位置的例子。

Column {
        id:column
        width: parent.width

        Rectangle {
            id: rectangle
            anchors.horizontalCenter: parent.horizontalCenter
}

上面的代码创建了一个Rectangle在Column里面，我们希望将Rectangle设定在Column的水平中线上，这时就可以将Rectangle的horizontalCenter设定为父组件的horizontalCenter。

如果想将Rectangle设定在一个组件的正中间可以怎么做呢？上面的例子已经展示如何设定在水平中线上，这时我们加上设定在垂直中线上，就可以实现Rectangle在正中间。

Rectangle {
        id:column
        width: parent.width

        Rectangle {
            id: rectangle
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
}

这样写有一点复杂，还可以写成这样。

Rectangle {
        id:column
        width: parent.width

        Rectangle {
            id: rectangle
            anchors {
                horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }
}

假如有两个Rectangle并排，但希望它们之间有一点缝隙又怎么办呢？anchor概念还提供另一种工具，就是margin。

通过设定margin，就可以实现组件之间有缝隙。

例如这样。

Rectangle {
        id:column
        width: parent.width

        Rectangle {
            id: rectangle1
            anchors {
                horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }

        Rectangle {
            id: rectangle2
            anchors {
                left: rectangle1.right
                leftMargin: 5
            }
}

以上就是在QML如何使用anchor设定组件位置的一点总结。