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:/..." }
} |
| 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
}
} |
| Code : | Sélectionner tout |
ListElement { firstColumn: ListElement { description: "Bananas"; color: "yellow" } }
| 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.
