- 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 :Pour faire des applications un peu plus complexes, on va pouvoir imbriquer des layouts les uns dans les autres.Pour l'instant on a un seul axe, soit un axe horizontal avec HBoxLayout, soit un axe vertical avec VBoxLayout.
00:00:12 :On peut très bien combiner plusieurs layouts les uns avec les autres.Donc si je reviens avec un VBoxLayout à la place du HBoxLayout, imaginez que je souhaite non pas avoir une seule rangée de boutons ici,mais deux rangées de boutons les uns à côté des autres.
00:00:26 :On pourrait utiliser un CubeGridLayout pour faire cette opération, mais on peut également aborder le problème d'une autre façon,en utilisant deux VBoxLayout l'un à côté de l'autre.
00:00:35 :Donc pour ça je vais créer un premier layout qui va être un layout horizontal,qui va contenir ces deux layouts verticaux qui contiendront les boutons.
00:00:43 :Donc je vais vous montrer ce que ça donne tout de suite avec le code.Je vais reprendre un MainLayout qui cette fois-ci va être HBoxLayout,donc je vais déjà importer le VBoxLayout et le HBoxLayout puisque je vais avoir besoin des deux.
00:00:54 :Une fois que c'est fait, je vais modifier ici le VBoxLayout pour mettre un HBoxLayout.Donc ça, ça va être mon layout principal.Et je n'oublie pas ici de rajouter Self pour parenter mon layout à ma fenêtre.
00:01:12 :Donc je vais ensuite créer deux autres layouts.Un layout pour la gauche et un layout pour la droite qui vont contenir chacun une rangée de boutons.
00:01:20 :Donc je vais l'appeler LeftLayout.Ce layout, ça va être dans ce cas-ci un VBoxLayout.Et ce VBoxLayout, il n'a pas besoin d'être parenté à ma fenêtre puisque je vais l'ajouter dans le MainLayout.
00:01:31 :Donc il y a juste besoin d'avoir le MainLayout qui est parenté à ma fenêtre.Et puisque ce LeftLayout et le RightLayout que je vais créer tout de suite seront contenus à l'intérieur du MainLayout,et bien ici je n'ai pas besoin de spécifier de parent.
00:01:45 :Donc je vais créer un autre VBoxLayout que je vais mettre dans une variable RightLayout.Et pour finir, on va ajouter ces deux layouts à notre layout principal.
00:01:54 :Pour ça, on va utiliser la méthode AddLayout tout simplement sur notre MainLayout.Donc plutôt que de faire un AddWidget comme on l'avait fait pour ajouter des widgets dans les layouts,cette fois-ci on va utiliser AddLayout pour ajouter un layout dans un autre layout et ainsi avoir cette imbrication.
00:02:10 :Donc je vais ajouter le LeftLayout et je vais dupliquer la ligne pour ajouter le RightLayout.Donc là il faut bien comprendre qu'on a un premier layout qui est horizontal,dans lequel on va ajouter deux layouts verticaux.
00:02:22 :Et donc ces deux layouts seront les uns à côté des autres puisqu'on a un axe horizontal.Je vais ensuite créer deux rangées de boutons que je vais ajouter dans le LeftLayout et le RightLayout.
00:02:32 :Donc pour ça je vais faire tout simplement deux boucles.On va faire une première boucle qui va aller de 1 à 10.On va créer des boutons avec QPushButton et on va mettre comme texte à l'intérieur de ce bouton la chaîne de caractère i.
00:02:44 :Donc on va avoir un bouton avec 1, 2, 3, 4, 5, etc. jusqu'à 10.Et je vais ajouter ces boutons dans LeftLayout avec la méthode AddWidget.
00:02:52 :Donc on ajoute le bouton.Si je lance mon script pour l'instant vous allez voir qu'on a une seule rangée ici avec 1 jusqu'à 10.Et je vais faire la même opération sur le deuxième layout qui va se retrouver donc juste à côté de ce premier layout.
00:03:05 :Donc je vais faire la même chose ici, je vais copier ces lignes de code et je vais mettre ici une deuxième boucle.Avec cette fois-ci on va aller de 11 à 21, donc ça va aller de 11 à 20.
00:03:15 :Puisque dans un range ici le deuxième élément est exclusif donc on va aller jusqu'à 20.Je vais mettre cette fois-ci non pas dans le LeftLayout mais dans le RightLayout.
00:03:30 :Donc on a bien un premier layout ici qui est à l'intérieur de ma fenêtre, qui est un HBoxLayout.Dans lequel on a notre VBoxLayout qui est le LeftLayout, donc le layout vertical à gauche.
00:03:42 :Et on a un autre layout, donc un autre VBoxLayout qui est le RightLayout qui se retrouve à droite.Et à l'intérieur de ces layouts respectifs, donc celui de gauche et celui de droite, on a 10 boutons qui sont ajoutéset qui se retrouvent donc organisés de façon verticale puisqu'il s'agit de VBoxLayout.
00:03:59 :Donc voilà comment faire ce genre d'interface avec la méthode AddLayout qui me permet d'imbriquer des layouts les uns dans les autres.Et on pourrait aller encore plus loin bien entendu.
00:04:08 :Je vais terminer cette vidéo là-dessus, ça va aller peut-être un petit peu vite.Vous pouvez repasser si ça va trop vite sur cette partie.Mais c'est juste vraiment pour vous montrer qu'on peut vraiment imbriquer autant de niveaux de layout qu'on le souhaite.
00:04:19 :Donc je pourrais faire par exemple un MiddleLayout qui serait égal dans ce cas-ci à un QHBoxLayout.Et je peux ajouter ce MiddleLayout dans le RightLayout par exemple.
00:04:29 :Donc je vais ajouter mon MiddleLayout dans le RightLayout.Et on va ajouter une rangée de boutons à l'intérieur de ce MiddleLayout.Donc je vais copier là encore ma boucle.
00:04:42 :Et cette fois-ci on va faire un range de 21 à 30.Et je vais mettre tous ces boutons dans le MiddleLayout.Donc là essayez de réfléchir juste avec ce code à ce qui va se passer.
00:04:53 :Moi je vais exécuter le script et vous allez voir le résultat.Et là on va avoir plein de layouts les uns à l'intérieur des autres.
00:04:59 :Donc on a un premier HBoxLayout qui est dans ma fenêtre.On a ensuite le LeftLayout qui est un VBoxLayout.On a ensuite le RightLayout qui est ce layout ici qui se retrouve à droite.
00:05:10 :Et en premier élément on a notre MiddleLayout qui est un HBoxLayout qui me permet donc d'afficher ces éléments sur un axe horizontal.Bien entendu l'ordre a son importance ici.
00:05:21 :Puisqu'on voit bien que ces boutons ici de 21 à 29 se retrouvent en premier.Si je souhaite les déplacer et les mettre à la fin et bien il faut que je change un petit peu l'organisation de mon code.
00:05:32 :Pour par exemple ajouter ce layout à la fin.Donc je vais le mettre tout simplement à la fin de mon script ici.Et si je relance le script vous allez voir que cette fois-ci on a bien le layout qui est ajouté à la fin.
00:05:44 :Donc en tout dernier après avoir ajouté les boutons de 11 à 20 dans le layout de droite.Donc l'ordre a vraiment une grande importance quand on crée des layouts.
00:05:53 :Puisque forcément comme n'importe quel script Python les lignes sont exécutées les unes à la suite des autres.Et donc quand vous ajoutez soit des widgets soit des layouts les uns dans les autres.
00:06:02 :Et bien ça va être fait dans l'ordre ligne après ligne.Donc si on déplace cette ligne ici dans laquelle on ajoute notre MiddleLayout dans le RightLayout.
00:06:10 :Forcément votre interface ne sera pas la même en fonction d'où se trouve cette ligne dans votre script.Donc voilà pour les layouts.Pour l'instant c'est très théorique.
00:06:18 :Moi je vous conseille vraiment d'essayer tout ça.Là c'est très important pour les layouts de pratiquer.D'essayer d'ajouter des widgets dans des layouts, des layouts dans d'autres layouts.
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.