QML-Tutorial 1 – Werttypen

Dieses erste Programm ist ein sehr einfaches „Hello World“-Beispiel, das einige grundlegende QML-Konzepte vorstellt. Das Bild unten ist ein Screenshot dieses Programms.

Hier ist der QML-Code für die Anwendung:

import QtQuick

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }
}

Schritt-für-Schritt-Anleitung

Import

Zunächst müssen wir die Typen importieren, die wir für dieses Beispiel benötigen. Die meisten QML-Dateien importieren die in Qt enthaltenen integrierten QML-Typen (wie „ Rectangle “, „ Image “, …) mithilfe von:

import QtQuick

Typ „Rectangle“

Rectangle {
    id: page
    width: 320; height: 480
    color: "lightgray"

Wir deklarieren ein Root-Objekt vom Typ ` Rectangle`. Es ist einer der grundlegenden Bausteine, mit denen Sie eine Anwendung in QML erstellen können. Wir weisen ihm eine ` id ` zu, um später darauf verweisen zu können. In diesem Fall nennen wir es „page“. Außerdem legen wir die Eigenschaften „ width “, „ height “ und „ color “ fest. Der Typ „ Rectangle “ enthält viele weitere Eigenschaften (wie beispielsweise „ x “ und „ y “), diese werden jedoch auf ihren Standardwerten belassen.

Text-Typ

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; font.bold: true
    }

Wir fügen ein Element vom Typ „ Text “ als untergeordnetes Element des übergeordneten „Rectangle“-Elements hinzu, das den Text „Hello world!“ anzeigt.

Die Eigenschaft „ y “ wird verwendet, um den Text vertikal in einem Abstand von 30 Pixeln vom oberen Rand seines übergeordneten Elements zu positionieren.

Die Eigenschaft „ anchors.horizontalCenter “ bezieht sich auf die horizontale Mitte eines Elements. In diesem Fall legen wir fest, dass unser Textelement im Seitenelement horizontal zentriert werden soll (siehe „Ankerbasiertes Layout“).

Die Eigenschaften „ font.pointSize “ und „ font.bold “ beziehen sich auf Schriftarten und verwenden die Punktnotation.

Anzeigen des Beispiels

Um das Ergebnis Ihrer Arbeit anzuzeigen, führen Sie das qml-Tool (im Verzeichnis „ bin “) mit Ihrem Dateinamen als erstem Argument aus. Um beispielsweise das bereitgestellte, fertige Beispiel aus Tutorial 1 vom Installationsort aus auszuführen, würden Sie Folgendes eingeben:

qml tutorials/helloworld/tutorial1.qml