Mise en page de vos interfaces graphiques avec Qt Designer

Lors de la mise en page de vos interfaces graphiques Qt, il peut être assez délicat de placer chaque widget à la bonne position sur vos formulaires. Heureusement, Qt offre un ensemble de gestionnaires de mise en page qui simplifie le processus de positionnement des widgets et vous permettra de créer facilement tout type de mise en page. Pour disposer le widget dans un formulaire, vous pouvez tout créer en code, ou vous pouvez créer votre mise en page avec Qt Designer. Dans ce tutoriel, vous apprendrez à utiliser les mises en page de Qt avec Qt Designer pour construire des interfaces graphiques complexes pour vos applications.

En outre, nous allons créer un exemple de dialogue en utilisant plusieurs widgets avec une mise en page cohérente pour renforcer vos connaissances et tout mettre ensemble dans un dialogue entièrement fonctionnel comme vous le feriez dans une application du monde réel.

Utiliser les mises en page avec Qt Designer

Qt Designer est l’outil Qt pour concevoir et créer des interfaces graphiques (GUI) pour les applications de bureau. Avec Qt Designer, vous pouvez créer des fenêtres, des boîtes de dialogue et des formulaires. Il vous permet d’ajouter différents types de widgets pour créer vos GUI en utilisant des formulaires à l’écran et une interface basée sur le glisser-déposer.

L’interface principale de Qt Designer se présente comme suit –

Qt Designer – Interface principale

Qt Designer a une interface claire et conviviale qui vous permet de créer n’importe quel type de GUI en glissant le widget sur un formulaire vide. Après avoir placé tous les widgets sur votre formulaire, vous devez les placer dans une disposition cohérente. Cela garantira que tous vos widgets seront affichés et redimensionnés correctement lorsque le formulaire sera prévisualisé ou utilisé dans une application.

Les gestionnaires de mise en page de Qt sont des conteneurs structurés qui organisent automatiquement les widgets enfants en s’assurant qu’ils font bon usage de l’espace disponible. Placer des widgets dans un gestionnaire de mise en page les dispose automatiquement selon les règles définies. L’une des fonctionnalités les plus utiles de Qt Designer est la possibilité de glisser et déposer des hiérarchies de gestionnaires de mise en page pour disposer les widgets dans des interfaces propres et fonctionnelles.

Dans Qt Designer, vous pouvez créer des objets de disposition en appliquant une disposition à un groupe de widgets existants. Bien qu’il soit possible de faire glisser des mises en page sur un formulaire, puis de faire glisser des widgets dans les mises en page, cela peut être un peu fastidieux. La meilleure pratique consiste plutôt à faire glisser tous les widgets et espaceurs dont vous avez besoin sur le formulaire, puis à sélectionner les widgets et espaceurs associés et à leur appliquer les mises en page. Utilisez les étapes suivantes –

1. Glissez et déposez les widgets sur le formulaire en essayant de les placer près de leur position souhaitée
2. Sélectionnez les widgets qui doivent être gérés avec une disposition donnée, en maintenant la touche Ctrl et en cliquant sur eux
3. Appliquez la disposition appropriée (horizontale, verticale, grille ou formulaire) en utilisant la barre d’outils de Qt Designer, le menu principal, ou le menu contextuel du formulaire

Avant de vous lancer dans un exemple, jetez un coup d’œil aux options liées à la mise en page que Qt Designer offre –

1. Utiliser les options de mise en page sur la barre d’outils principale
2. Utiliser les options de mise en page sur le menu principal
3. Utiliser les options de mise en page sur le menu contextuel du formulaire

La façon la plus accessible de créer des mises en page est d’utiliser la section de mise en page de la barre d’outils principale de Qt Designer. Cette section se présente comme suit –

Qt Designer – Barre d’outils de mise en page

De gauche à droite, vous trouverez les boutons suivants –

• Lay Out Horizontally arrange les widgets sélectionnés dans une disposition horizontale les uns à côté des autres (combinaison de touches, Ctrl+1). Cette option utilise un objet standard QHBoxLayout
• Lay Out Verticalement dispose les widgets sélectionnés dans une disposition verticale, les uns en dessous des autres (combinaison de touches, Ctrl+2). Cette option utilise un objet QVBoxLayout standard
• Disposer horizontalement dans un séparateur dispose les widgets horizontalement à l’aide d’un séparateur (combinaison de touches, Ctrl+3)
• Disposer verticalement dans un séparateur dispose les widgets verticalement à l’aide d’un séparateur (combinaison de touches, Ctrl+4)
• Disposer dans une grille dispose les widgets dans une grille de type tableau (lignes et colonnes). Par défaut, chaque widget occupe une cellule de la grille, mais vous pouvez modifier ce comportement et faire en sorte que les widgets s’étendent sur plusieurs cellules (combinaison de touches, Ctrl+5). Cette option utilise un objet QGridLayout standard
• Mise en page dans une mise en page de formulaire dispose les widgets sélectionnés dans une mise en page à deux colonnes. La colonne de gauche est généralement destinée aux étiquettes demandant certaines informations et la colonne de droite comprend des widgets permettant d’entrer, de modifier ou d’afficher ces informations (combinaison de touches, Ctrl+6)
• Break Layout cette touche vous permet de freiner une disposition existante. Une fois que les widgets sont disposés dans une disposition, vous ne pouvez pas les déplacer et les redimensionner individuellement, car leur géométrie est contrôlée par la disposition. Pour modifier les widgets individuels, vous devrez briser la disposition et la refaire plus tard (combinaison de touches Ctrl+0)
• Ajuster la taille ajuste la taille de la disposition pour accueillir les widgets contenus et pour s’assurer que chacun a suffisamment d’espace pour être visible (combinaison de touches Ctrl+J)

Ces mêmes options liées à la disposition sont également disponibles par le menu principal de Qt Designer sous le menu Form et par le menu contextuel du formulaire, donc vous pouvez choisir celle que vous préférez.

Maintenant que la théorie est passée, nous pouvons mettre ces mises en page en pratique. Dans les prochaines sections, nous utiliserons Qt Designer pour disposer les widgets sur nos formulaires et construire des interfaces graphiques belles et élégantes pour vos applications de bureau. Mais avant de commencer à expérimenter avec les différents gestionnaires de mise en page que Qt offre, nous allons d’abord créer un widget personnalisé pour visualiser les mises en page au fur et à mesure que nous parcourons ce tutoriel.

Le fichier .ui complété peut être téléchargé ci-dessous si vous souhaitez sauter cette étape.

layout-labels.ui

Allumez votre Qt Designer, puis exécutez les étapes suivantes –

1. Sélectionnez Widget à l’onglet templates/forms du dialogue New Form. Cela créera un nouveau formulaire vide sur lequel travailler.
2. Enregistrez votre formulaire sous le nom de layout-labels.ui.
3. Recherchez un widget Label sur le Widget Box et faites-le glisser sur le formulaire.
4. Allez sur le Property Editor et définissez la propriété text sur 0.
5. Ouvrez le dialogue Text Edit et définissez la couleur du texte sur blanc. Définissez la taille de la police à 20 points et justifiez le texte. Appuyez sur OK pour appliquer les modifications.
6. Allez au Property Editor et définissez la propriété autoFillBackground à True en cochant la case.
7. Recherchez la propriété palette et ouvrez le dialogue Edit Palette. Utilisez l’option Quick pour définir la couleur à rouge.

Si vous vous sentez perdu, jetez un coup d’œil au screencast suivant pour voir les étapes en action –

Dans cet exemple, vous créez une nouvelle fenêtre basée sur le modèle Widget. Ensuite, vous ajoutez une étiquette, définissez sa propriété text à 0 et définissez sa couleur de fond à rouge.

Pour compléter cet exemple, répétez toutes les étapes pour ajouter trois autres étiquettes avec leur texte respectif défini à 1, 2 et 3 et leurs couleurs définies à vert, jaune et bleu. Vous vous retrouverez avec un formulaire comme celui-ci :

Qt Designer – Formulaire avec étiquettes colorées

La capture d’écran ci-dessus montre le formulaire initial que vous utiliserez pour les prochaines sections. C’est un formulaire propre avec quatre objets étiquettes dessus. Vous pouvez définir une couleur de fond à chaque étiquette pour pouvoir les voir et les différencier plus facilement dans les sections suivantes.

Mises en page horizontales, QHBoxLayout

Vous pouvez utiliser un gestionnaire de mise en page horizontale (QHBoxLayout) pour disposer les widgets sur une seule ligne. Pour créer ce type de disposition dans le code, vous devez instancier la classe QHBoxLayout et ensuite ajouter vos widgets à l’objet de disposition. Dans Qt Designer, il est plus facile de travailler dans l’autre sens.

Avec votre fichier layout-labels.ui ouvert, sélectionnez d’abord toutes vos étiquettes. Pour ce faire, vous pouvez cliquer sur chaque widget tour à tour tout en maintenant la touche Ctrl ou vous pouvez également cliquer et glisser avec le pointeur de la souris à l’intérieur du formulaire pour sélectionner les widgets.

Une fois que vous avez sélectionné les widgets, mettez-les dans une disposition horizontale en sélectionnant le bouton Lay Out Horizontally dans la barre d’outils principale du Qt Designer. Vous pouvez également utiliser l’option Lay out->Lay Out Horizontally du menu contextuel présenté ci-dessous ou vous pouvez appuyer sur Ctrl+1. Le screencast suivant vous guidera à travers ces étapes –

Si la disposition est mauvaise, alors vous pouvez facilement tout défaire et recommencer la disposition des choses à nouveau. Pour annuler les choses, vous pouvez appuyer sur Ctrl+z ou utiliser le menu Edit de la barre de menu principale de Qt Designer. Si cela n’est pas possible ou ne fonctionne pas, alors vous pouvez simplement casser la disposition en utilisant le bouton Break Layout de la barre d’outils principale de Qt Designer. Une autre façon de briser une disposition est d’appuyer sur Ctrl+0 ou de choisir Break Layout dans le menu contextuel du formulaire.

Mises en page verticales, QVBoxLayout

Vous pouvez utiliser une mise en page verticale (QVBoxLayout) pour disposer vos widgets dans une colonne les uns au-dessus des autres. Cela peut être très utile lorsque vous créez des groupes de widgets et que vous devez vous assurer qu’ils sont alignés verticalement.

En partant de votre fichier original layout-labels.ui, la première étape sera de sélectionner les widgets que vous devez inclure dans la disposition verticale. Après cela, vous pouvez cliquer sur le bouton Lay Out Vertically au-dessus de la barre d’outils principale, ou vous pouvez utiliser le menu contextuel, ou vous pouvez également appuyer sur Ctrl+2. Le screencast suivant vous guidera à travers ces étapes –

Si vous regardez de plus près le screencast, alors vous pouvez voir que l’objet de mise en page est indiqué par un mince cadre rouge entourant les étiquettes sur le formulaire. Ce cadre rouge n’est pas visible à l’aperçu ou à l’exécution, c’est juste un guide que vous pouvez utiliser lorsque vous concevez le formulaire. Remarquez également que, l’objet de mise en page apparaît dans l’inspecteur d’objets et ses propriétés (marges et contraintes) sont affichées dans l’éditeur de propriétés.

Mises en page de grilles, QGridLayout

Parfois, vous avez besoin de disposer vos widgets à la fois horizontalement et verticalement dans la même mise en page. Pour ce faire, vous pouvez utiliser un gestionnaire de mise en page de grille (QGridLayout). Les gestionnaires de grille disposent vos widgets dans une grille carrée ou rectangulaire, tous les widgets étant alignés verticalement et horizontalement avec leurs voisins. Ce type de disposition peut vous donner beaucoup plus de liberté pour disposer vos widgets sur un formulaire, tout en maintenant un certain degré de structure. Cette disposition peut être plus adaptée que la disposition imbriquée des mises en page horizontales et verticales, en particulier lorsque vous vous souciez de l’alignement des lignes ou des colonnes adjacentes.

Vous pouvez construire une mise en page de grille avec Qt Designer de la même manière que pour les autres mises en page. La première étape consiste à sélectionner le groupe de widgets que vous souhaitez mettre en page à l’aide d’un gestionnaire de disposition de grille. Ensuite, vous pouvez utiliser la barre d’outils, le menu contextuel, ou vous pouvez appuyer sur Ctrl+5 pour configurer la mise en page. Regardez le screencast suivant –

Dans ce cas, nous utilisons une disposition en grille 2 x 2 pour disposer les étiquettes sur votre formulaire. Notez que, pour utiliser ce type de disposition, vous devez d’abord placer vos widgets en lignes et en colonnes sur le formulaire, comme indiqué dans le screencast ci-dessus. Qt Designer est assez intelligent et va essayer de garder votre design aussi similaire que possible à ce que vous avez initialement créé à la main. Il peut même créer automatiquement des arrangements multi-colonnes difficiles ou remplir automatiquement les cellules vides.

Mises en page de formulaires, QFormLayout

Bien qu’un QGridLayout puisse être utilisé pour mettre en page des formulaires avec des entrées et des étiquettes en deux colonnes, Qt fournit également une mise en page conçue spécifiquement à cet effet – (QFormLayout). Ce type de disposition est idéal lorsque vous créez une application structurée de saisie de données ou de base de données. La colonne de gauche contient généralement des étiquettes qui demandent des informations. La colonne de droite contient les widgets de saisie tels que les éditions de lignes (QLineEdit), les boîtes de rotation (QSpinBox), les éditions de dates (QDateEdit), les boîtes combo (QComboBox), et ainsi de suite.

L’avantage d’utiliser cette mise en page par rapport à QGridLayout est qu’elle est plus simple à travailler lorsque vous n’avez besoin que de deux colonnes. Le screencast suivant le montre en action –

Dans cet exemple, nous ajoutons d’abord quatre nouvelles étiquettes. Ces étiquettes contiendront des informations sur les données que vous devez saisir ou modifier dans la deuxième colonne. Dans ce cas, la deuxième colonne contient vos tests d’étiquettes colorées, mais habituellement cette colonne sera utilisée pour placer le widget d’entrée comme les éditions de ligne, les boîtes de rotation, les boîtes combo, et ainsi de suite.

Mises en page splitter

Les splitters sont des objets conteneurs qui disposent les widgets horizontalement ou verticalement dans deux panneaux redimensionnables. Avec ce type de disposition, vous pouvez ajuster librement la quantité d’espace que chaque panneau occupe sur votre formulaire, tout en gardant l’espace total utilisé constant. Dans Qt, les mises en page splitter sont gérées à l’aide de QSplitter.

Même si les splitters sont techniquement un widget conteneur (et non une mise en page), Qt Designer les traite comme des mises en page qui peuvent être appliquées à des widgets existants. Pour placer un groupe de widgets dans un splitter, vous les sélectionnez d’abord comme habituellement, puis vous appliquez le splitter en utilisant le bouton de barre d’outils approprié, le raccourci clavier ou l’option de menu contextuel dans Qt Designer Jetez un coup d’œil au screencast suivant –

Dans cet exemple, nous appliquons d’abord un splitter horizontal à vos étiquettes. Notez que, vous aurez besoin de lancer l’aperçu du formulaire si vous voulez voir le splitter en action. Vous pouvez lancer l’aperçu du formulaire en appuyant sur Ctrl+R. Plus tard, nous appliquons un séparateur vertical aux étiquettes. Dans chaque cas, vous pouvez librement redimensionner le widget en utilisant le pointeur de votre souris.

Construire d’autres mises en page avec Qt Designer

Il y a quelques autres choses que vous pouvez faire avec les mises en page dans Qt Designer. Par exemple, supposons que vous ayez besoin d’ajouter un nouveau widget à une mise en page existante, ou d’utiliser des mises en page imbriquées pour disposer vos widgets dans une interface graphique complexe. Dans les quelques sections suivantes, nous allons couvrir la façon d’accomplir certaines de ces tâches.

Insertion d’objets dans une mise en page existante

Les objets peuvent être insérés dans une mise en page existante en les faisant glisser de leurs positions actuelles et en les déposant à la position requise dans la mise en page. Un curseur bleu s’affiche dans la mise en page lorsqu’un objet est glissé dessus pour indiquer où l’objet sera placé.

Regardez le screencast suivant où nous avons placé trois de nos étiquettes dans une mise en page verticale, puis nous réalisons que nous avons laissé l’étiquette bleue hors du jeu –

Il est également possible de déplacer ou de changer la position d’un widget donné dans une mise en page. Pour ce faire, il suffit de glisser-déposer le widget vers sa nouvelle position dans la mise en page. N’oubliez pas de suivre la ligne bleue pour bien faire les choses.

Imbrication de layouts pour construire des interfaces graphiques complexes

Vous pouvez également imbriquer des gestionnaires de layout les uns dans les autres en utilisant Qt Designer. La disposition intérieure devient alors un enfant de la disposition englobante. En faisant cela, vous pouvez créer itérativement des interfaces utilisateur très complexes, mais bien structurées.

Les layouts peuvent être imbriqués aussi profondément que vous le souhaitez. Par exemple, pour créer un dialogue avec une rangée horizontale de boutons en bas et un tas d’autres widgets alignés verticalement sur le formulaire, vous pouvez utiliser une disposition horizontale pour les boutons et une disposition verticale pour le reste des widgets, puis envelopper ces dispositions dans une disposition verticale.

De retour à notre exemple d’étiquettes colorées, le screencast suivant montre le processus d’arrangement d’une mise en page imbriquée dans Qt Designer –

Dans cet exemple, nous arrangeons d’abord les widgets par paire en utilisant une mise en page horizontale. Ensuite, nous imbriquons ces deux mises en page dans une troisième mise en page, mais cette fois-ci verticale. Les layouts peuvent être imbriqués aussi profondément que nécessaire.

Lorsque vous sélectionnez un layout enfant, son layout parent peut être sélectionné en appuyant sur la touche Shift tout en cliquant dessus. Cela vous permet de sélectionner rapidement une mise en page spécifique dans une hiérarchie, ce qui autrement sera difficile à faire en raison du petit cadre délimitant chaque gestionnaire de mise en page.

Définir une mise en page de niveau supérieur ou principale

La dernière étape que vous devez effectuer lors de la construction d’un formulaire est de combiner toutes les mises en page et le widget dans une mise en page principale ou de niveau supérieur. Cette mise en page se trouve au sommet de la hiérarchie de toutes les autres mises en page et widgets. Il est vital que vous ayez une mise en page car sinon les widgets de votre formulaire ne se redimensionneront pas lorsque vous redimensionnez la fenêtre.

Pour définir la mise en page principale, il suffit de faire un clic droit n’importe où sur votre formulaire qui ne contient pas de widget ou de mise en page. Ensuite, vous pouvez sélectionner Lay Out Horizontally, ou Lay Out Horizontally, ou vous pouvez également sélectionner Lay Out in a Grid comme dans le screencast suivant –

Dans cet exemple, nous utilisons chacune des trois mises en page différentes comme notre mise en page de niveau supérieur à tour de rôle. Nous utilisons d’abord une disposition horizontale, puis nous cassons la disposition et utilisons une disposition verticale. Enfin, nous définissons une disposition en grille. La disposition de niveau supérieur que vous choisirez dépendra des exigences spécifiques de votre application.

Il est important que vous notiez que les dispositions de niveau supérieur ne sont pas visibles en tant qu’objet distinct dans l’inspecteur d’objets. Ses propriétés apparaissent sous les propriétés des widgets du formulaire principal. Notez également que si votre formulaire ne comporte pas de mise en page, son icône apparaît dans un cercle rouge dans l’inspecteur d’objets. Une autre façon de vérifier si vous avez correctement défini une mise en page principale est d’essayer de redimensionner le formulaire, si une mise en page principale est en place, alors vos widgets devraient se redimensionner en conséquence.

Lorsque vous commencerez à construire des applications plus complexes, vous découvrirez que d’autres widgets conteneurs nécessitent également de définir une mise en page de niveau supérieur, par exemple QGroupBox, QTabWidget, QToolBox, et ainsi de suite. Pour ce faire, vous pouvez exécuter les mêmes étapes que vous avez vues ici, mais cette fois vous devez faire un clic droit sur le widget conteneur.

Laying Out a Dialog With Qt Designer

Pour un dernier exemple plus complet de l’utilisation des mises en page avec Qt Designer, nous allons maintenant créer un dialogue pour introduire certaines informations dans une application de base de données. Supposons que nous construisons un logiciel de gestion des ressources humaines pour notre société Poyqote Inc…. Nous travaillons maintenant sur un formulaire pour introduire des données sur nos employés. Le dialogue doit présenter aux utilisateurs une interface graphique conviviale pour introduire les données suivantes:

• Nom de l’employé
• Date d’embauche
• Département
• Position
• Salaire annuel
• Description de l’emploi

Quelle est la meilleure façon de mettre en page ce formulaire ? Il existe de nombreuses options, et c’est en grande partie une question de goût et de pratique. Mais ici, nous utilisons un QFormLayout pour disposer les champs de saisie en deux colonnes avec les étiquettes à gauche et les boîtes de saisie à droite. Le processus de création de la disposition est montré dans la screencast suivante –

Le dialogue de base est créé en utilisant le modèle Dialog with Buttons Bottom de Qt Designer. Ensuite, nous ajoutons quelques étiquettes et quelques widgets d’entrée, y compris les éditions de ligne, les éditions de date, les éditions de texte et les boîtes combo. Ensuite, nous mettons tous ces widgets dans une mise en page de formulaire et enfin nous définissons un niveau supérieur ou une mise en page principale pour le formulaire.

Le fichier .ui du dialogue terminé peut être téléchargé ici.

Conclusion

Qt Designer est un outil puissant quand il s’agit de créer des interfaces graphiques en utilisant Qt. L’une de ses fonctionnalités les plus simples et les plus utiles est la possibilité de disposer vos widgets dans différents types de mises en page. Apprendre à créer efficacement des mises en page avec Qt Designer peut faire monter en flèche votre productivité, en particulier lors de la création d’interfaces graphiques complexes.

Ce tutoriel vous a guidé à travers le processus de création de mises en page personnalisées avec Qt Designer. Vous savez maintenant comment tirer le meilleur parti de Qt Designer lors de la mise en page de vos IHM.