Logs
Consultez les logs.
OK
Liste des données
Consultez la liste des données.
OK
Loading...
Formulaire
Saisissez vos données.
Enregistrer
Annuler

Références QML

Vues
288
AccueilTutorielsC++Références QMLDashboard Smart HomeMain.qml
Tableau de bord pour maison intelligente

Vous souhaitez réaliser des applications graphiques hautes performances en C++ avec la bibliothèque graphique Qt fournissant le langage QML capable d'exploiter la puissance des processeurs graphiques GPU afin de bénéficier de l'accélération matérielle pour créer des interfaces graphiques fluides multiplateformes orientées bureau (Windows, Linux, Mac OS) ou mobile (Android, iOS).

Introduction
Gestion du composant (window)
Gestion du composant (bgRect)
Gestion des propriétés (bgGradient)
Gestion du composant (bgItem)
Gestion de la propriété (textColor)
Gestion de la propriété (currentTime)
Gestion du composant (dateTimer)
Suite


Introduction


image.png

(1) On crée un composant (Window) pour définir la fenêtre principale.
(2) On crée un composant (Rectangle) pour définir le fond d'écran.
(3) On crée un composant (Item) pour définir un cadre avec une marge.
(4) On crée un composant (LeftPane) pour définir la zone de gauche.
(5) On crée un composant (MiddlePane) pour définir la zone du milieu.
(6) On crée un composant (RightPane) pour définir la zone de droite. 


Gestion du composant (window) 


import QtQuick

Window {
    id: window
    width: 1024
    height: 768
    visible: true
    title: qsTr("ReadyQML")
    ...
}

On démarre la création du composant (window).
On définit la largeur du composant (window).
On définit la hauteur du composant (window).
On active la visibilité du composant (window).
On définit le titre du composant (window).


Gestion du composant (bgRect) 


Window {
    id: window
    ...
    Rectangle {
        id: bgRect
        anchors.fill: parent
        gradient: Gradient {
            orientation: Gradient.Horizontal
            GradientStop { position: 0.0; color: bgGradientStart }
            GradientStop { position: 1.0; color: bgGradientStop }
        }
        ...
    }
}

On démarre la création du composant (bgRect).
On remplit le composant (bgRect) dans le composant (window).
On démarre la création du gradient de couleur dans le composant (bgRect).
On définit l'orientation du gradient (Horizontal).
On définit la couleur du premier point (0.0) comme étant la valeur de la propriété (bgGradientStart).
On définit la couleur du deuxième point (1.0) comme étant la valeur de la propriété (bgGradientStop).


Gestion des propriétés (bgGradient) 


Window {
    id: window
    ...
    property string bgGradientStart: '#0d8bfd'
    property string bgGradientStop: '#866aaf'
}

On initialise la propriété (bgGradientStart).
On initialise la propriété (bgGradientStop).


Gestion du composant (bgItem) 


Window {
    id: window
    ...
    Rectangle {
        id: bg
        ...
        Item {
            id: bgItem
            anchors.fill: parent
            anchors.margins: 76.4

            LeftPane { id: leftItem }
            MiddlePane { id: middleItem }
            RightPane { id: rightItem }
        }
    }
}

On démarre la création du composant (bgItem).
On remplit le composant (bgItem) dans le composant (bgRect).
On ajoute une marge autour du composant (bgItem).
On définit le composant QML (leftItem).
On définit le composant QML (middleItem).
On définit le composant QML (rightItem).


Gestion de la propriété (textColor) 


Window {
    id: window
    ...
    property string textColor: '#d9d9d9'
}

On initialise la propriété (textColor).


Gestion de la propriété (currentTime) 


Window {
    id: window
    ...
    property var currentTime: new Date()
}

On initialise la propriété (currentTime) comme étant la date courante.


Gestion du composant (dateTimer) 


Window {
    id: window
    ...
    Timer {
        id: dateTimer
        interval: 1000
        repeat: true
        running: true
        triggeredOnStart: true
        onTriggered: {
            currentTime = new Date()
            ...
        }
    }
}

On démarre la création du composant (dateTimer).
On définit l'intervalle de temps du composant (dateTimer) en millisecondes.
On indique que le composant (dateTimer) sera exécuté de manière répétée.
On démarre l'exécution du composant (dateTimer).
On déclenche immédiatement le composant (dateTimer).
On démarre le gestion du déclenchement du composant (dateTimer).
On met à jour la propriété (currentTime) comme étant la date courante.


Suite


Gestion du composant QML (Main.qml)
Gestion du programme principal C++ (main.cpp)
Tableau de bord pour maison intelligente