- 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 personlive_helpToutes les questions
Christian Aucane
14 janvier 2023 - 14 janvier 2023 à 0:08
checkConversation résolue
3 réponses
On peut mettre directement le tupple dans le f-string
Ca marche si on met directement le tupple entre accolades dans le f-string :)
00:00:00 :Dans cette partie on va faire un petit peu de CSS. Donc le CSS c'est des feuilles de style qui vontnous permettre de modifier le style de nos widgets. Pour l'instant on a utilisé des méthodes comme la
00:00:10 :méthode setBackgroundColor qui nous permet de changer à quoi ressemblait notre widget,mais ça reste encore une méthode qui est inclue dans Qt, et ce n'est pas du CSS. Le CSS c'est
00:00:20 :vraiment ce qu'on utilise dans les sites web par exemple, et ça va nous permettre d'aller un peuplus loin dans la personnalisation de nos widgets. Donc cette personnalisation de notre CSS on va la
00:00:31 :faire directement dans notre setBackgroundColor ici, et on va la faire tout de suite après cetteméthode qui change la couleur d'arrière-plan de notre item. Donc ce qu'on va modifier en fait c'est
00:00:40 :la couleur de l'élément quand il est sélectionné. Parce que quand on lance notre interface pourl'instant, quand on sélectionne un élément, automatiquement la couleur de sélection c'est dubleu. Donc nous ce qu'on va faire c'est qu'on va modifier cette couleur de sélection pour qu'elle
00:00:52 :soit identique à la couleur qu'on récupère ici. Comme ça si je clique par exemple sur une tâchequi pour l'instant est en vert, pour l'instant si je clique donc ça me met du bleu, mais enarrière-plan on l'a changé en rouge. Et c'est juste une fois que je sélectionne autre chose que,
00:01:05 :vu qu'elle n'est plus sélectionnée, je peux voir la couleur qui était finalement sur ma tâche. Doncce qu'on va faire c'est quand je clique par exemple sur cette tâche ici, on va faire en sorte que lacouleur de sélection soit la même que la couleur d'arrière-plan. Donc si je clique ici on va mettre
00:01:17 :du rouge par exemple. Donc pour ça je vais créer une variable que je vais appeler stylesheet, etqui va être égale à une chaîne de caractère. Et alors je vais faire une chaîne de caractère qui va
00:01:27 :contenir trois guillemets au début et trois à la fin. Comme ça, ça va me permettre de faire unechaîne de caractère sur deux lignes, puisque ça va être un peu long comme comme texte si vousvoulez. Donc plutôt que d'avoir tout sur une seule longue ligne, je vais le mettre sur deux lignes. Et
00:01:39 :pour ça il faut que je fasse une chaîne de caractère ici avec trois guillemets. Ça me permetde faire un bloc, là vous voyez si je vais à la ligne je peux taper du texte, et le texte esttoujours considéré comme une chaîne de caractère. C'est notamment cette façon de faire qu'on utilise
00:01:50 :quand on fait des docstrings. Donc je vais mettre mes trois guillemets au début et à la fin, et audébut de tout ça je vais mettre un f puisque on va intégrer la variable color à l'intérieur decette chaîne de caractère. Donc je mets le f ici pour spécifier qu'on va avoir à faire à un fstring,
00:02:04 :qui va nous permettre d'intégrer ces variables à l'intérieur de la chaîne de caractère. Donc cequ'on va mettre dans le css c'est QListView. Donc QListView en fait c'est le parent de QListWidget,
00:02:13 :donc tout ce qu'on met sur le QListView va être hérité par le QListWidget. Donc on pourraitmettre QListView ou QListWidget, ça marcherait de la même façon. Moi je vais mettre QListView
00:02:22 :dans ce cas-ci, et on va aller chercher l'item, et on va aller chercher l'événement selected.Donc ça, alors faites bien attention ici il y a deux points. Donc les deux points c'est pour
00:02:32 :spécifier qu'on ne veut pas affecter directement le ListView mais juste les items qui sont àl'intérieur du ListView, puisque on ne veut pas modifier la couleur d'arrière-plan de tout leListView mais juste des items à l'intérieur du ListView. Donc pour ça la syntaxe ici c'est de
00:02:45 :mettre deux points et ensuite de spécifier qu'on veut modifier uniquement le css des items. Etensuite on va avoir un événement, donc l'événement ici on a juste deux points, on n'a pas deux foisdeux points, on en a juste un seul ici, et l'événement ça va être selected. Donc on va
00:02:57 :agir uniquement sur l'objet item dans notre ListView qui est sélectionné. Ensuite on va ouvrir,donc si vous connaissez un peu le css, on va ouvrir des accolades. Et alors là on va avoir
00:03:06 :une petite particularité puisque les accolades, si vous connaissez Python, dans les fstrings,c'est ce qui nous permet d'intégrer des variables à l'intérieur d'une chaîne de caractère quand onutilise les fstrings. Sauf que là nous on veut vraiment mettre des accolades, on ne veut pas
00:03:18 :intégrer pour l'instant une valeur, on veut juste mettre une accolade comme si c'était le caractèreaccolade. Donc pour ça on va mettre deux fois ce caractère. Et vous voyez qu'automatiquement la
00:03:27 :couleur change et en mettant deux fois l'accolade, en fait la première va échapper la deuxième etdonc on va considérer dans la chaîne de caractère ici qu'on a mis qu'une seule accolade. Donc c'est
00:03:36 :voilà le petit tour de passe-passe qu'il faut faire. Et on va avoir donc deux propriétés qu'onva changer. La première ça va être la couleur de background, donc la couleur d'arrière-plan. Et
00:03:44 :la deuxième qu'on va changer c'est la couleur du texte, puisqu'on va vouloir mettre une couleurnoire pour le texte parce que par défaut si je change ça la couleur va être blanche. Donc je
00:03:52 :vais changer la couleur du background et la couleur du texte. Donc je fais background, deux points,et là on va mettre une valeur en RGB. Donc je pourrais mettre par exemple 255, 0 et 255. On
00:04:02 :va réessayer avec cette valeur. Et ensuite je peux mettre un point virgule et spécifier monautre propriété que je veux changer, qui comme je vous le disais va être la couleur. Donc couleur
00:04:11 :ça va changer en fait le texte directement. Donc là encore je vais mettre du RGB et je vais mettredu noir cette fois-ci, donc 0, 0, 0. Je termine avec un point virgule et ensuite on a donc notre
00:04:21 :accolade ici qui va permettre de fermer celle qu'on a ouverte précédemment à la ligne du dessus. Doncsi j'essaye juste ça pour l'instant, je vais en fait juste appliquer mon style sheet avantd'essayer l'application. Je vais faire self.listwidget.setstylesheet et on va mettre notre
00:04:36 :variable style sheet ici. Donc on change le style sheet de notre listewidget, donc pas de notrelistewidget item. Attention le listewidget item c'est lui ici, c'est self. Nous on va récupérer
00:04:46 :self.listwidget. Donc c'est la listewidget parente qu'on a déclaré en fait ici, donc lw-tasks. Doncon va changer le style sheet de ce listewidget et on va lui passer notre chaîne de caractère ici.
00:04:57 :Donc je lance tout ça et là vous allez voir quand je clique sur un élément automatiquement vousvoyez il est sélectionné de la couleur que j'ai mis ici. Donc là c'est du rose et quand
00:05:05 :l'item se fait désélectionner il revient avec sa couleur qu'on avait mis dans cette backgroundcolor. Donc c'est vraiment juste pour la sélection, pour l'instant on a mis du rose ici donc c'est pas
00:05:13 :très intéressant. Nous ce qu'on veut c'est avoir la même couleur, donc la couleur qu'on a récupéréici. Donc là plutôt que de mettre 255 0 255 je vais vouloir intégrer cette variable. Alors cette
00:05:23 :variable on va pouvoir la formater pour qu'elle ait ce format ici, donc pour qu'on ait le rgb,donc le rouge vert bleu avec des virgules qui séparent chaque valeur. Donc pour ça on peut
00:05:33 :utiliser la méthode join et la méthode join elle s'utilise sur une chaîne de caractère. Donc jepourrais dire que je veux séparer avec une virgule et un espace tous les éléments qui sont contenusdans mon toproll color. Donc je vais récupérer ça dans une variable que je vais appeler color
00:05:47 :string et je vais printer cette variable et pour l'instant je vais faire un return. Donc je m'arrêteici, je n'applique pas le stylesheet, je veux juste printer cette valeur ici pour vous montrer à quoiça correspond. Et vous allez voir que là normalement on aura une erreur. Alors l'erreur
00:06:00 :elle nous dit en fait qu'il s'attendait à avoir des chaînes de caractère et on lui a donné desints. Donc des ints c'est des integers, c'est des nombres entiers. Donc c'est normal puisque color
00:06:08 :ici c'est un toproll qui contient des nombres entiers et lui il ne peut pas travailler avecdes nombres. Color ici il faut obligatoirement quand on veut utiliser join que ce soit des
00:06:17 :chaînes de caractère. Donc il faudrait ici plutôt qu'on ait des nombres d'avoir ici deschaînes de caractère. Donc on pourrait le modifier ici directement mais ce que je vais faire à la
00:06:24 :place c'est utiliser une autre fonction qui va nous permettre de changer toutes les valeurs quisont à l'intérieur de notre toproll. La fonction qu'on veut utiliser c'est la fonction map et map
00:06:34 :elle nous permet de mapper, donc d'assigner une fonction à chaque élément de notre toproll. Doncla fonction qu'on va assigner c'est la fonction string et notre toproll ça va être color. Donc
00:06:44 :en fait on va dire tout simplement que pour chaque élément de notre toproll color on veut utiliserla fonction string. Donc on va modifier tous les nombres entiers ici en chaînes de caractère et
00:06:53 :on va pouvoir ensuite du coup utiliser cette méthode join qui va lier chaque élément demon toproll avec la virgule. Donc si je relance tout ça normalement on n'aura plus d'erreurs et
00:07:02 :vous voyez qu'on a bien donc les éléments de mon toproll qui sont séparés par une virgule. Doncje vais pouvoir par la suite intégrer tout ça à l'intérieur de ma variable style sheet. Donc
00:07:11 :pour l'instant j'ai mis 255 0 255. A la place je vais mettre des accolades pour intégrer mavariable color string. Donc plutôt que de mettre les valeurs arbitraires que j'avais mises on va
00:07:21 :récupérer les couleurs qu'on a récupéré dans notre dictionnaire et qu'on a joint ici avec notrevirgule. Donc normalement ça devrait fonctionner si je relance l'interface et que je clique vous
00:07:31 :voyez que automatiquement en fait donc avec ce petit tour de passe-passe quand on clique sur unetâche et bien la couleur de sélection est identique à la couleur de la tâche. Donc comme ça ça permet
00:07:39 :d'avoir quelque chose qui est un peu plus clair et vous voyez que on voit tout de suite en faitquand on clique sur une tâche le statut qu'elle prend. Donc ça marche parfaitement donc vous
00:07:48 :voyez que c'est un peu compliqué de voir passer par le CSS c'est vraiment la seule façon que j'aitrouvé. J'ai cherché s'il y avait des méthodes qui existaient directement comme par exemple on
00:07:57 :pourrait imaginer qu'on ait une méthode qui s'appelle setBackgroundSelectionColor quelquechose du genre mais malheureusement ça n'existe pas. Donc la seule façon de changer la couleur
00:08:06 :de sélection d'un ListWidgetItem c'est de passer directement par la feuille de style et donc parce code en CSS. Donc c'est un peu alambiqué je vous l'accorde mais au moins ça fonctionne et ça
00:08:16 :nous permet d'avoir quelque chose qui est un peu moins confus quand on change le statut d'une tâche.Donc voilà pour cette partie qui était un petit peu complexe donc j'espère que ça vous a donnéenvie en tout cas d'explorer un peu plus les stylesheets. Je vous mettrai des liens vers une
00:08:28 :page qui répertorie tous les exemples que vous pouvez utiliser sur tous les widgets de Qt. Doncc'est intéressant si vous voulez savoir comment modifier certaines propriétés visuelles deswidgets. Donc je vous mettrai un lien pour la documentation vers cette page dans la prochaine
00:08:42 :partie donc ce sera juste un lien. Et ensuite nous ce sur quoi on va travailler ça va être lamodification visuelle de l'interface puisque pour l'instant on a une fenêtre donc une fenêtre commeça mais si vous vous rappelez bien quand j'avais présenté l'application au début nous on ne veut
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.