Créer un explorateur de fichiers avec Qt

00:00:00 :On va modifier pas mal de choses à l'intérieur de notre méthode modifyWidgets ici.On va modifier à la fois le ListView et le TreeView.La première chose qu'on va faire sur le ListView, c'est déjà changer la façon dont c'est affiché.
00:00:13 :Puisque pour l'instant, on a un affichage en liste.Donc si je lance mon application, vous voyez qu'on a à peu près la même chose que sur notre TreeView,c'est-à-dire une liste d'éléments.
00:00:21 :Moi, j'aimerais bien avoir une vue en icône.Donc ça, on peut le changer et on va le faire tout de suite sur notre ListView.On va faire self.ListView et on va changer le ViewMode.
00:00:31 :On va faire SetViewMode et on va avoir dans QtWidget.QueueListView une constante qui s'appelle IconMode qui va nous permettre de changer ce mode d'affichage pour avoir des icônes.
00:00:42 :Donc si je relance, on a cette fois-ci non plus une vue en liste, mais une vue en icône.Donc avec des icônes et le texte qui est affiché en dessous.
00:00:50 :On va également changer quelque chose qui va nous permettre d'améliorer les performances de notre application,c'est-à-dire qu'on va changer la taille par défaut de nos icônes pour qu'elles soient uniformes.
00:01:00 :Donc ça, ça va grandement améliorer les performances si vous avez beaucoup d'éléments dans votre ListView.Donc on va faire self.ListView et on va utiliser la méthode SetUniformItemSize et on va la passer à True.
00:01:11 :Donc par défaut, elle est à False.On la met à True pour que tous les éléments aient la même taille.Et comme je vous disais, au niveau des performances, ça va faire une grosse différence.
00:01:18 :La dernière chose qu'on va faire sur notre ListView, et on y reviendra dans une prochaine partie quand on va gérer le slider qui nous permet de changer la taille des icônes,c'est de donner une taille à notre icône de base.
00:01:29 :Donc on va faire self.ListView.SetIconSize et on va lui donner une CutieCore.CueSize.Donc on fait une size, ça c'est une classe à l'intérieur de CutieCore qui me permet de créer ce qu'on appelle un CueSize.
00:01:41 :Et c'est le CueSize qui est attendu par cette méthode, cette IconSize.Donc on ne peut pas juste mettre ici par exemple 48,48, ça ne marcherait pas.
00:01:49 :Il faut obligatoirement passer par CutieCore.CueSize.Donc on va lui passer une valeur de 48,48 qui va être la largeur et la hauteur.Là vous voyez dans le pop-up, on nous indique W et H avec Int qui signifie qu'on attend des nombres entiers.
00:02:04 :Donc 48,48 avec UniformItemSize et le ViewMode ici qui est en mode icône.Donc on va lancer tout ça et normalement vous voyez qu'on a des icônes qui sont uniformes.
00:02:15 :Vous voyez que le texte est automatiquement raccourci pour ne pas dépasser et pour avoir une icône qui est de la même taille que celle qui est à côté.
00:02:23 :Et on a donc pour l'instant une taille de 48,48.Vous verrez dans une prochaine partie, on va gérer ce slider qui nous permettra d'agrandir la taille de nos icônes.
00:02:32 :Pour l'instant on donne juste une valeur de base qui nous permet d'avoir des icônes de 48,48.On va ensuite changer le tri dans notre liste View parce que par défaut, si vous regardez bien, c'est en ordre alphabétique.
00:02:42 :Mais si on a une modification qui se fait dans notre arborescence, par exemple si on ajoute un fichier ou un dossier,et bien il ne sera pas forcément mis dans l'ordre alphabétique dans notre liste View.
00:02:52 :Donc ce qu'on va faire c'est utiliser une méthode qui s'appelle SetSortingEnabled et on va le passer à True.Comme ça si jamais il y a un changement dans notre arborescence, automatiquement ça va se réarranger pour être en ordre alphabétique.
00:03:04 :On va également utiliser une méthode qui va nous permettre d'avoir ce qu'on appelle un AlternateRowColor.Tout ce que ça veut dire en fait c'est qu'on va avoir une couleur différente pour chaque rangée,ce qui permet d'un peu mieux séparer les choses.
00:03:15 :Pour l'instant si je lance mon application, vous voyez qu'on a une seule couleur pour toute l'interface.Et donc si je fais SetAlternateRowColors et que je le passe à True et que je relance mon interface,alors ça va être assez peu visible mais vous voyez quand même si je zoom ici,
00:03:28 :alors je ne sais pas si vous le voyez beaucoup sur votre écran, mais on a une couleur qui est différente pour chaque rangée.Comme ça, ça permet d'y voir un peu plus clair et de mieux séparer les choses.
00:03:36 :Pour finir, on va faire quelque chose qui va modifier ce qu'on appelle le Header.Donc c'est en fait toute cette partie au-dessus puisque pour l'instant à chaque fois, vous voyez,je suis obligé de pousser cette partie ici pour qu'on ait la place de voir le nom de tous les textes ici.
00:03:51 :Donc ça aussi je vais le changer.Donc ça on va être sur notre TreeView encore une fois, donc Self.TreeView,sauf que cette fois-ci on va aller chercher le Header qui va nous permettre de retourner cette petite barre au-dessus qu'on va pouvoir changer et qu'on va modifier avec la méthode SetSectionResizeMode
00:04:08 :et on va lui dire qu'il faut qu'elle s'adapte au contenu qui est présent dans notre TreeView.Donc si je relance ici, pour l'instant vous voyez comme je vous disais que ça ne s'adapte pas du tout,on a un texte qui déborde et le Header ici n'est pas à la bonne taille,
00:04:20 :donc je suis obligé de le déplacer à chaque fois.Donc pour ça, on revient ici et on va donner comme argument QtWidgets et on va avoir dans QHeaderView la constante ResizeToContents.
00:04:31 :Et donc cette constante elle va se permettre en fait au TreeView d'être resizé automatiquement en fonction du contenu.Donc si je relance mon application, vous voyez qu'automatiquement là on a application qui est entièrement affichée et tout le reste aussi également qui est affiché en fonction du contenu qu'on a dans le TreeView.
00:04:48 :Donc je n'ai plus besoin à chaque fois de changer ce Header, il va automatiquement s'ajuster au contenu.Donc ça fait le tour sur tout ce que je voulais changer,donc on a les trois modifications ici pour être en mode Icon avec le ListView et ensuite quelques petites modifications ici qui ne sont pas critiques
00:05:02 :mais qui permettent quand même d'avoir une expérience utilisateur un peu plus intéressante,notamment le ResizeAutomatic ici qui m'évite d'avoir à chaque fois à faire un changement.
00:05:11 :Vous voyez que même quand je vais dans les applications,quand je change d'un dossier à un autre,eh bien automatiquement tout s'ajuste pour que je n'ai pas à changer la taille des colonnes ici moi-même et que tout s'ajuste automatiquement.

Mise en forme de l'application

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Christian Aucane

setSortingEnabled

Rechercher sur le site