In QML können wir ein Element gestalten indem wir seine Eigenschaften benutzen. Wir legen die Farbe, seine Breite und Länge und alle anderen Eigenschaften fest. Es gibt verschiedene Methoden sie festzulegen. Im Element selbst, aus einem anderen Element wenn wir das Element in eine Datei auslagern. Was wäre wenn wir im Element ein anderes Element hätten und wir es von Draußen ansprechen wollten. Über die Eigenschaft id können wir andere Elemente in der gleichen Datei ansprechen. Betrachten wir das folgende Beispiel:

import QtQuick 2.7
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        id: rechteck1
        color: rechteck2.color
        width: 100
        height: 100
    }
    Rectangle {
        id: rechteck2
        color: "blue"
        width: rechteck1.width
        height: rechteck1.height
        x: 100
    }
}

Hier haben wir zwei Rechtecke neben einander liegen. Rechteck 1 hat die Farbe von Rechteck 2 übernommen, wobei Rechteck 2 die Breite und die Länge von Rechteck 2 übernommen hat. Genauso können Kind-Elemente die Werte der Eltern-Elemente übernehmen und umgekehrt.

import QtQuick 2.7
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        id: rechteck1
        color: "red"
        width: 100
        height: 100
        border.color: inneresRechteck.border.color
        Rectangle {
            id: inneresRechteck
            color: parent.color
            height: 50
            width: 50
            border.color: Qt.lighter(parent.color)
        }
    }
}

Hier sehen wir, wenn wir die Eigenschaften von dem Eltern-Element übernehmen wollen können wir die parent Bezeichnung verwenden. Wenn aber das Eltern-Element die Eigenschaftswerte vom Kind-Element übernehmen möchte, muss man die über die id ansprechen, weil ein Eltern-Element mehrere Kind-Elemente haben könnte. Umgekehrt gilt das nicht.

Anders als auf die vorhandenen Eigenschaften zuzugreifen können wir auch Variable definieren. Das ist sinnvoll, wenn wir globale Eigenschaften definieren worauf mehrere Elemente Zugriff haben oder Kind-Elemente auf Eltern-Element zugreifen. So müssen wir die Variablen deklarieren:

property <typ> <name>[:wert]

Der Wert ist optional anzugeben, bei Nichtzuweisung wird ein Standardwert genommen, bei int wäre es die 0, bei string ein leerer Text. Für Variablen stehen folgende Typen zu Verfügung: int, double, string, color und weitere.

Es gibt in Qml auch die Möglichkeit eine Art Referenz auf eine andere Variable zu deklarieren.

property alias <name>: <referenz>

Referenziert kann eigentlich alles, sogar Elemente und deren Eigenschaften. Es muss immer die id angegeben werden.

Dafür wollen wir eine neue Qml Datei mit dem Namen Button.qml anlegen. Wir definieren den Namen des Buttons und seine Farbe. Die Eigenschaften die wir definiert haben werden dann von den Kind-Elementen übernommen.

//Button.qml
import QtQuick 2.7
Rectangle {
    id: button
    property string name: "button"
    property alias backgroundColor: button.color
    border.color: Qt.darker(backgroundColor)
    radius: 5
    width: 200
    height: 100
    Text {
        id: buttonText
        anchors.centerIn: parent
        text: parent.name
    }
}

//main.qml
import QtQuick 2.7
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Button {
        backgroundColor: "lightsteelblue"
        name: "unser Button"
    }
}