2. Vue
Le composant Repeater est assez rudimentaire pour l'affichage d'un modèle : il ne
prédéfinit rien, il n'impose aucune structure sur la séquence d'éléments générés. La
vraie puissance du patron MVD s'exprime avec des vues plus intelligentes, comme
ListView pour afficher une liste, GridView pour une grille, TableView pour un tableau,
voire PathView pour un chemin.
2.1. En liste
Le code actuel de BiblioApp peut se réécrire de manière bien plus élégante pour la
liste des livres, dans la partie supérieure de l'écran, à l'aide de ListView. Le modèle et
le délégué restent identiques, mais la structure du code de la vue change : au lieu de
disposer, au niveau du code de BiblioApp, les éléments en liste, la vue s'en charge
elle-même. Graphiquement, l'application ne change pas d'un poil, mais cette
restructuration facilitera l'évolution sur le plan visuel.
Note > Les deux exemples qui suivent sont disponibles dans les dossiers vuelistview-biblioapp et vue-listview-highlight-biblioapp .
Rectangle {
width: window.width
// …
ListView {
anchors.fill: parent
model: bookModel delegate: Button { text: title + ", " + author onClicked: // …
(comme précédemment) } } }
Tout composant Qt Quick doit être positionné dans l'interface (voir Section 3.3,
Système d'ancres). Sans cette instruction, la vue n'aurait pas d'espace déterminé :
elle serait alors affichée de manière arbitraire.
Une vue s'associe toujours à un modèle, tout comme Repeater.
338
Le composant Repeater est assez rudimentaire pour l'affichage d'un modèle : il ne
prédéfinit rien, il n'impose aucune structure sur la séquence d'éléments générés. La
vraie puissance du patron MVD s'exprime avec des vues plus intelligentes, comme
ListView pour afficher une liste, GridView pour une grille, TableView pour un tableau,
voire PathView pour un chemin.
2.1. En liste
Le code actuel de BiblioApp peut se réécrire de manière bien plus élégante pour la
liste des livres, dans la partie supérieure de l'écran, à l'aide de ListView. Le modèle et
le délégué restent identiques, mais la structure du code de la vue change : au lieu de
disposer, au niveau du code de BiblioApp, les éléments en liste, la vue s'en charge
elle-même. Graphiquement, l'application ne change pas d'un poil, mais cette
restructuration facilitera l'évolution sur le plan visuel.
Note > Les deux exemples qui suivent sont disponibles dans les dossiers vuelistview-biblioapp et vue-listview-highlight-biblioapp .
Rectangle {
width: window.width
// …
ListView {
anchors.fill: parent
model: bookModel delegate: Button { text: title + ", " + author onClicked: // …
(comme précédemment) } } }
Tout composant Qt Quick doit être positionné dans l'interface (voir Section 3.3,
Système d'ancres). Sans cette instruction, la vue n'aurait pas d'espace déterminé :
elle serait alors affichée de manière arbitraire.
Une vue s'associe toujours à un modèle, tout comme Repeater.
338