QML-Tutorial 1 - Wertetypen

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
    }
}

Durchgang

Importieren

Zunächst müssen wir die Typen importieren, die wir für dieses Beispiel benötigen. Die meisten QML-Dateien importieren die eingebauten QML-Typen (wie Rectangle, Image, ...), die mit Qt geliefert werden, mit:

import QtQuick

Rectangle Typ

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

Wir deklarieren ein Root-Objekt vom Typ Rectangle. Es ist einer der grundlegenden Bausteine, die Sie verwenden können, um eine Anwendung in QML zu erstellen. Wir geben ihm den Namen id, um später auf es verweisen zu können. In diesem Fall nennen wir es "Seite". Wir legen auch die Eigenschaften width, height und color fest. Der Typ Rectangle enthält viele andere Eigenschaften (z. B. x und y), aber diese werden auf ihren Standardwerten belassen.

Texttyp

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

Wir fügen einen Typ Text als untergeordnetes Element des Stammtyps Rechteck hinzu, der den Text "Hello world!" anzeigt.

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

Die Eigenschaft anchors.horizontalCenter bezieht sich auf die horizontale Mitte eines Typs. In diesem Fall geben wir an, dass unser Texttyp horizontal im Seitenelement zentriert werden soll (siehe Anker-basiertes Layout).

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

Betrachten des Beispiels

Um zu sehen, was Sie erstellt haben, führen Sie das Tool qml (im Verzeichnis bin ) mit dem Dateinamen als erstem Argument aus. Um zum Beispiel das fertige Beispiel aus Tutorial 1 vom Installationsort auszuführen, geben Sie ein:

qml tutorials/helloworld/tutorial1.qml