- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie, on va voir comment créer une interface concrète avec Qt Designer.Donc on va créer une calculatrice et on va voir comment on peut agencer les différents widgets de la façon la plus simple possible.
00:00:11 :Donc moi déjà, ce que j'aime bien, c'est mettre tous les widgets dont j'ai besoin sur ma fenêtre sans déjà faire de layout.Parce que des fois, les layouts, ce n'est pas très évident, une fois qu'on a un layout, de modifier les choses.
00:00:30 :Donc je vais avoir besoin déjà d'un push button, on va pouvoir le dupliquer par la suite puisqu'on en aura besoin de plus qu'un.Je vais avoir le line edit également et c'est pas mal tout pour ma calculatrice.
00:00:40 :Je vais juste dupliquer le bouton que j'ai ici plusieurs fois.Pour ça, donc sur Mac, j'utilise la touche option.Sur Windows, ça doit être une des touches donc shift, ctrl ou la touche alt j'imagine.
00:00:52 :Donc ça doit être alt sur Windows qui vous permet donc de dupliquer un élément.Donc je vais le dupliquer quelques fois ici.On va avoir 4 boutons en largeur et ensuite on va en avoir plusieurs en hauteur.
00:01:02 :Donc pareil, je vais prendre les 4 et les dupliquer de nouveau en hauteur.Donc là, on va avoir plusieurs fois la hauteur.Je crois qu'on en a 4 ou 5.
00:01:10 :Je vais ouvrir une calculatrice pour voir.Donc on en a 1, 2, 3, 4, 5.On a 5 rangées.Donc je vais dupliquer encore une fois.
00:01:17 :Et ces 2 boutons ici, on n'en a pas besoin puisque nous, dans notre cas,on va juste mettre le bouton pour remettre à 0 et le bouton de l'opération ici.
00:01:25 :Donc on a à peu près tous les widgets dont on a besoin.Je vais les mettre grossièrement en place comme ça ici.Et une fois qu'on a tout ce qu'on veut, et bien on peut mettre en place un layout.
00:01:34 :Donc pour ça, on va le faire directement sur notre formulaire ici.Je vais faire un clic droit et je vais aller dans layout et dire que je veux mettre tout ça sous forme de gris.
00:01:42 :Et vous voyez qu'automatiquement, c'est déjà pas trop mal.Le problème qu'on va avoir ici, c'est que certains boutons vont prendre plus qu'une place.Là, vous voyez qu'on a un bouton qui est un peu moins grand que les boutons juste au-dessus.
00:01:54 :Donc là, ce que je vais faire, c'est les réduire tout simplement.Et vous voyez qu'on voit ici la taille des boutons et la place qu'ils prennent.
00:02:02 :Donc là, on voit qu'on a une place pour le bouton ici.Et quand on les déplace, on va voir la taille que ça prend.Donc je vais réorganiser tout ça un petit peu pour avoir 4 boutons en largeur.
00:02:11 :Donc 4 comme ceci, voilà.Là, on a encore une place.Là, on va avoir une place.Donc je crois que j'en ai même fait trop d'ailleurs.
00:02:18 :Puisque là, alors là, ça se peut que ça aille bouger.Vous voyez, en fait, il y a un bouton ici qui s'est retrouvé en haut ou en bas.
00:02:23 :Donc ça se peut qu'il faille remettre tout ça un petit peu en ordre.Donc voilà, je vais les mettre ici.Ceux-là, ils prennent trop de place.
00:02:29 :Donc on va les réduire également.On va les déplacer.Et on va faire notre interface comme ça.Là, en bas, je crois que j'ai un bouton de trop.
00:02:35 :Puisque lui, il va prendre deux espaces.Donc je vais étendre celui-ci.Et vous voyez que quand on étend en fait un bouton,on va lui dire qu'il prend plusieurs espaces sur notre grille.
00:02:44 :La ligne au-dessus, je vais vouloir qu'elle prenne 4 espaces de boutons.Donc là aussi, on va réduire un petit peu tout çapour que ça ne prenne que 4 en largeur.
00:02:53 :Donc là, il ne veut pas.Je vais le réduire, voilà, un petit peu plus.Donc n'hésitez pas à aller un peu plus loinquitte à ce qu'il prenne un peu moins de place que ce qu'il faut.
00:03:00 :Et ensuite, à l'étendre de nouveau.Donc là, voilà, on a notre ligne en haut.Vous voyez, vous pouvez la changer.Donc là, bien faire attention.
00:03:07 :Ce n'est pas forcément très évident.Vous voyez, si je déplace ici, je vais la mettre entre les deux.Et si je la déplace un peu plus en haut,vous voyez que j'ai une ligne bleue qui m'indiqueque je vais la déplacer sur la ligne du haut.
00:03:17 :Donc il ne faut pas hésiter à bouger un petit peu les trucs comme ça,plusieurs fois, vous voyez,pour qu'il prenne la place dont vous avez besoin.
00:03:24 :Le C, lui, il ne prend qu'une place.Donc je vais le déplacer ici.Et voilà, je commence à avoir quelque chose, je crois,qui ressemble à une calculatrice.
00:03:31 :Là, ce que je peux faire, c'est sur mon formulaire,soit avec le clic droit, soit directement sur la barre ici,ou alors via le menu,on a l'option Adjust Sizequi va me permettre automatiquement d'ajuster la taillepour que les widgets prennent le moins de place possible.
00:03:44 :Donc si je clique sur ce bouton,ou si je vais sur From Adjust Size,vous voyez que le formulaire prend le minimum de place possible.
00:03:51 :Donc maintenant, on peut tester notre applicationen faisant CMD R ou CTRL R sur Windowspour lancer la fenêtre et voir ce que ça donne.
00:03:58 :On peut changer la taille, vous voyez.Donc moi, ce que je vais faire,c'est déjà changer le texte des boutons.Pour ça, je peux double cliquer dessus tout simplement.
00:04:05 :Je vais mettre 7, 8, 9.Là, on va avoir 4, 5, 6.Ensuite 1, 2, 3.Ici, on va avoir le 0,le point,le symbole d'égalité pour faire l'addition.
00:04:17 :Et ensuite, on va avoir les opérateurs.Donc la division, la multiplication,le moins et le plus.Voilà.Donc normalement, tout est bon.On peut refaire un coup d'Adjust Size sur le Layoutpour qu'il reprenne la taillepuisque maintenant, les boutons ont un texte qui est plus petit.
00:04:35 :Donc vous voyez que la taille peut être encore plus réduite.Donc là, on a à peu près tout ce qu'il faut.On va maintenant juste changer un petit peu les margespuisque là, vous voyez qu'en fait,on a un espace entre les boutonset on a des marges sur le côté.
00:04:47 :Donc les marges, je peux les changer directement sur mon formulaire.On va aller tout en bas.Et vous voyez qu'on a le Layout ici.Alors ça, c'est un truc qui est un petit peu perturbant au début.
00:04:55 :C'est que le Layout, en fait,dans ce cas-ci, on ne le voit pas directementdans notre Object Inspector ici.Il est directement sur le Widget.
00:05:03 :Mais on peut quand même ajouter un Layout.C'est ça qui est un petit peu perturbant.C'est que vous voyez ici, on a des Layouts.Et si je voulais, je pourrais ajouter un Layoutcomme un Widget, si vous voulez,et là, le voir directement dans l'Object Inspector.
00:05:14 :Donc c'est un petit peu perturbant, je trouve.Il y a des Widgets que vous allez ajoutersur lesquels vous pouvez directement mettre un Layout.Par exemple, si je descends ici avec un Frame,le Frame, en fait, je peux mettre un Layout à l'intérieuren faisant un clic droit et en allant dans Layout.
00:05:28 :Vous allez voir qu'ici, je peux mettre des options.Donc là, je ne peux pas parce que je n'ai pasde Widget à l'intérieur.Mais si je mets un Widget,et là, il faut faire bien attention ausside le mettre dedans.
00:05:36 :Vous voyez que ce n'était pas forcément évidentavec une interface assez réduite.Donc là, j'ai mon bouton qui appartient bien au Frame.Vous voyez qu'on voit avec la surbrillanceque le bouton va être dans le Frame.
00:05:45 :Et on voit ici dans l'Object Inspectorqu'il est bien en fond du Frame.Et là, donc, si je veux mettre un Layoutà l'intérieur du Frame,je fais un clic droit, Layout.
00:05:53 :Et là, vous voyez que je peux mettre, par exemple,un Layout horizontal pour alignermes boutons horizontalement dessus.Après, je peux dupliquer ce bouton.Vous voyez avec la barre bleue qu'on m'indiquequ'il va être à côté de l'autre.
00:06:03 :Et je peux donc avoir les boutonsqui sont comme ça sur un Layout horizontalà l'intérieur de mon Frame.Donc ce Layout, on va le retrouver tout en bas.
00:06:10 :Si on descend ici, vous voyez le Layoutavec le nom du Layoutet les marges que l'on peut changer.Donc je vais supprimer ce Frame ici.
00:06:16 :Moi, je n'en ai pas besoin.Mais c'est juste pour vous montrerque les Layouts vont être le plus souventdirectement sur votre Widgetqui va contenir le Layoutqu'on peut modifier dans le Property Editor.
00:06:26 :Donc moi, je vais enlever les marges ici.Je veux que tout soit collé au bord de la fenêtre.Donc j'enlève les marges à gauche,en haut, à droite et en bas.
00:06:34 :Je vais également modifier mes boutons.Pour ça, je peux les sélectionnerdepuis le Object Inspectoret je peux faire des modificationssur tous les boutons d'un coup.
00:06:41 :Donc ça, c'est assez pratiquepour ne pas avoir à répéter les mêmes opérationssur différents Widgets.On sélectionne tout.Et donc là, je vais changer quelque chose.
00:06:49 :Je vais changer la taille des boutons.Je vais changer également le Size Policy.Donc on va dire qu'ils doivent prendrele maximum de place.Donc on va mettre Expanding icipour qu'ils s'étendent sur l'axe horizontal et vertical.
00:07:00 :On va également mettre une taille minimumde 48 pixels.Donc je vais mettre 48 icien Width et en Heightdans le Minimum Size.Et on va également les rendre platspour ne pas avoir en fait la bordure iciqui fait un petit peu Windows 98.
00:07:14 :Donc je vais descendre iciet je vais cocher Flat.Voilà, pour qu'on ne voit plus la bordure.Je vais refaire un coup de Adjust Sizepour que tout reprenne le minimum de place possible.
00:07:24 :Et on va également sur le Line Editchanger quelque chose.Donc par exemple ici le Minimum Size,on va mettre le Height à 50pour que ça prenne un peu plus de place.
00:07:32 :Donc je peux tester tout ça là encoreavec Command R ou Control R.Et on voit que je commence à avoir une calculatricequi ressemble à quelque chose.
00:07:39 :Donc je peux ici cliquer sur les boutonset on a quelque chose d'assez sympa.Si jamais vous voulez modifier l'apparencede ces boutons, donc on l'a vu,on pouvait le faire avec certaines propriétésici directement dans le Property Editor.
00:07:50 :On peut également changer les feuilles de styleen faisant un clic droit.Vous avez sur tous les widgets iciChange Style Sheetavec certaines propriétés que vous pouvez ajouter ici.
00:07:58 :Donc ce n'est pas très utile je trouve.Vous n'avez pas grand chose.Par exemple il y a juste le couleur iciqui vous permet d'ajouter une couleur en RGB.
00:08:05 :Mais c'est tout.Donc après ce qu'on peut fairec'est nous spécifier un attribut.Par exemple l'attribut Colorqui va changer la couleur du texte.Mettre cette couleur que l'on avait récupérée.
00:08:14 :Et vous voyez qu'on a une indicationsi la feuille de style est valide ou non.Donc là dans ce cas-ci elle est valide.Mais si j'enlève le color par exempleelle n'est plus valide.
00:08:21 :Donc ça c'est bien d'avoir un petit check icipour savoir si les feuilles de style sont valides ou non.Et si je fais Applyvous voyez que le bouton a changé iciet il est maintenant un petit peu rouge.
00:08:30 :Donc voilà pour les Style Sheets.Ça peut être intéressant ausside pouvoir le faire directement via l'interface.Donc on a une interface qui fonctionneavec tout qui est bien mis comme il faut.
00:08:39 :Juste avant de terminer cette vidéoje vais vous montrer égalementcomment modifier une interfaceune fois qu'elle est agencée comme ceci.Parce que là comme je vous disaissi vous regardez en faitlà on n'a pas beaucoup de contrôledans le Object Inspector sur les widgets.
00:08:52 :Imaginons que je veuille rajouterune deuxième calculatrice à côté.Donc je vais mettre un frame par exemple ici.Là vous allez voir en faitque je ne peux pas glisser les boutonsdirectement depuis l'Object Inspector dans le frame.
00:09:04 :Donc là j'ai mon frame qui se retrouveà l'intérieur de ma grillequi est sur la grille de la calculatrice.Et là il faudrait que je déplace ces élémentsà l'intérieur du frame.
00:09:13 :Donc ce n'est pas très pratique.Alors moi ce que je fais généralement dans ce cas-cic'est que je vais casser mon layout.Donc vous pouvez le faire soit avec le bouton iciavec le petit panneausoit là encore avec le clic droit.
00:09:22 :Vous allez dans Layoutvous faites Break Layout.Là ça va casser le layout.Donc ça veut dire qu'on est revenu à un layoutqui est maintenant beaucoup plus libre.
00:09:30 :Donc je n'ai plus les cases de ma grilleet vous voyez que je peux déplacer mes boutons comme ça.Également mon frame, donc je l'ai ici.
00:09:36 :Et je vais pouvoir le changermettre un frame un peu plus grandet déplacer mes éléments à l'intérieur.Donc c'est ce que je vais faire.
00:09:42 :Imaginons qu'on veuille faire une super calculatriceavec deux calculatricesles unes à côté des autres.Donc je peux faire un frame iciprendre tous ces widgetset les glisser dans mon frame.
00:09:52 :Et à l'intérieur du frame cette fois-cije peux donc déplacer tous ces widgetsen déplaçant mon frameet on voit dans l'arborescence icique tous les widgets maintenantsont en dessous du frame.
00:10:01 :Dans ce frame maintenantje peux mettre un même layout en gris.Donc je remets ma grille.Vous voyez que les widgets retrouventà peu près leur place.
00:10:08 :Donc je peux remettre tout ça en ordreen refaisant ici un étirement sur mon line editpour qu'il reprenne les quatre en largeur.Là je crois qu'il y a un petit problèmeavec le zéro qui ne prend pas assez de placeet le symbole d'égalité aussi.
00:10:19 :Je ne sais pas trop ce qu'il me fait.J'ai l'impression que j'ai une petite case en trop.Donc là il faudrait que probablementje repasse les boutonsnon pas en flat comme on avaitpuisqu'en flat on ne voit pas bien les bordures.
00:10:29 :Comme ça c'est un peu plus facile de voir.Alors je crois que j'ai une case en trop.Donc voilà on pourrait réorganiser tout ça.Là ce que je veux juste vous montrerc'est comment on a pu sortir des widgetsd'un grid layout qu'on avaitles mettre à l'intérieur d'un autre frame
00:10:43 :et là si on le voulait on pourrait dupliquerce frame.Donc là je sélectionne tout mon frameavec la touche option ou donc alt sur Windowsvous pouvez dupliquer l'intégralitéde ce frame.
00:10:53 :Je vais refaire un adjust sizepour réajuster l'intégralité de ce frameet maintenant je peux les mettreles uns à côté des autres sur mon formulaireici donc le QWidget en changeantlà encore le layout.
00:11:04 :Donc je fais un clic droit puisque pour l'instantil n'y a pas de layout.On le voit ici avec la petite icône.Donc je vais mettre un layoutet cette fois-ci je vais mettre un layout horizontalpour mettre les deux frames les uns à côté des autreset on va refaire un adjust size
00:11:16 :pour que tout reprenne à peu prèsla bonne place.Si je lance mon application vous voyez qu'on a doncmaintenant deux calculatrices les unes à côtédes autres.
00:11:24 :Si je veux les mettre les unes en dessous des autresje peux tout simplement changer le layout en mettantun layout vertical.Là encore on va refaire un adjust sizepour remettre tout ça en formeet vous voyez qu'on a maintenant les deux calculatricesles unes au-dessus des autres.
00:11:36 :Donc voilà pour un aperçu des layoutsdes widgets.N'hésitez pas à vous entraîner avec tout çail y a pas mal de petites manipulations et il faut trouvervotre façon de faire aussi.
00:11:44 :Moi comme je vous dis c'est des façons de faire que j'ai trouvéau fur et à mesure du temps en créant des interfaces.Je trouve que c'est plus facile en cassantles layouts comme je vous ai montréen faisant un clic droit et en allant dansbreak layout ici.
00:11:55 :C'est plus facile pour réorganiser les chosesque d'être contraint toujours au layout surtout queon ne peut pas modifier comme je vous l'ai diton ne peut pas déplacer en fait des élémentsd'un frame à un autre par exemple directementavec l'object inspector.
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.