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
312
AccueilTutorielsC++Références QMLDashboard Smart HomeLeftPane.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 (leftItem)
Gestion du composant (dateItem)
Gestion du composant (dateText)
Gestion du composant (timeText)
Gestion du composant (secondText)
Gestion du composant (ampmText)
Gestion du composant (dayText)
Suite


Introduction


image.png


Gestion du composant (leftItem) 


import QtQuick

Item {
    id: leftItem
    width: 370
    height: parent.height
    anchors.left: parent.left
    ...
}

On démarre la création d'un Item (leftItem).
On définit la largeur du composant (leftItem)
On définit la hauteur composant (leftItem) comme étant identique à la hauteur du composant parent (bgItem).
On définit le coin gauche du composant (bgItem) comme étant fixé au coin gauche du composant parent (bgItem).


Gestion du composant (dateItem) 


Item {
    id: leftItem
    ...
    Item {
        id: dateItem
        height: 150
        width: parent.width
        anchors.top: parent.top
        ...
    }
}

On démarre la création d'un composant (dateItem).
On définit la hauteur du composant (dateItem).
On définit la largeur du composant (dateItem) comme étant identique à la largeur du composant parent (leftItem).
On définit le coin haut du composant (dateItem) comme étant identique au coin haut du composant parent (leftItem).


Gestion du composant (dateText) 


Item {
    id: leftItem
    ...
    Item {
        id: dateItem
        ...
        Text {
        	id: dateText
            text: Qt.formatDate(currentTime, 'yyyy-MM-dd')
            font.pixelSize: 16
            color: textColor
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.leftMargin: 24
            anchors.topMargin: 24
        }
    }
}

On démarre la création du composant (dateText).
On définit le texte du composant (dateText) comme étant la valeur de la propriété (currentTime) convertir en chaîne à partir d'un convertisseur de format date.
On définit la taille de la police du composant (dateText).
On définit la couleur du texte du composant (dateText) comme étant la valeur de la propriété (textColor).
On définit le coin haut du composant (dateText) comme étant identique au coin haut du composant parent (dateItem).
On définit le coin gauche du composant (dateText) comme étant identique au coin gauche du composant parent (dateItem).
On définit la marge gauche du composant (dateText).
On définit la marge haut du composant (dateText).


Gestion du composant (timeText) 


Item {
    id: leftItem
    ...
    Item {
        id: dateItem
        ...
        Text {
            id: timeText
            text: Qt.formatTime(currentTime, 'hh:mm')
            font.pixelSize: 64
            color: textColor
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.leftMargin: 24
            anchors.bottomMargin: 24
        }
    }
}

On démarre la création du composant (timeText).
On définit le texte du composant (timeText) comme étant la valeur de la propriété (currentTime) convertir en chaîne à partir du convertisseur de format de date.
On définit la taille de la police du composant (timeText).
On définit la couleur du texte du composant (timeText) comme étant la valeur de la propriété (textColor).
On définit le coin bas du composant (timeText) comme étant identique au coin bas du composant parent (dateItem).
On définit le coin gauche du composant (timeText) comme étant identique au coin gauche du composant parent (dateItem).
On définit la marge gauche du composant (timeText).
On définit la marge bas du composant (timeText).


Gestion du composant (secondText) 


Item {
    id: leftItem
    ...
    Item {
        id: dateItem
        ...
        Text {
            id: secondText
            width: 50
            text: ':' + Qt.formatTime(currentTime, 'ss')
            font.pixelSize: 24
            color: textColor
            anchors.baseline: timeText.baseline
            anchors.left: timeText.right
        }
    }
}

On démarre la création du composant (secondText).
On définit la largeur du composant (secondText).
On définit le texte du composant (secondText) comme étant la valeur (:) ajoutée à la valeur de la propriété (currentTime) convertir en chaîne à partir du convertisseur de format de date.
On définit la taille de la police du composant (secondText).
On définit la couleur du texte du composant (secondText) comme étant la valeur de la propriété (textColor).
On définit la ligne de base du composant (secondText) comme étant identique à la ligne de base du composant (timeText).
On définit le coin gauche du composant (secondText) comme étant identique au coin droite du composant (timeText).


Gestion du composant (ampmText) 


Item {
    id: leftItem
    ...
    Item {
        id: dateItem
        ...
        Text {
            id: ampmText
            text: Qt.formatTime(currentTime, 'AP')
            font.pixelSize: 16
            color: textColor
            anchors.baseline: timeText.baseline
            anchors.left: secondText.right
            anchors.leftMargin: 8
        }
    }
}

On démarre la création du composant (ampmText).
On définit le texte du composant (ampmText) comme étant la valeur de la propriété (currentTime) convertir en chaîne à partir du convertisseur de format de date.
On définit la taille de la police du composant (ampmText).
On définit la couleur du texte du composant (ampmText) comme étant la valeur de la propriété (textColor).
On définit la ligne de base du composant (secondText) comme étant identique à la ligne de base du composant (timeText).
On définit le coin gauche du composant (secondText) comme étant identique au coin droite du composant (timeText).


Gestion du composant (dayText) 


Item {
    id: leftItem
    ...
    Item {
        id: dateItem
        ...
        Text {
            id: dayText
            text: Qt.formatDate(currentTime, 'ddd')
            font.pixelSize: 16
            color: textColor
            anchors.top: parent.top
            anchors.right: ampmText.right
            anchors.topMargin: 24
        }
    }
}

On démarre la création du composant (dayText).
On définit le texte du composant (dayText) comme étant la valeur de la propriété (currentTime) convertir en chaîne à partir du convertisseur de format de date.
On définit la taille de la police du composant (dayText).
On définit la couleur du texte du composant (dayText) comme étant la valeur de la propriété (textColor).
On définit le coin haut du composant (dayText) comme étant identique au coin haut du composant parent (dateItem).
On définit le coin droite du composant (dayText) comme étant identique au coin droite du composant (ampmText).


Suite


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