Guide de démarrage rapide d'Qt Widgets Designer

L'utilisation d'Qt Widgets Designer comprend quatre étapes fondamentales :

1. Choisissez votre formulaire et vos objets
2. Disposez les objets sur le formulaire
3. Connectez les signaux aux emplacements
4. Prévisualisez le formulaire

Supposons que vous souhaitiez concevoir un petit widget (voir la capture d'écran ci-dessus) contenant les commandes nécessaires pour manipuler les valeurs de rouge, vert et bleu (RVB) – un type de widget que l'on retrouve partout dans les logiciels de traitement d'images.

Choix d’un formulaire Commencez par sélectionner « Widget » dans la boîte de dialogue « Nouveau formulaire ».

Placer des widgets sur un formulaire Faites glisser trois étiquettes, trois champs de sélection 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 agencer selon la disposition que vous souhaitez leur donner.

Pour vous assurer qu’ils s’affichent exactement de cette manière dans votre programme, vous devez placer ces widgets dans une disposition. Nous allons procéder par groupes de trois. Sélectionnez l’étiquette « RED ». Ensuite, maintenez la touche Ctrl enfoncée tout en sélectionnant la zone de saisie à roue et le curseur correspondants. Dans le menu « Formulaire », sélectionnez « Disposer en grille ».

Répétez cette étape pour les deux autres étiquettes ainsi que pour leurs champs de saisie rotatifs et curseurs correspondants.

L’étape suivante consiste à regrouper ces trois dispositions en une seule disposition principale. La disposition principale est celle du widget de niveau supérieur (dans ce cas, l’ QWidget). Il est important que votre widget de niveau supérieur dispose d’une disposition ; sinon, les widgets de votre fenêtre ne s’adapteront pas lorsque vous redimensionnerez celle-ci. Pour définir la disposition, cliquez avec le bouton droit n’importe où sur votre formulaire, en dehors des trois dispositions distinctes, puis sélectionnez « Disposition horizontale ». Vous pouvez également sélectionner « Disposition en grille » : vous obtiendrez la même disposition (illustrée ci-dessous).

Lorsque vous cliquez sur le curseur et que vous le faites glisser jusqu’à une certaine valeur, vous souhaitez que la zone de saisie affiche la position du curseur. Pour obtenir ce comportement, vous devez connecter le signal valueChanged() du curseur au slot setValue() de la zone de saisie. Vous devez également établir les connexions inverses, par exemple en reliant le signal « valueChanged() » de la zone de saisie à l'emplacement « setValue() » du curseur.

Pour ce faire, vous devez passer en mode « Edit Signals/Slots » (Modifier les signaux/emplacements), soit en appuyant sur la touche F4, soit en sélectionnant « Edit Signals/Slots » dans le menu « Edit » (Modifier).

Connexion des signaux aux slots Cliquez sur le curseur et faites glisser le curseur vers la zone de saisie. La boîte de dialogue « Configurer la connexion », illustrée ci-dessous, s’affiche. Sélectionnez le signal et le slot appropriés, puis cliquez sur OK.

Répétez l’opération (dans l’ordre inverse) : cliquez sur la zone de saisie et faites glisser le curseur vers le curseur, afin de connecter le signal « valueChanged() » de la zone de saisie au slot « setValue() » du curseur.

Vous pouvez vous référer à la capture d'écran ci-dessous pour sélectionner le signal et le slot appropriés.

Maintenant que vous avez correctement connecté les objets pour la composante « RED » du contrôleur RVB, procédez de la même manière pour les composantes « GREEN » et « BLUE ».

Les valeurs RVB étant comprises entre 0 et 255, nous devons limiter la zone de saisie et le curseur à cette plage spécifique.

Configuration des propriétés du widget Cliquez sur la première zone de saisie. Dans l’éditeur de propriétés, vous verrez les propriétés de QSpinBox. Saisissez « 255 » pour la propriété « maximum ». Cliquez ensuite sur le premier curseur vertical ; vous verrez les propriétés de QAbstractSlider. Saisissez également « 255 » pour la propriété « maximum ». Répétez cette procédure pour les autres zones de saisie et curseurs.

Affichez maintenant un aperçu de votre formulaire pour voir à quoi il ressemblerait dans votre application : appuyez sur Ctrl + R ou sélectionnez Aperçu dans le menu Formulaire. Essayez de faire glisser le curseur : la zone de saisie à défilement affichera la même valeur (et inversement). Vous pouvez également le redimensionner pour voir comment les mises en page utilisées pour gérer les widgets enfants s’adaptent aux différentes tailles de fenêtre.