Developpez.com

Télécharger gratuitement le magazine des développeurs, le bimestriel des développeurs avec une sélection des meilleurs tutoriels

Une TableView avec Qt Quick
Un nouveau composant QML pour afficher des tableaux

Le , par gbdivers, Inactif
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
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
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
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
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.


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de baliloo baliloo - Membre régulier https://www.developpez.com
le 26/08/2011 à 4:24
Bonsoir, est-il possible de lier TableView du Qt Quick au models du module QtSql ? (QSqlTableModel ou QSqlQueryModel par exemple)
Offres d'emploi IT
Développeur c++/qt h/f
Agap2 IT - Ile de France - Boulogne-Billancourt (92100)
Développeur C++/ QT h/f
CTS Consulting - Midi Pyrénées - Toulouse (31000)
Développeur c/c++ h/f
Atos - Languedoc Roussillon - Montpellier (34000)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique Qt : Thibaut Cuvelier -