- 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 :Quand vous ouvrez Qt Designer, par défaut vous avez cette fenêtre qui vous propose de créer un nouveau formulaire.Donc on a à gauche ici différentes options. On peut créer un simple widget qui va être l'équivalent d'un QWidget,
00:00:12 :un MainWindow qui est l'équivalent du QMainWindow et ensuite vous avez par exemple un dialogue avec des boutons à droite ou des boutons en bas.Donc il y a différentes choses ici. Généralement on veut utiliser un widget ou un MainWindow.
00:00:24 :Vous avez également en dessous dans les widgets ici directement par exemple un QFrame ou un QGroupBox.Donc ça c'est des widgets un peu plus bas niveau qui ne sont pas très utiles je trouve.
00:00:33 :Généralement on a envie de partir soit sur un widget soit sur un MainWindow.Donc moi par exemple je vais partir sur un widget, je vais cliquer sur Create et ça va me créer un formulaire.
00:00:42 :Vous voyez que j'en avais déjà un qui était ouvert ici en arrière-plan.Donc à chaque fois en fait que vous créez un nouveau formulaire, elles vont s'ajouter dans cette fenêtre au milieu.
00:00:50 :Ça ne va pas créer un nouveau document.Et si vous souhaitez fermer un précédent widget, il suffit de cliquer sur la croix rouge et de le sauvegarder ou non.
00:00:58 :Moi je ne vais pas sauvegarder celui que j'avais là.Et donc c'est comme ça que vous avez votre espace de travail.Donc les espaces de travail vont être superposés les uns aux autres si jamais vous ouvrez un nouveau document.
00:01:07 :Donc là j'ai créé un nouveau widget et vous voyez qu'on a plusieurs panneaux autour de cette zone de travail.Vous pouvez les afficher ou les cacher en allant dans View.
00:01:14 :On a tous ces panneaux ici.Alors moi je ne les utilise pas tous.Généralement je vais utiliser le Widget Box qui est cette boîte ici avec tous les widgets.
00:01:22 :Le Object Inspector qui me permet de voir la hiérarchie de tous les widgets dans ma fenêtre.Le Property Editor ça permet de modifier les propriétés de nos widgets.
00:01:31 :Et ensuite ces trois en dessous je ne les utilise pas personnellement.Donc on a le Resource Browser qui permet d'aller chercher par exemple des images ou des choses du genre.
00:01:40 :Donc je l'utilise assez rarement.Action Editor et Signal Slot Editor ça c'est des choses que je fais en code directement.Je n'ai pas envie personnellement de connecter les signaux directement dans l'interface.
00:01:50 :Donc de dire par exemple que quand on clique sur un bouton ça va faire telle action dans l'interface.Je préfère faire tout ça en code.
00:01:56 :Donc Action Editor et Signal Slot Editor je les cache généralement et je ne les utilise pas.Donc je me retrouve avec ces trois éléments essentiellement.
00:02:04 :La liste des widgets à gauche, ma zone de travail au milieu.Et ensuite le Object Inspector et le Property Editor.On a ensuite cette barre ici.
00:02:12 :Là encore je ne l'utilise pas très souvent.Vous allez voir que ces options ici pour mettre en forme le layout,elles sont disponibles directement sur les widgets qu'on va ajouter et les layouts qu'on va ajouter dans le clic droit.
00:02:22 :Donc si je fais un clic droit ici vous avez à chaque fois une option de layout.Et vous pouvez changer le layout ici plutôt que de passer par ces boutons.
00:02:29 :Donc cette barre également je ne m'en sers pas très souvent.Il y a juste ce bouton ici que vous retrouvez j'imagine quelque part dans les menus.
00:02:35 :Voilà ici Edit Tab Order.Donc ça, ça permet d'éditer en fait l'ordre dans lequel les widgets vont être mis en avantquand vous allez appuyer sur la touche Tab.
00:02:44 :Donc ça peut être pas mal par exemple si vous faites un formulaireet que vous souhaitez qu'en premier ce soit la boîte de texte avec le nom d'utilisateur,ensuite le mot de passe, etc.
00:02:53 :Vous allez pouvoir changer cet ordre avec ce bouton.Donc c'est pas mal, le seul bouton que j'utilise.Tous les autres comme je vous dis en fait on peut les retrouver dans le clic droit dans l'Object Inspector.
00:03:02 :Donc voilà à quoi ressemble l'interface.On a également un preview qui peut être pratique,qui est disponible avec le raccourci clavier sur Mac qui est Command R.
00:03:10 :Je crois que sur Windows c'est Ctrl R tout simplement.Ça, ça va vous permettre de lancer l'interface tout simplementpour la voir comme si vous l'exécutiez après dans votre script Python.
00:03:19 :Donc ça peut être pas mal pour faire des tests,pour voir comment ça réagit quand vous changez la taille par exemple de la fenêtre, etc.
00:03:25 :Donc voilà pour l'interface.Ensuite c'est très simple quand vous souhaitez ajouter des widgets,il suffit d'aller les chercher ici à gauche et de les glisser sur votre interface.
00:03:33 :Donc par exemple si vous souhaitez mettre un push button, vous le prenez, vous le glissez.Ensuite vous pouvez changer sa taille, vous pouvez le déplacer dans votre interface.
00:03:41 :Pour l'instant on n'a aucun layout sur notre interface.Donc vous le voyez avec cette icône ici, on a un petit panneau interdit en fait sur notre formulaire.
00:03:49 :Donc on n'a aucun layout et pour mettre un layout,il suffit de faire un clic droit et de sélectionner le layout que l'on souhaite.Donc on peut mettre une grille, on peut mettre un layout horizontal ou vertical.
00:03:59 :Donc ça c'est les HBoxLayout ou les VBoxLayout.Et le grid ici c'est le GridLayout tout simplement.Donc par exemple si je mets un layout ici, on voit que maintenant mon bouton suit un layout,qui dans ce cas-ci je crois que j'avais mis horizontal.
00:04:12 :Donc si je duplique mon bouton par exemple, j'appuie sur la touche option sur Mac pour dupliquer mon bouton,vous voyez que là j'ai un layout qui est sur l'horizontale.
00:04:20 :Et si je veux le changer, je peux faire maintenant un layout vertical.Et ça va aligner mes boutons comme ceci.Donc je peux mettre des boutons, les dupliquer, en mettre d'autres.
00:04:29 :Par exemple si je veux mettre un radio bouton au milieu, je peux les ajouter.Si je veux mettre un line edit, on peut le mettre au-dessus.
00:04:35 :Et ensuite on va pouvoir changer leurs propriétés dans cette boîte de propriétés tout simplement.Donc si par exemple je souhaite changer sur le line edit, on va aller voir.
00:04:43 :A chaque fois vous voyez en fait la hiérarchie qu'on retrouve dans les classes.On va voir sur chacun des widgets ici déjà le QWidget qui va rassembler tous les élémentsqui sont identiques pour peu importe les widgets.
00:04:54 :Donc par exemple sur le line edit, le pushbutton ou le QWidget, donc votre fenêtre,vous allez à chaque fois avoir la possibilité de changer la police d'écriture,la taille maximale ou le size policy qui est ici qui permet de définircomment les éléments vont prendre de la place sur l'axe horizontal ou vertical.
00:05:10 :Et ensuite vous allez avoir des éléments précis aux widgets que vous avez sélectionnés.Donc par exemple si je descends là sur le line edit,j'ai des éléments qui sont uniquement pour le line edit.
00:05:19 :Donc par exemple je pourrais mettre un placeholder texte ici.Donc je pourrais dire login.Et vous voyez que le texte va changer ici.Sur le bouton, si je veux changer le texte du bouton,je peux le faire également dans cet objet de propriétéoù généralement vous pouvez double cliquer sur le widget pour aller éditer ce widget.
00:05:35 :Donc si je double clique dessus, vous voyez que je peux éditer le texte du widget,mais je peux également le faire dans l'onglet de propriété.
00:05:41 :Et ensuite je peux changer, donc par exemple si je souhaite que le bouton soit checkable,donc qu'on puisse le cocher, et bien j'ai ces propriétés ici.
00:05:48 :Et si je lance l'interface pour vous montrer ce que ça donne,donc avec le preview, vous allez voir que si je clique sur le bouton,je peux cette fois-ci le cocher.
00:05:56 :Donc voilà pour un rapide aperçu.Après bien entendu on va repasser sur tout ça beaucoup plus en détailpour créer des interfaces un peu plus avancées que ce que j'ai fait ici.
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.