Débuter avec qml

Bonjour le monde #

Une application simple affichant le texte “Hello World” au centre de la fenêtre.

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

Installation #

QML est livré avec une version plus récente du framework d’application multiplateforme [Qt][1]. Vous pouvez trouver la dernière version de Qt dans la [section Téléchargements][2].

Pour créer un nouveau projet QML dans [Qt Creator IDE][3], sélectionnez “Fichier -> Nouveau …” et sous “Applications”, sélectionnez “Qt Quick-Application”. Après avoir cliqué sur “sélectionner”, vous pouvez maintenant nommer et définir le chemin de ce projet. Après avoir cliqué sur “Suivant”, vous pouvez sélectionner les composants que vous souhaitez utiliser. En cas de doute, laissez simplement la valeur par défaut et cliquez sur “Suivant”. Les deux prochaines étapes vous permettront de configurer un kit et un contrôle de source si vous le souhaitez, sinon conservez les paramètres par défaut.

Vous avez maintenant créé une application QML simple et prête à l’emploi.

[1] : https://www.qt.io/ [2] : https://www.qt.io/download-open-source/#section-2 [3] : https://www.qt.io/ide/

Création d’un bouton simple #

Vous pouvez facilement transformer chaque composant en un bouton cliquable à l’aide du composant MouseArea. Le code ci-dessous affiche une fenêtre 360x360 avec un bouton et un texte au centre ; appuyer sur le bouton changera le texte :

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

Afficher une image #

Cet exemple montre l’utilisation la plus simple du composant Image pour afficher une image.

La propriété Image source est un [type d’url][1] qui peut être soit un fichier avec un chemin absolu ou relatif, une URL Internet (http://) ou une [ressource Qt][2] ( qc:/)

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}

[1] : http://doc.qt.io/qt-5/qml-url.html [2] : http://doc.qt.io/qt-5/resources.html

Événement de souris #

Cet exemple montre comment l’événement de souris est utilisé dans 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.")
            }

        }
    }


}