qml Tutorial
Erste Schritte mit qml

Bemerkungen

Versionen

Installation

QML enthält eine neuere Version des plattformübergreifenden Anwendungsframeworks Qt . Die neueste Version von Qt finden Sie im Bereich Downloads .

Um ein neues QML-Projekt in der Qt Creator-IDE zu erstellen, wählen Sie "Datei -> Neu ..." und unter "Anwendungen" die Option "Qt Quick-Application". Nachdem Sie auf "Auswählen" geklickt haben, können Sie nun den Pfad für dieses Projekt angeben und festlegen. Wenn Sie auf "Weiter" klicken, können Sie auswählen, welche Komponenten Sie verwenden möchten. Wenn Sie sich nicht sicher sind, lassen Sie die Standardeinstellung und klicken Sie auf "Weiter". Mit den beiden nächsten Schritten können Sie ggf. ein Kit und eine Quellcodeverwaltung einrichten. Andernfalls behalten Sie die Standardeinstellungen bei.

Sie haben jetzt eine einfache und einsatzbereite QML-Anwendung erstellt.

Hallo Welt

Eine einfache Anwendung mit dem Text "Hello World" in der Mitte des Fensters.

import QtQuick 2.3
import QtQuick.Window 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World") //The method qsTr() is used for translations from one language to other.

    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
}

Eine einfache Schaltfläche erstellen

Mit der MouseArea-Komponente können Sie jede Komponente in eine anklickbare Schaltfläche umwandeln. Der folgende Code zeigt ein 360x360-Fenster mit einer Schaltfläche und einem Text in der Mitte. Durch Drücken der Taste wird der Text geändert:

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        id: button

        width: 100
        height: 30
        color: "red"
        radius: 5     // Let's round the rectangle's corner a bit, so it resembles more a button
        anchors.centerIn: parent

        Text {
            id: buttonText
            text: qsTr("Button")
            color: "white"
            anchors.centerIn: parent
        }

        MouseArea {
            // We make the MouseArea as big as its parent, i.e. the rectangle. So pressing anywhere on the button will trigger the event
            anchors.fill: parent

            // Exploit the built-in "clicked" signal of the MouseArea component to do something when the MouseArea is clicked.
            // Note that the code associated to the signal is plain JavaScript. We can reference any QML objects by using their IDs
            onClicked: {
                buttonText.text = qsTr("Clicked");
                buttonText.color = "black";
            }
        }
    }
}

Zeigen Sie ein Bild an

Dieses Beispiel zeigt die einfachste Verwendung der Image-Komponente zum Anzeigen eines Bildes.

Die Image- source ist ein URL-Typ , bei dem es sich um eine Datei mit einem absoluten oder relativen Pfad, einer Internet-URL ( http:// ) oder einer Qt-Ressource ( qrc:/ ) handeln kann.

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}

Mausereignis

Dieses Beispiel zeigt, wie Mausereignisse in QML verwendet werden.

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    Rectangle {
        anchors.fill: parent
        width: 120; height: 240
        color: "#4B7A4A"

        MouseArea {
            anchors.fill: parent // set mouse area (i.e. covering the entire rectangle.)
            acceptedButtons:  Qt.AllButtons
            onClicked: {
                // print to console mouse location
                console.log("Mouse Clicked.")
                console.log("Mouse Location: <",mouseX,",",mouseY,">")

                //change Rectangle color
                if ( mouse.button === Qt.RightButton )
                    parent.color = 'blue'
                if ( mouse.button === Qt.LeftButton )
                    parent.color = 'red'
                if ( mouse.button === Qt.MiddleButton )
                    parent.color = 'yellow'
            }
            onReleased: {
                // print to console
                console.log("Mouse Released.")
            }
            onDoubleClicked: {
                // print to console
                console.log("Mouse Double Clicked.")
            }

        }
    }


}