Logs
Consultez les logs.
OK
Liste des données
Consultez la liste des données.
OK
Loading...
Formulaire
Saisissez vos données.
Enregistrer
Annuler
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
(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.