使用锚点定位

除了传统的Grid 、Row 和Column 之外，Qt Quick 还提供了一种使用锚点概念布局项目的方法。每个项目都可以被视为有一组 7 条不可见的 "锚线"：left,horizontalCenter,right,top,verticalCenter,baseline, 和bottom 。

基线（上图未画出）对应于文本所在的假想线。对于没有文本的项目，基线与顶线相同。

Qt Quick 锚点系统允许您定义不同项目锚点线之间的关系。例如，您可以写

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; ... }

在这种情况下，矩形 2的左边缘与矩形 1 的右边缘绑定，产生如下效果：

您可以指定多个锚点。例如

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }

通过指定多个水平或垂直锚点，可以控制项目的大小。下图中，矩形 2被锚定在矩形 1的右侧和矩形 3 的左侧。如果移动任何一个蓝色矩形，矩形 2都会根据需要伸缩：

Rectangle { id: rect1; x: 0; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }
Rectangle { id: rect3; x: 150; ... }

锚点填充（anchors.fill）是一个方便的锚点，相当于将左、右、上、下锚点设置为目标项的左、右、上、下。锚点居中（anchors.centerIn）是另一个方便的锚点，相当于将垂直居中（verticalCenter）和水平居中（horizontalCenter）锚点设置为目标项的垂直居中（verticalCenter）和水平居中（horizontalCenter）。

锚点边距和偏移

锚点系统还允许为项目的锚点指定边距和偏移。边距指定了在项目锚点外侧留出的空白空间大小，而偏移则允许使用中心锚点线进行定位操作。项目可以通过leftMargin 、rightMargin 、topMargin 和bottomMargin 单独指定锚点边距，也可以使用anchors.margins 为所有四条边指定相同的边距值。锚点偏移可通过horizontalCenterOffset 、verticalCenterOffset 和baselineOffset 指定。

下面的示例指定了左页边距：

Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }

在本例中，为rect2 的左边预留了 5 像素的边距，结果如下：

更改锚点

Qt Quick 提供了 类型，用于指定状态中的锚点。AnchorChanges

State {
    name: "anchorRight"
    AnchorChanges {
        target: rect2
        anchors.right: parent.right
        anchors.left: undefined  //remove the left anchor
    }
}

AnchorChanges 使用 类型，锚点可以被动画化。AnchorAnimation

Transition {
    AnchorAnimation {}  //animates any AnchorChanges in the corresponding state change
}

锚点也可以在 JavaScript 中强制更改。不过，这些更改应仔细排序，否则可能会产生意想不到的结果。下面的示例说明了这个问题：

//bad code
Rectangle {
    width: 50
    anchors.left: parent.left

    function reanchorToRight() {
        anchors.right = parent.right
        anchors.left = undefined
    }
}

调用reanchorToRight 时，函数首先设置右锚。此时，左右锚点都已设置，项目将被水平拉伸，以填充其父项目。当取消设置左锚时，新的宽度将保持不变。因此，在 JavaScript 中更新锚点时，应首先取消设置不再需要的锚点，然后再设置需要的新锚点，如下图所示：

Rectangle {
    width: 50
    anchors.left: parent.left

    function reanchorToRight() {
        anchors.left = undefined
        anchors.right = parent.right
    }
}

由于没有定义绑定的评估顺序，因此不建议通过条件绑定来更改锚点，因为这会导致上述顺序问题。在下面的示例中，由于在绑定更新时左右锚点将同时被设置，因此矩形最终将长到父对象的全宽。

//bad code
Rectangle {
    width: 50; height: 50
    anchors.left: state == "right" ? undefined : parent.left;
    anchors.right: state == "right" ? parent.right : undefined;
}

该示例应改写为使用AnchorChanges ，因为AnchorChanges 会自动在内部处理排序问题。

限制条件

出于性能考虑，您只能将项目锚定到其同级和直接父级。例如，以下锚点无效，会产生警告：

//bad code
Item {
    id: group1
    Rectangle { id: rect1; ... }
}
Item {
    id: group2
    Rectangle { id: rect2; anchors.left: rect1.right; ... }    // invalid anchor!
}

此外，基于锚点的布局不能与绝对定位混合使用。如果一个项目指定了其x 位置，同时还设置了anchors.left ，或锚定了其左右边缘，但同时又设置了width ，结果将是未定义的，因为不清楚该项目应使用锚定还是绝对定位。将项目的y 和height 与anchors.top 和anchors.bottom 设置在一起，或者将anchors.fill 与width 或height 设置在一起，也是同样的道理。在使用定位器（如 Row 和 Grid）时也是如此，定位器可能会设置项目的x 和y 属性。如果想从基于锚点的定位方式改为绝对定位方式，可以将锚点设置为undefined ，从而清除锚点值。