qml Zelfstudie
Aan de slag met qml

Opmerkingen

versies

Installatie

QML wordt geleverd met een nieuwere versie van Qt . U kunt de nieuwste versie van Qt vinden in het gedeelte Downloads .

Als u een nieuw QML-project in de Qt Creator IDE wilt maken , selecteert u "Bestand -> Nieuw ..." en selecteert u onder "Toepassingen" "Qt Quick-Application". Nadat u op "selecteren" hebt geklikt, kunt u nu een naam opgeven en het pad voor dit project instellen. Nadat u op "Volgende" hebt gedrukt, kunt u selecteren welke componenten u wilt gebruiken. Als u niet zeker bent, verlaat u de standaard en klikt u op "Volgende". Met de volgende twee stappen kunt u desgewenst een kit en bronbeheer instellen, anders de standaardinstellingen behouden.

U hebt nu een eenvoudige en gebruiksklare QML-applicatie gemaakt.

Hallo Wereld

Een eenvoudige applicatie met de tekst "Hallo wereld" in het midden van het venster.

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

Een eenvoudige knop maken

U kunt elke component eenvoudig omzetten in een klikbare knop met behulp van de MouseArea-component. De onderstaande code geeft een 360x360-venster weer met een knop en een tekst in het midden; als u op de knop drukt, wordt de tekst gewijzigd:

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

Geef een afbeelding weer

Dit voorbeeld toont het eenvoudigste gebruik van de component Afbeelding om een afbeelding weer te geven.

De eigenschap source afbeelding is een URL-type dat een bestand met een absoluut of relatief pad, een internet-URL ( http:// ) of een Qt-bron ( qrc:/ ) kan zijn

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}

Muis evenement

Dit voorbeeld laat zien hoe muisgebeurtenis wordt gebruikt in QML.

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.")
            }

        }
    }


}