Große Programme zu schreiben kann sehr schnell unübersichtlich werden, wenn man den kompletten Code in einer Datei hat. In diesem Tutorial möchte ich zeigen wie man seinen Quellcode organisiert.

Nehmen wir dazu den Quellcode aus dem vorherigen Tutorial und räumen ein wenig auf:

import QtQuick 2.7
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
}

Nun wollen wir einen Hintergrund für unseres Programm erstellen. Dazu erstellen wir eine neue QML Datei mit dem Namen Hintergrund. Auf den Ordner mit dem „/“ Zeichen mit der rechten Maustaste klicken. Qt→QML Datei(QtQuick 2) auswählen. Dann haben wir 2 Dateien in unserem Ordner.

Wir möchten ein blaues Rechteck haben deshalb ändern wir den Quellcode der Hintergrund.qml Datei.

import QtQuick 2.7
Rectangle {
    id: hintergrund
    width: 100
    height: 100
    color: "blue"
}

In der main.qml wollen wir diesen Hintergrund benutzen. Dazu schreiben wir den Namen der Datei ohne die Dateiendung in unser Hauptscript rein.

import QtQuick 2.7
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    Hintergrund{
 
    }
}

So lässt sich jedes Element wiederverwenden. Man kann sogar die Eigenschaften der Elemente überschreiben oder Eigenschaften des Elementes verwenden die man vorher nicht benutzt hat.

Hintergrund{
        anchors.fill: parent
        color: "red"
    }

Wenn wir das Programm ausführen, bekommen wir folgendes zu sehen.

Die Farbe blau haben wir durch rot ersetzt, und anchors.fill: parent bewirkt, dass das ganze Fenster mit dem Hintergrund ausgefüllt wird, dadurch werden die Eigenschaften Höhe und Breite überschrieben.