Qt Quick Controls 2 n’a jamais fourni de remplacement, depuis 2016, mais ce n’est plus important : avec Qt 5.12, la version qui devrait sortir en novembre prochain, Qt Quick proposera, de base, un composant pour afficher des tableaux.
Ce composant fonctionnera de manière similaire à ListView, mais avec la gestion de multiples colonnes. On disposera ainsi d’une gestion complète des modèles (que ce soit des ListModel ou des tableaux JavaScript), même s’il faut régulièrement repasser au C++ pour écrire ses propres modèles avec QAbstractItemModel (un composant TableModel est en cours d’écriture, mais il ne sera vraisemblablement pas disponible en même temps). TableView est implémenté par-dessus Flickable, ce qui signifie que le tableau affiché n’est absolument pas limité par la zone disponible à l’écran, on peut le faire défiler dans tous les sens. Chaque élément est affiché à l’aide d’un délégué spécifique ; pour des raisons de performance, contrairement à ListView, les délégués sont réutilisés quand un item sort de la vue — mais ce mécanisme n’est pas prévu pour être invisible au développeur. En particulier, tout qui oserait stocker un état dans un délégué (une très mauvaise idée, le délégué ne devant servir qu’à l’affichage ou à l’édition d’une valeur, pas plus) ne le verrait pas remis à zéro lors de la réutilisation de l’instance du délégué : il faut utiliser les signaux TableView.onPooled et TableView.onReused pour cela.
Ce composant est assez flexible et autonome. Par exemple, par défaut, la largeur des colonnes est décidée en fonction de la largeur des éléments à y stocker (la propriété implicitWidth), qui est supposée constante à travers la colonne. Pour plus de personnalisation, les développeurs de TableView ont prévu un mécanisme un peu particulier, une fonction de rappel qui, en fonction de l’indice de la ligne ou de la colonne, renvoie la taille à lui assigner. Par exemple :
Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 | TableView { anchors.fill: parent clip: true model: myQAbstractTableModel delegate: Rectangle {} columnWidthProvider: function (column) { return column % 2 ? 100 : 200 } rowHeightProvider: function (row) { return row % 2 ? 100 : 200 } } |
Source : TableView.