Démarrage rapide de l'utilisation de Qt Widgets Designer

L'utilisation de Qt Widgets Designer comporte quatre étapes de base :

1. Choisissez votre formulaire et vos objets
2. Disposer les objets sur le formulaire
3. Connecter les signaux aux emplacements
4. Prévisualiser le formulaire

Supposons que vous souhaitiez concevoir un petit widget (voir la capture d'écran ci-dessus) contenant les contrôles nécessaires pour manipuler les valeurs Rouge, Vert et Bleu (RVB) - un type de widget que l'on peut voir partout dans les programmes de manipulation d'images.

Choix d'un formulaire Vous commencez par choisir Widget dans la boîte de dialogue Nouveau formulaire.

Placement des widgets dans un formulaire Faites glisser trois étiquettes, trois boîtes de dialogue et trois curseurs verticaux sur votre formulaire. Pour modifier le texte par défaut d'une étiquette, il suffit de double-cliquer dessus. Vous pouvez les disposer comme vous le souhaitez.

Pour qu'ils soient disposés exactement comme cela dans votre programme, vous devez placer ces widgets dans une mise en page. Nous le ferons par groupes de trois. Sélectionnez l'étiquette "RED". Ensuite, maintenez la touche Ctrl enfoncée pendant que vous sélectionnez la boîte à boutons et le curseur correspondants. Dans le menu Form, sélectionnez Lay Out in a Grid.

Répétez l'opération pour les deux autres étiquettes, ainsi que pour les cases et les curseurs correspondants.

L'étape suivante consiste à combiner les trois présentations en une présentation principale. La présentation principale est celle du widget de premier niveau (dans ce cas, le QWidget). Il est important que votre widget de premier niveau ait une disposition ; sinon, les widgets de votre fenêtre ne se redimensionneront pas lorsque votre fenêtre sera redimensionnée. Pour définir la disposition, cliquez avec le bouton droit de la souris n'importe où sur votre formulaire, en dehors des trois dispositions distinctes, et sélectionnez Disposer horizontalement. Vous pouvez également sélectionner Disposer dans une grille, ce qui vous permettra de conserver la même disposition (voir ci-dessous).

Lorsque vous cliquez sur le curseur et que vous le faites glisser jusqu'à une certaine valeur, vous souhaitez que la boîte de rotation affiche la position du curseur. Pour ce faire, vous devez connecter le signal valueChanged() du curseur à l'emplacement setValue() de la spin box. Vous devez également effectuer les connexions inverses, c'est-à-dire connecter le signal valueChanged() de la spin box à l'emplacement setValue() du curseur.

Pour ce faire, vous devez passer en mode Édition des signaux/emplacements, soit en appuyant sur F4, soit en sélectionnant Édition des signaux/emplacements dans le menu Édition.

Connexion des signaux aux emplacements Cliquez sur le curseur et déplacez le curseur vers la boîte à outils. La boîte de dialogue Configurer la connexion, illustrée ci-dessous, s'affiche. Sélectionnez le signal et l'emplacement corrects et cliquez sur OK.

Répétez l'étape (dans l'ordre inverse), en cliquant sur la boîte à boutons et en faisant glisser le curseur vers le curseur, pour connecter le signal valueChanged() de la boîte à boutons à l'emplacement setValue() du curseur.

Vous pouvez utiliser la capture d'écran ci-dessous comme guide pour sélectionner le signal et l'emplacement corrects.

Maintenant que vous avez réussi à connecter les objets de la composante "ROUGE" du contrôleur RVB, faites de même pour les composantes "VERTE" et "BLEUE".

Les valeurs RVB étant comprises entre 0 et 255, nous devons limiter la boîte à boutons et le curseur à cette plage particulière.

Définition des propriétés du widget Cliquez sur la première boîte tournante. Dans l'éditeur de propriétés, vous verrez les propriétés de QSpinBox. Saisissez "255" pour la propriété maximum. Ensuite, cliquez sur le premier curseur vertical, vous verrez les propriétés de QAbstractSlider. Saisissez également "255" pour la propriété maximum. Répétez ce processus pour les autres boîtes à boutons et curseurs.

Nous allons maintenant prévisualiser votre formulaire pour voir à quoi il ressemblerait dans votre application - appuyez sur Ctrl + R ou sélectionnez Prévisualiser dans le menu Formulaire. Essayez de faire glisser le curseur - la boîte à boutons reflètera également sa valeur (et vice versa). Vous pouvez également le redimensionner pour voir comment les dispositions utilisées pour gérer les widgets enfants réagissent aux différentes tailles de fenêtre.