アンカーによる配置

従来のGrid 、Row 、Column に加え、Qt Quick では、アンカーの概念を用いたアイテムのレイアウト方法も提供しています。各アイテムには、left 、horizontalCenter 、right 、top 、verticalCenter 、baseline 、bottom という7本の目に見えない「アンカーライン」が設定されていると考えることができます。

ベースライン（上の図には示されていません）は、テキストが配置される仮想の線に対応します。テキストのないアイテムの場合、これは「top」と同じになります。

Qt Quick のアンカーシステムを使用すると、異なる項目のアンカーライン間の関係を定義できます。たとえば、次のように記述できます：

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

この場合、rect2の左端がrect1の右端に固定され、次のような結果になります：

複数のアンカーを指定することもできます。例えば：

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

複数の水平または垂直のアンカーを指定することで、項目のサイズを制御できます。以下では、rect2 はrect1の右側とrect3の左側にアンカーされています。青い長方形のいずれかが移動すると、rect2は必要に応じて伸縮します：

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

便利なアンカーもいくつかあります。anchors.fill は、ターゲット項目の左、右、上、下にそれぞれleft、right、top、bottomのアンカーを設定するのと同じ効果を持つ便利なアンカーです。anchors.centerIn も便利なアンカーの一つで、verticalCenter とhorizontalCenter のアンカーを、ターゲット項目のverticalCenter とhorizontalCenter に設定するのと同じ効果があります。

アンカーのマージンとオフセット

このアンカーシステムでは、項目のアンカーに対してマージンやオフセットを指定することも可能です。マージンは項目のアンカーの外側に残す余白の量を指定するものであり、オフセットは中央のアンカーラインを使用して位置を調整することを可能にします。 アイテムのアンカーマージンは、leftMargin 、rightMargin 、topMargin 、bottomMargin を使用して個別に指定するか、anchors.margins を使用して 4 つの辺すべてに同じマージン値を指定することができます。アンカーオフセットは、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 内で命令型に設定を変更することも可能です。ただし、これらの変更は順序を慎重に考慮する必要があります。そうしないと、予期しない結果が生じる可能性があります。次の例はこの問題を示しています：

// May produce unexpected results
Rectangle {
    width: 50
    anchors.left: parent.left

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

reanchorToRight が呼び出されると、関数はまず右のアンカーを設定します。その時点で、左と右の両方のアンカーが設定され、アイテムは親要素を埋めるように水平方向に引き伸ばされます。 左アンカーが解除されても、新しい幅は維持されます。したがって、JavaScript内でアンカーを更新する際は、以下に示すように、まず不要になったアンカーをすべて解除し、その後で必要な新しいアンカーを設定する必要があります：

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

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

バインディングの評価順序は定義されていないため、条件付きバインディングを介してアンカーを変更することは推奨されません。これは、前述の順序の問題を引き起こす可能性があるためです。以下の例では、バインディングの更新中に左アンカーと右アンカーの両方が同時に設定されるため、Rectangle は最終的に親要素の全幅まで拡大してしまいます。

// May produce unexpected results
Rectangle {
    width: 50; height: 50
    anchors.left: state == "right" ? undefined : parent.left;
    anchors.right: state == "right" ? parent.right : undefined;
}

これについては、代わりに `AnchorChanges ` を使用するように書き換える必要があります。`AnchorChanges ` を使用すれば、順序の問題は内部で自動的に処理されるためです。上記の例を正しく書き換える方法は以下の通りです：

// Correct code
Rectangle {
    id: rect
    width: 50; height: 50
    anchors.left: parent.left  // initial position

    states: State {
        name: "rightAligned"
        AnchorChanges {
            target: rect
            anchors.left: undefined
            anchors.right: parent.right
        }
    }
    function toggleAnchoring() {
        parent.state = (parent.state == "" ? "rightAligned" : "")
    }
}

制限事項

パフォーマンス上の理由から、アイテムをアンカーできるのは、その兄弟要素および直接の親要素のみです。たとえば、次のアンカーは無効であり、警告が発生します：

//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 に設定することでアンカー値をクリアできます。