Tutoriel QML 1 - Types de valeurs

Ce premier programme est un exemple très simple de "Hello world" qui introduit quelques concepts de base de QML. L'image ci-dessous est une capture d'écran de ce programme.

Voici le code QML de l'application :

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

Cheminement

Importation

Tout d'abord, nous devons importer les types dont nous avons besoin pour cet exemple. La plupart des fichiers QML importeront les types QML intégrés (comme Rectangle, Image, ...) qui sont fournis avec Qt, en utilisant :

import QtQuick

Type Rectangle

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

Nous déclarons un objet racine de type Rectangle. C'est l'un des éléments de base que vous pouvez utiliser pour créer une application en QML. Nous lui donnons un id pour pouvoir nous y référer ultérieurement. Dans ce cas, nous l'appelons "page". Nous définissons également les propriétés width, height et color. Le type Rectangle contient de nombreuses autres propriétés (telles que x et y), mais celles-ci sont laissées à leurs valeurs par défaut.

Type de texte

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

Nous ajoutons un type Text en tant qu'enfant du type Rectangle racine qui affiche le texte "Hello world !".

La propriété y est utilisée pour positionner le texte verticalement à 30 pixels du haut de son parent.

La propriété anchors.horizontalCenter fait référence au centre horizontal d'un type. Dans ce cas, nous spécifions que notre type de texte doit être centré horizontalement dans l'élément de la page (voir Anchor-Based Layout).

Les propriétés font.pointSize et font.bold sont liées aux polices de caractères et utilisent la notation par points.

Visualisation de l'exemple

Pour visualiser ce que vous avez créé, exécutez l'outil qml (situé dans le répertoire bin ) avec votre nom de fichier comme premier argument. Par exemple, pour exécuter l'exemple Tutoriel 1 complété fourni à partir de l'emplacement d'installation, vous devez taper :

qml tutorials/helloworld/tutorial1.qml