IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par gbdivers

0PARTAGES

0  0 
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.

Une erreur dans cette actualité ? Signalez-nous-la !

Avatar de 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)
0  0