Démarrer avec le QML de Qt

Posté par seiyar81 le 9 avril 2010 | Laisser un commentaire (0)
Démarer avec le QML de Qt

J’ai déjà présenté ce qu’est QML dans un article passé, ce langage à base de syntaxe Javascript qui permet la création d’interface très simplement.

Il est assez aisé de suivre la documentation pour comprendre le fonctionnement de QML, d’autant plus que plusieurs exemples sont fournis avec la version 4.7 de Qt.

Cependant un petit exemple commenté peut toujours aider :

import Qt 4.7

Item {
    // Taille de la fenêtre
    width: 320; height: 240;

    Rectangle {
        id: rectangle;
        // Dimensions du rectangle pour prendre toute la fenêtre
        width: 320; height: 240; 
        // Couleur de fond du rectangle
        color: "lightgray";
        // Les ancres permettent de fixer le rectangle aux coins de l'écran
        anchors.bottom: screen.bottom; anchors.top: screen.top;

        Image {
            // Une image dans le dossier du projet
            id: loading; source: "logo.png"; transformOrigin: "Center";
            rotation: rotationA;
        }
        // Une première transformation : translation de 0 à 180 sur l'axe X et lance la rotation C une fois terminée
        rotation: NumberAnimation {
            target: loading; id: rotationA; property: "x";
            from: 0; to: 180; 
            onCompleted: rotationC.start();
        }
        // La même qu'avant mais dans l'autre sens de 180 à 0
        rotation: NumberAnimation {
            target: loading; id: rotationB; property: "x";
            from: 180; to: 0; //running: loading.visible == true;
            onCompleted: rotationD.start();
        }
        // Une rotation avec comme centre, le centre de l'image de 180° à partir de 180
        rotation: RotationAnimation {
            target: loading; id: rotationC; from: 180; to: 360;
            onCompleted: rotationB.start()
        }
        // La même qu'avant mais à partir de 0
        rotation: RotationAnimation {
            target: loading; id: rotationD; from: 0; to: 180;
            onCompleted: rotationA.start()
        }
    }
}

Vous pouvez télécharger l’exemple ci dessous.

  TestQML.zip (4,9 KiB, 910 hits)

Pour l’exécuter, il vous faudra compiler le projet, soit en ligne de commande :

qml chemin_vers_le_fichier_qml

soit avec un IDE comme QtCreator par exemple.

C’est un exemple très basique mais qui peut servir de base pour s’amuser avec QML.

Catégorie: C++, Qt | Laisser un commentaire (0)


Laissez un commentaire