Tutoriel QML 1 - Types de valeurs

Ce premier programme est un exemple « Hello world » très simple qui présente 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
    }
}

Démonstration

Import

Tout d'abord, nous devons importer les types dont nous avons besoin pour cet exemple. La plupart des fichiers QML importent les types QML intégrés (tels que Rectangle, Image, etc.) fournis avec Qt, à l'aide de :

import QtQuick

Type Rectangle

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

Nous déclarons un objet racine de type ` Rectangle`. Il s'agit de l'un des éléments de base que vous pouvez utiliser pour créer une application en QML. Nous lui attribuons un ` id ` afin de pouvoir y faire référence 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 conservent leurs valeurs par défaut.

Type « Text »

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

Nous ajoutons un élément de type « Text » en tant qu'enfant de l'élément racine de type « Rectangle » qui affiche le texte « Hello world ! ».

La propriété « y » permet de positionner le texte verticalement à 30 pixels du haut de son élément parent.

La propriété ` anchors.horizontalCenter ` fait référence au centre horizontal d’un élément de type `text`. Dans ce cas, nous spécifions que notre élément de type « texte » doit être centré horizontalement dans l’élément `page` (voir Mise en page basée sur des ancrages).

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

Affichage de l’exemple

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

qml tutorials/helloworld/tutorial1.qml