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

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

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

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 アンカーをターゲット項目の垂直中心と水平中心に設定するのと同じ効果があります。

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

このアンカーシステムでは、アイテムのアンカーに対してマージンや オフセットを指定することも可能です。マージンは、アイテムのアンカーの外側に残す余白の量を指定するものであり、オフセットは、中心アンカーラインを使用して位置を調整することを可能にします。 アイテムは、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 Ultraliteでは、状態内のアンカーを指定するためにAnchorChanges 型が提供されています。

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

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

//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 やColumn などのポジショナーを使用する場合も同様であり、これらは項目のx およびy プロパティを設定する可能性があります。アンカーベースの位置指定から絶対位置指定に変更したい場合は、アンカー値をundefined に設定することでクリアできます。