qmlDémarrer avec qml

Remarques

Versions

Installation

QML est livré avec une version plus récente de l'infrastructure d'application multiplate-forme Qt . Vous pouvez trouver la version la plus récente de Qt dans la section Téléchargements .

Pour créer un nouveau projet QML dans l' EDI de Qt Creator , sélectionnez "Fichier -> Nouveau ..." et sous "Applications", sélectionnez "Application rapide Qt". Après avoir cliqué sur "sélectionner", vous pouvez maintenant nommer et définir le chemin pour 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 étapes suivantes 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.

Bonjour le monde

Une application simple montrant 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
    }
}

Créer un simple bouton

Vous pouvez facilement transformer chaque composant dans 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; En appuyant sur le bouton, le texte change:

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é source Image est un type d'URL qui peut être un fichier avec un chemin absolu ou relatif, une URL Internet ( http:// ) ou une ressource Qt ( qrc:/ )

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}

Événement 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.")
            }

        }
    }


}