Eigenschaftsbindung

Der Eigenschaft eines Objekts kann ein statischer Wert zugewiesen werden, der konstant bleibt, bis ihr explizit ein neuer Wert zugewiesen wird. Um jedoch QML und seine integrierte Unterstützung für dynamisches Objektverhalten optimal zu nutzen, verwenden die meisten QML-Objekte Eigenschaftsbindungen.

Eigenschaftsbindungen sind ein Kernmerkmal von QML, mit dem Entwickler Beziehungen zwischen verschiedenen Objekteigenschaften festlegen können. Wenn sich der Wert einer Abhängigkeit einer Eigenschaft ändert, wird die Eigenschaft entsprechend der festgelegten Beziehung automatisch aktualisiert.

Im Hintergrund überwacht die QML-Engine die Abhängigkeiten der Eigenschaft (d. h. die Variablen im Bindungsausdruck). Wird eine Änderung festgestellt, wertet die QML-Engine den Bindungsausdruck neu aus und wendet das neue Ergebnis auf die Eigenschaft an.

Übersicht

Um eine Eigenschaftsbindung zu erstellen, wird einer Eigenschaft ein JavaScript-Ausdruck zugewiesen, der den gewünschten Wert liefert. Im einfachsten Fall kann eine Bindung ein Verweis auf eine andere Eigenschaft sein. Betrachten Sie das folgende Beispiel, in dem die Höhe des blauen Rectangle an die Höhe seines übergeordneten Elements gebunden ist:

Rectangle {
    width: 200; height: 200

    Rectangle {
        width: 100
        height: parent.height
        color: "blue"
    }
}

Immer wenn sich die Höhe des übergeordneten Rechtecks ändert, wird die Höhe des blauen Rechtecks automatisch auf denselben Wert aktualisiert.

Eine Bindung kann jeden gültigen JavaScript-Ausdruck oder jede gültige Anweisung enthalten, da QML eine standardkonforme JavaScript-Engine verwendet. Bindungen können auf Objekteigenschaften zugreifen, Methoden aufrufen und integrierte JavaScript-Objekte wie ` Date ` und ` Math` verwenden. Nachfolgend sind weitere mögliche Bindungen für das vorherige Beispiel aufgeführt:

height: parent.height / 2

height: Math.min(parent.width, parent.height)

height: parent.height > 100 ? parent.height : parent.height/2

height: {
    if (parent.height > 100)
        return parent.height
    else
        return parent.height / 2
}

height: someMethodThatReturnsHeight()

Im Folgenden finden Sie ein komplexeres Beispiel mit mehreren Objekten und Typen:

Column {
    id: column
    width: 200
    height: 200

    Rectangle {
        id: topRect
        width: Math.max(bottomRect.width, parent.width/2)
        height: (parent.height / 3) + 10
        color: "yellow"

        TextInput {
            id: myTextInput
            text: "Hello QML!"
        }
    }

    Rectangle {
        id: bottomRect
        width: 100
        height: 50
        color: myTextInput.text.length <= 10 ? "red" : "blue"
    }
}

Im vorherigen Beispiel,

• topRect.width hängt von „ bottomRect.width “ ab und column.width
• topRect.height hängt ab von column.height
• bottomRect.color hängt ab von myTextInput.text.length

Darüber hinaus werden alle Eigenschaften, auf die innerhalb einer JavaScript-Funktion verwiesen wird, die selbst als Bindung verwendet wird, neu ausgewertet. Im folgenden Codeausschnitt werden beispielsweise immer dann, wenn sich die Eigenschaft „ enabled “ von „ Rectangle “ ändert, die Bindungen für die Eigenschaften „ x “ und „ y “ neu ausgewertet:

Rectangle {
    x: rectPosition()
    y: rectPosition()
    width: 200
    height: 200
    color: "lightblue"

    function rectPosition() {
        return enabled ? 0 : 100
    }
}

Syntaktisch dürfen Bindungen beliebig komplex sein. Ist eine Bindung jedoch übermäßig komplex – beispielsweise wenn sie mehrere Zeilen oder imperativische Schleifen umfasst –, könnte dies darauf hindeuten, dass die Bindung für mehr als nur die Beschreibung von Eigenschaftsbeziehungen verwendet wird. Komplexe Bindungen können die Leistung, Lesbarkeit und Wartbarkeit des Codes beeinträchtigen. Es kann sinnvoll sein, Komponenten mit komplexen Bindungen neu zu gestalten oder die Bindung zumindest in eine separate Funktion auszulagern. Generell sollten sich Benutzer nicht auf die Auswertungsreihenfolge von Bindungen verlassen.

Erstellen von Eigenschaftsbindungen aus JavaScript

Eine Eigenschaft mit einer Bindung wird bei Bedarf automatisch aktualisiert. Wird der Eigenschaft jedoch später über eine JavaScript-Anweisung ein statischer Wert zugewiesen, wird die Bindung entfernt.

Beispielsweise stellt das unten stehende „ Rectangle “ zunächst sicher, dass sein „ height “ immer doppelt so groß ist wie sein „ width “. Wird jedoch die Leertaste gedrückt, wird der aktuelle Wert von „ width*3 “ als statischer Wert an „ height “ zugewiesen. Danach bleibt der Wert von „ height “ auf diesem Wert festgelegt, auch wenn sich „ width “ ändert. Durch die Zuweisung des statischen Werts wird die Bindung aufgehoben.

import QtQuick 2.0

Rectangle {
    width: 100
    height: width * 2

    focus: true
    Keys.onSpacePressed: {
        height = width * 3
    }
}

Wenn das Rechteck eine feste Höhe erhalten und automatische Aktualisierungen unterbunden werden sollen, ist dies kein Problem. Soll jedoch eine neue Beziehung zwischen width und height hergestellt werden, muss der neue Bindungsausdruck stattdessen in die Funktion Qt.binding() eingeschlossen werden:

import QtQuick 2.0

Rectangle {
    width: 100
    height: width * 2

    focus: true
    Keys.onSpacePressed: {
        height = Qt.binding(function() { return width * 3 })
    }
}

Nun wird die Höhe des Rechtecks nach dem Drücken der Leertaste weiterhin automatisch aktualisiert, sodass sie stets das Dreifache seiner Breite beträgt.

Fehlerbehebung beim Überschreiben von Bindungen

Eine häufige Ursache für Fehler in QML-Anwendungen ist das versehentliche Überschreiben von Bindungen durch statische Werte aus JavaScript-Anweisungen. Um Entwicklern dabei zu helfen, Probleme dieser Art aufzuspüren, kann die QML-Engine Meldungen ausgeben, sobald eine Bindung aufgrund imperativer Zuweisungen verloren geht.

Um solche Meldungen zu generieren, müssen Sie die Informationsausgabe für die Protokollierungskategorie „ qt.qml.binding.removal “ aktivieren, beispielsweise durch Aufruf von:

QLoggingCategory::setFilterRules(QStringLiteral("qt.qml.binding.removal.info=true"));

Weitere Informationen zum Aktivieren der Ausgabe aus Protokollierungskategorien finden Sie in der Dokumentation zu „ QLoggingCategory “.

Beachten Sie, dass es unter bestimmten Umständen durchaus sinnvoll sein kann, Bindungen zu überschreiben. Jede von der QML-Engine generierte Meldung sollte als diagnostische Hilfe betrachtet werden und nicht unbedingt ohne weitere Untersuchung als Hinweis auf ein Problem gewertet werden.

Verwendung von „ this “ mit Eigenschaftsbindungen

Beim Erstellen einer Eigenschaftsbindung aus JavaScript kann das Schlüsselwort „ this “ verwendet werden, um auf das Objekt zu verweisen, das die Bindung erhält. Dies ist hilfreich, um Mehrdeutigkeiten bei Eigenschaftsnamen zu beseitigen.

Beispielsweise ist der folgende ` Component.onCompleted `-Handler innerhalb des Gültigkeitsbereichs von ` Item` definiert. In diesem Gültigkeitsbereich bezieht sich ` width ` auf die Breite von ` Item`, nicht auf die Breite von ` Rectangle`. Um die Eigenschaft ` height ` von ` Rectangle` an dessen eigene ` width` zu binden, muss der Bindungsausdruck explizit auf ` this.width ` (oder alternativ auf ` rect.width`) verweisen:

Item {
    width: 500
    height: 500

    Rectangle {
        id: rect
        width: 100
        color: "yellow"
    }

    Component.onCompleted: {
        rect.height = Qt.binding(function() { return this.width * 2 })
        console.log("rect.height = " + rect.height) // prints 200, not 1000
    }
}