Positionierung mit Ankern

Zusätzlich zu den eher traditionellen Eigenschaften „ Grid “, „ Row “ und „ Column “ bietet „ Qt Quick “ auch eine Möglichkeit, Elemente mithilfe des Konzepts der Anker zu layouten. Man kann sich jedes Element so vorstellen, dass es über einen Satz von 7 unsichtbaren „Ankerlinien“ verfügt: „ left “, „ horizontalCenter “, „ right “, „ top “, „ verticalCenter “, „ baseline “ und „ bottom “.

Die Grundlinie (oben nicht abgebildet) entspricht der imaginären Linie, auf der der Text liegen würde. Bei Elementen ohne Text entspricht sie der Oberkante.

Das Verankerungssystem „ Qt Quick “ ermöglicht es Ihnen, Beziehungen zwischen den Ankerlinien verschiedener Elemente zu definieren. Sie können beispielsweise schreiben:

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

In diesem Fall wird die linke Kante von „rect2“ an die rechte Kante von „rect1“ gebunden, was zu folgendem Ergebnis führt:

Sie können mehrere Anker festlegen. Zum Beispiel:

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

Durch die Angabe mehrerer horizontaler oder vertikaler Anker können Sie die Größe eines Elements steuern. Im folgenden Beispiel ist „rect2“ rechts von „rect1“ und links von „rect3“ verankert. Wenn eines der beiden blauen Rechtecke verschoben wird, dehnt sich „rect2“ entsprechend aus oder schrumpft:

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

verticalCenter horizontalCenter Es gibt auch einige Komfortanker. „ anchors.fill “ ist ein Komfortanker, der dem Setzen der Anker „left“, „right“, „top“ und „bottom“ auf den linken, rechten, oberen und unteren Rand des Zielelements entspricht. „ anchors.centerIn “ ist ein weiterer Komfortanker und entspricht dem Setzen der Anker „ verticalCenter “ und „ horizontalCenter “ auf den linken, rechten, oberen und unteren Rand des Zielelements.

Ankerränder und Versätze

Das Verankerungssystem ermöglicht zudem die Festlegung von Rändern und Versätzen für die Anker eines Elements. Ränder legen fest, wie viel Leerraum außerhalb des Ankers eines Elements gelassen werden soll, während Versätze die Positionierung mithilfe der mittleren Ankerlinien steuern. Ein Element kann seine Ankerränder einzeln über leftMargin, rightMargin, topMargin und bottomMargin festlegen oder mit anchors.margins denselben Randwert für alle vier Kanten angeben. Anker-Versätze werden über horizontalCenterOffset, verticalCenterOffset und baselineOffset festgelegt.

Das folgende Beispiel legt einen linken Rand fest:

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

In diesem Fall wird links von `rect2` ein Rand von 5 Pixeln reserviert, was zu folgendem Ergebnis führt:

Ändern von Ankern

Qt Quick bietet den Typ „ AnchorChanges “ zur Festlegung der Anker in einem Zustand.

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

AnchorChanges kann mithilfe des Typs „ AnchorAnimation “ animiert werden.

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

Anker können auch imperativ in JavaScript geändert werden. Diese Änderungen sollten jedoch sorgfältig geordnet werden, da sie sonst zu unerwarteten Ergebnissen führen können. Das folgende Beispiel veranschaulicht das Problem:

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

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

Wenn „ reanchorToRight “ aufgerufen wird, setzt die Funktion zunächst den rechten Anker. Zu diesem Zeitpunkt sind sowohl der linke als auch der rechte Anker gesetzt, und das Element wird horizontal gestreckt, um seinen übergeordneten Bereich auszufüllen. Wenn der linke Anker aufgehoben wird, bleibt die neue Breite erhalten. Daher sollten Sie beim Aktualisieren von Ankern in JavaScript zunächst alle nicht mehr benötigten Anker aufheben und erst danach die erforderlichen neuen Anker setzen, wie unten gezeigt:

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

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

Da die Auswertungsreihenfolge von Bindungen nicht definiert ist, wird davon abgeraten, Anker über bedingte Bindungen zu ändern, da dies zu dem oben beschriebenen Reihenfolgeproblem führen kann. Im folgenden Beispiel wird der ` Rectangle ` schließlich auf die volle Breite seines übergeordneten Elements anwachsen, da sowohl der linke als auch der rechte Anker während der Aktualisierung der Bindung gleichzeitig gesetzt werden.

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

Dies sollte umgeschrieben werden, um stattdessen ` AnchorChanges ` zu verwenden, da ` AnchorChanges ` Reihenfolgeprobleme intern automatisch behandelt. So schreiben Sie das obige Beispiel korrekt um:

// 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" : "")
    }
}

Einschränkungen

Aus Leistungsgründen können Sie ein Element nur an seinen Geschwistern und seinem direkten übergeordneten Element verankern. Der folgende Anker ist beispielsweise ungültig und würde eine Warnung auslösen:

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

Außerdem dürfen ankerbasierte Layouts nicht mit absoluter Positionierung gemischt werden. Wenn ein Element seine Position mit ` x ` angibt und zusätzlich ` anchors.left` setzt oder seine linken und rechten Ränder verankert, aber zusätzlich ` width` festlegt, ist das Ergebnis undefiniert, da nicht klar wäre, ob das Element die Verankerung oder die absolute Positionierung verwenden soll. Das Gleiche gilt für die Festlegung der Eigenschaften „ y “ und „ height “ eines Elements mit „ anchors.top “ und „ anchors.bottom “ oder für die Festlegung von „ anchors.fill “ sowie „ width “ oder „ height “. Dasselbe trifft zu, wenn Positionierer wie „Row“ und „Grid“ verwendet werden, die möglicherweise die Eigenschaften „ x “ und „ y “ des Elements festlegen. Wenn Sie von der ankerbasierten zur absoluten Positionierung wechseln möchten, können Sie einen Ankerwert löschen, indem Sie ihn auf „ undefined “ setzen.