アンカーを使ったポジショニング

より伝統的なGrid 、Row 、Column 、Qt Quick に加えて、アンカーの概念を使用してアイテムをレイアウトする方法も提供します。各アイテムは、7本の目に見えない「アンカーライン」を持っていると考えることができます：left horizontalCenter 、right 、top 、verticalCenter 、baseline 、bottom 。

ベースライン（上の写真には写っていない）は、テキストが置かれる想像上の線に相当する。テキストがないアイテムの場合は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 は便利なアンカーで、左・右・上・下のアンカーをターゲットアイテムの左・右・上・下に設定するのと同じです。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 に設定することでアンカー値をクリアできます。