IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Viadeo Twitter Facebook Share on Google+   
Logo Documentation Qt ·  Page d'accueil  ·  Toutes les classes  ·  Toutes les fonctions  ·  Vues d'ensemble  · 

Le tutoriel QML, première partie : types de base

Ce premier programme est un exemple d'un « Hello world » très simple qui introduit quelques concepts basiques du QML. L'image ci-dessous est une capture d'écran du programme.

image

Voici le code QML pour ce programme :

 import QtQuick 1.0
 
 Rectangle {
     id: page
     width: 500; height: 200
     color: "lightgray"
 
     Text {
         id: helloText
         text: "Hello world!"
         y: 30
         anchors.horizontalCenter: page.horizontalCenter
         font.pointSize: 24; font.bold: true
     }
 }

Explications

import

Premièrement, on doit importer les types utilisés dans cet exemple. La plupart des fichiers QML vont importer les types de base dans QML (tels que Rectangle, Image...) venant de Qt, avec :

 import QtQuick 1.0

Élément Rectangle

 Rectangle {
     id: page
     width: 500; height: 200
     color: "lightgray"

On déclare un élément racine de type Rectangle. Il fait partie des blocs basiques utilisables pour créer une application QML. On lui donne un identifiant id pour y faire référence plus tard. Dans ce cas, on l'appelle « page ». On a aussi défini les propriétés de largeur width, de hauteur height et de couleur color. L'élément Rectangle possède de nombreuses propriétés (tel que x et y) mais on laisse leur valeur par défaut.

Élément Text

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

On ajoute un élément Text en enfant de l'élément racine Rectangle qui affiche le texte « Hello world! ».

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

La propriété anchors.horizontalCenter réfère au centre horizontal d'un élément. Dans ce cas, on spécifie que l'élément de texte doit être centré horizontalement dans l'élément page (voir layout basé sur les ancres).

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

Visualiser l'exemple

Pour visualiser l'exemple créé, exécuter l'outil QML Viewer (situé dans le répertoire bin) avec le nom du fichier QML comme premier argument. Par exemple, pour exécuter l'exemple du premier tutoriel à partir du répertoire d'installation, taper :

 bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/tutorial1.qml

[ Précédent : le tutoriel QML ] [ Suivant : le tutoriel QML, partie 2 : composants QML ]

Remerciements

Merci à Alexandre Laurent pour la traduction, ainsi qu'à Thibaut Cuvelier, Jonathan Courtois et Jacques Thery pour leur relecture !

Cette page est une traduction d'une page de la documentation de Qt, écrite par Nokia Corporation and/or its subsidiary(-ies). Les éventuels problèmes résultant d'une mauvaise traduction ne sont pas imputables à Nokia. Qt 4.7
Copyright © 2021 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon, vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.
Vous avez déniché une erreur, une redirection cassée ou tout autre problème, quel qu'il soit ? Ou bien vous désirez participer à ce projet de traduction ? N'hésitez pas à nous contacter ou par MP !