Une TableView avec Qt Quick

Si vous avez été amené à utiliser la version Desktop de Qt Quick, il y a des chances que vous ayez rencontré des limitations à ListView. ListView vous donne un moyen commode de représenter une liste simple d'éléments. Mais la plupart des applications ont besoin de plus que ça pour représenter les choses comme des play-lists et des albums. J'ai réalisé que c'était une grande limitation de Qt Quick Components for Desktop, donc je voulais voir comment il serait possible d'ajouter cette fonctionnalité par dessus ListView.

Le résultat est une TableView. Et elle ressemble à ceci :

http://labs.qt.nokia.com/wp-content/...eenshot-16.png

Voici une courte vidéo la montrant en action.

http://www.youtube.com/watch?v=3-RI0sR2Y8c

J'ai aussi fait quelques captures d'écran à partir d'autres plateformes :
http://i.imgur.com/VElYE.png
Mac
http://labs.qt.nokia.com/wp-content/...leview_win.png
Windows
http://i.imgur.com/FsvnP.png
KDE

Les utilisateurs réguliers de Mac auront peut-être remarqué que j'ai déplacé les en-têtes de colonne à leurs positions actuelles au dessus de la barre de défilement. Elle est conçue pour fonctionner avec les modèles existants pris en charge par Qt Quick tels que ListModel et XmlListModel. Mais du fait que le modèle à une dimension ListModel n'a pas de notion de colonnes, nous avons besoin de fournir la correspondance entre les colonnes et les propriétés. Ainsi, le modèle de la vue ci-dessus ressemble à ceci :
Code:

1 2 3 4 5 ListModel { id: dataModel ListElement { title:"Image title"; credit:"some author"; source:"http:/..." } ListElement { title:"Another title"; credit:"some author"; source:"http:/..." } }
Et pour créer une vue de la table :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 TableView { model: dataModel TableColumn { property: "title" caption: "Title" width: 120 } TableColumn { property: "credit" caption: "Credit" width: 120 } TableColumn { property: "source" caption: "Image source" width: 200 } }
Notez que les propriétés sur l'ordre et la largeur des colonnes ne sont utilisées que lors de la configuration initiale de la vue. L'utilisateur est libre de redimensionner ou réarranger les colonnes. A première vue, fournir une seule propriété par colonne pourrait sembler être une limitation. Toutefois, si vous avez besoin de plus d'une propriété par élément, vous pouvez tout simplement utiliser une ListElement imbriquée :

Code:

ListElement { firstColumn: ListElement { description: "Bananas"; color: "yellow" } }

Par défaut, la TableView fournira un délégué complet avec des éléments de texte élidé dans chaque cellule. Toutefois, là où Qt Quick est vraiment brillant, c'est sa facilité à personnaliser les éléments. Actuellement, c'est possible en surchargeant rowDelegate, itemDelegate et headerDelegate. Ainsi, par exemple si vous avez besoin d'un délégué très basique permettant de modifier les élément, vous pouvez faire quelque chose comme ceci :
Code:

1 2 3 4 5 itemDelegate: TextInput { text: itemValue onAccepted: model.setProperty(rowIndex, itemProperty, text) }
Ce n'est pas une solution globale pour tout pour le moment. Les limitations connues comprennent la navigation limitée au clavier et l'absence de sélection multiple. Mis à part cela, tout fonctionne plutôt bien par dessus toute utilisation classique deQt 4.7, donc vous pouvez commencer à jouer avec lui aujourd'hui en clonant ce référentiel : Qt Components

Cet article est une traduction de Table View with Qt Quick, de Jens Bache-Wiig.