Discussion :

[gbdivers]

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 :



Voici une courte vidéo la montrant en action.

J'ai aussi fait quelques captures d'écran à partir d'autres plateformes :

Mac

Windows

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[baliloo]

Bonsoir, est-il possible de lier TableView du Qt Quick au models du module QtSql ? (QSqlTableModel ou QSqlQueryModel par exemple)