QML : CRÉER UN BOUTON

Comme vous savez Qt ne propose pas un élément QML Bouton c'est pourquoi j'ai décidé de vous montrer comme on peut créer facilement un bouton avec des composants QML de base.

Notre but est de créer un Bouton qu' on peut utiliser dans nos futures projet QML.  

Pour la création de notre bouton on va  utiliser les éléments QML suivants :

1 - Rectangle : Conteneur pour les autres éléments et pour délimiter la zone du bouton.
2 - SystemPalette : Pour utiliser les couleurs standard des applications (couleur des boutons, couleur des textes ) .
3 - Gradient : Pour définir un dégradé.
4 - GradientStop :  Pour définir la couleur du dégradé. 
5 - MouseArea : Met en place une zone d'interaction de la souris.
6 - Text : Pour insérer du texte.

Commencer par créer un nouveau projet QML et vider le contenu du fichier QML créé automatiquement par QtCreator.

Ajouter un nouveau fichier QML à votre projet et  nommer le Bouton.qml enfin vider le contenu de ce fichier.

Notre projet contient maintenant deux fichier QML :

1- nomProjet.qml : fichier principale (main file).
2- Bouton.qml : où on va définir notre bouton.


Dans le fichier Bouton.qml on va commencer par créer un conteneur pour délimiter la zone de notre bouton pour cela on va utiliser l’élément QML rectangle :

Code : QML 

import QtQuick 2.0 Rectangle {     id: container     border.width: 1     smooth: true //pour avoir une meilleure qualité visuelle }

Pour donner à notre bouton un aspect visuel natif on peut utiliser l’élément "SystemPalette" , cet élément nous permet de récupérer les couleurs standard de l'OS : couleur des boutons, couleur des textes ,....

Code : QML 

import QtQuick 2.0 Rectangle {     id: container     border.width: 1     smooth: true //pour avoir une meilleure qualité visuelle     SystemPalette { id: activePalette } }

Pour afficher le texte du bouton on doit insérer l'élément Text dans notre rectangle(container).

Code : QML  

import QtQuick 2.0 Rectangle {     id: container     border.width: 1     smooth: true //pour avoir une meilleure qualité visuelle     SystemPalette { id: activePalette }     Text  {               id : labelle         anchors.centerIn: parent         text : "bouton"         color : activePalette.buttonText   } }

Pour tester notre bouton on doit  l'instancier dans le fichier QML principale(main file),puisqu'on a nommé le fichier qu'on a ajouté 'Bouton.qml' donc le nom de notre nouveau composant est : Bouton.

Remarque :

Chaque code QML peut devenir un composant, en plaçant son code dans le fichier  <Nom>.qml , où om> est le nom du nouveau composant.

Voici le code que vous devez mettre dans le fichier QML principale :

Code : QML  

import QtQuick 2.0 Rectangle {     width: 360     height: 360     Bouton{         width: 100 //largeur du bouton         height: 30 //hauteur du bouton     } }

Si vous exécutez votre code vous devez avoir ce résultat :   

Figure 1 : Bouton (version 1)

Dans le code ci-dessus on a instancié notre bouton comme on fait pour les éléments natifs du QML de là vient la force du QML car on peut créer autant d' éléments QML qu'on veut et c'est facile de les utiliser dans tout les projets QML,il suffit de les placer dans le même répertoire que votre application QML.  

Si tout marche bien vous pouvez passer à l’étape suivante.

Dans cette étape on va ajouter "MouseArea" pour qu'on puisse récupérer l'événement clique de l'utilisateur :

Code : QML 

import QtQuick 2.0 Rectangle {     id: container     border.width: 1     smooth: true //pour avoir une meilleure qualité visuelle     SystemPalette { id: activePalette }     Text  {         id : labelle         anchors.centerIn: parent         text : "bouton"         color : activePalette.buttonText   }     MouseArea {         id: mouseArea         anchors.fill: parent         onClicked: console.log(1)//affiche 1 dans la sortie de l'application     } }

On va essayer de donner à notre Bouton un aspect natif donc on vas utiliser les éléments :

1- Gradient :  pour créer un dégradé 

2- GradientStop :  Pour définir la couleur du dégradé et la position.

Pour les couleurs on les récupère à partir du composant 'activePalette' :

1- activePalette.button : La couleur du bouton.

2- activePalette.light : La couleur claire.

3- activePalette.dark : La couleur sombre.

On doit ajouter deux éléments GradientStop  :

1- le premier pour afficher une couleur claire puis la couleur du bouton lorsque le bouton est pressé.

2- le deuxième pour afficher la couleur du bouton puis une couleur sombre lorsque le bouton est pressé.


Code : QML

Gradient {   GradientStop {     position: 0.0     color: !mouseArea.pressed ? activePalette.light : activePalette.button   }   GradientStop {     position: 1.0     color: !mouseArea.pressed ? activePalette.button : activePalette.dark   } }

On doit affecter ce code à la propriété 'gradient' du rectangle 'container'.

Voici le code depuis le début :

Code :  QML   

import QtQuick 2.0 Rectangle {     id: container     border.width: 1     smooth: true //pour avoir une meilleure qualité visuelle     SystemPalette { id: activePalette }     Text  {         id : labelle         anchors.centerIn: parent         text : "bouton"         color : activePalette.buttonText    }     MouseArea {         id: mouseArea         anchors.fill: parent         onClicked: console.log(1) //affiche 1 dans la sortie de l'application     }     gradient: Gradient {      GradientStop {       position: 0.0       color: !mouseArea.pressed ? activePalette.light : activePalette.button      }      GradientStop {       position: 1.0       color: !mouseArea.pressed ? activePalette.button : activePalette.dark      }     } }

Et puis le résultat :
                                                                               

 Figure 2 : Bouton

 Figure 3 : Bouton pressé

Comme vous voyez on vient de finir l'aspect visuel de notre bouton.

Comme j'ai dit dans le début du tutoriel notre but est de créer un composant réutilisable pour répondre à ce besoin on doit faciliter le paramétrage de notre bouton, donc au lieu de fixer par exemple la taille du bouton dans le fichier de définition du composant (Bouton.qml),on va utiliser des alias pour spécifier par exemple la taille du texte , le text ,... 

Exemple d'instanciation de notre composant bouton :

Code : QML 

Bouton     {            id : button  //id du composant            text : "Bouton"  //texte du bouton            radius : 2  //coins arrondi            width : 100            height : 30            opacity : 0.9 //opacity            fontSize : 12            anchors.centerIn: parent            onClicked:  {               /*ici on peut mettre les instructions qu'ion veut exécuter                 si l'utilisateur clique sur le bouton*/                console.log(1)            }     }

Les alias qu'on doit définir  :

1- 'text'  :  pour qu'on puisse modifier le texte du bouton sans modifier le fichier 'bouton.qml' 

2-  'fontSize': pour qu'on puisse modifier la taille du texte.

Si vous avez remarqué on va pas créer des alias pour radius, width ,height ... 

parce qu'on peut les modifier directement car dans notre cas l'objet racine du  bouton est un rectangle, donc toutes ses propriétés sont modifiables  directement à partir de notre nouveau composant. 

On doit aussi ajouter à notre composant un signale 'clicked' pour qu'on puisse récupérer l’événement du clique.

le code depuis le début :

Code : QML (fichier : bouton.qml)

import QtQuick 2.0 Rectangle {     id: container     property alias text : labelle.text     property alias fontSize : labelle.font.pointSize     signal clicked     border.width: 1     smooth: true //pour avoir unr meilleure qualité visuelle     SystemPalette { id: activePalette }     Text  {         id : labelle         anchors.centerIn: parent         text : "bouton"         color : activePalette.buttonText     }     MouseArea {       id: mouseArea       anchors.fill: parent       onClicked: container.clicked() //on affiche 1     }     gradient: Gradient {      GradientStop {       position: 0.0       color: !mouseArea.pressed ? activePalette.light : activePalette.button      }      GradientStop {       position: 1.0       color: !mouseArea.pressed ? activePalette.button : activePalette.dark      }    } }

Code : QML (fichier QML principal)

import QtQuick 2.0 Rectangle {     width: 360     height: 360     Bouton     {            id : button1  //id du composant            text : "Bouton 1"  //texte du bouton            radius : 2  //coins arrondi            width : 100            height : 30            opacity : 0.9 //opacity            fontSize : 12            x : 10            y : 10            onClicked:  {               /*ici on peut mettre les instructions qu'ion veut exécuter                 si l'utilisateur clique sur le bouton                 dans notre cas on se limite à afficher 1 dans le log               */                console.log(1)            }     }     Bouton     {            id : button2  //id du composant            text : "Bouton 2"  //texte du bouton            radius : 2  //coins arrondi            width : 100            height : 30            opacity : 0.9 //opacity            fontSize : 12            x : 150            y : 10            onClicked:  {               /*ici on peut mettre les instructions qu'ion veut exécuter                 si l'utilisateur clique sur le bouton                 dans notre cas on se limite à afficher 2 dans le log               */                console.log(2)            }     } }

Comme vous voyez on peut instancier autant de boutons qu'on veut et on peut modifier leurs propriétés sans avoir à modifier le fichier du définition de l’élément (Bouton.qml). 

Résultat finale :

Figure 4 : Bouton