Plusieurs ListView superposées en QML

| Christophe Dumez | traducteur : Thibaut Cuvelier |

Bien qu'il puisse sembler que l'utilisation de deux ListView soit assez courante, elle n'est pas documentée actuellement dans un exemple QML. Ces exemples QML ne considèrent qu'une ListView par écran, qui a les mêmes dimensions que cet écran et est flickable pour naviguer dans son contenu.. Au cas où on a besoin de plusieurs ListView l'une au-dessus de l'autre, cela devient plus délicat et le code doit être adapté.

Commentez

- Titre : Plusieurs ListView superposées en QML

- Auteurs : Christophe Dumez, traducteur : Thibaut Cuvelier

- Parution : 6 février 2012

- Mise à jour : 21 mars 2012

- Licence : Copyright ® 2012 Christophe Dumez. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. L'article original

- II. Le problème

- III. Une solution

- IV. Remerciements

I - L'article original

Cet article est une adaptation en langue française de Several ListViews on top of one another with QML.

II - Le problème

Bien qu'il puisse sembler que l'utilisation de deux ListView soit assez courante, elle n'est pas documentée actuellement dans un exemple QML. Ces exemples QML ne considèrent qu'une ListView par écran, qui a les mêmes dimensions que cet écran et est flickable pour naviguer dans son contenu.. Au cas où on a besoin de plusieurs ListView l'une au-dessus de l'autre, cela devient plus délicat et le code doit être adapté.

III - Une solution

Tout d'abord, les ListView doivent avoir la même hauteur que leur contenu et ne plus être indépendamment flickables (on utilise interactive: false à cette fin). Ensuite, on peut créer un Flickable qui a les mêmes dimensions que l'écran et y mettre les deux ListView (de préférence en utilisant une Column).

Le code ressemble à ceci :

import QtQuick 1.0

Rectangle {
width: 360
height: 360

Flickable {
anchors.fill: parent
contentHeight: listsColumn.height
interactive: true

Column {
id: listsColumn
width: parent.width

ListView {
id: fruitsView
interactive: false
model:  FruitsModel {}
delegate: DummyDelegate { height: 60 }
header: Header {text: "Fruits"; height: 30}
height: 60 * count + 30
width: parent.width
}

ListView {
id: vegetablesView
interactive: false
model: VegetablesModel {}
delegate: DummyDelegate { height: 60 }
header: Header {text: "Vegetables"; height: 30}
height: 60 * count + 30
width: parent.width
}
}
}
}

Pour calculer la hauteur des ListView, on utilise leur propriété count (le nombre d'items dans la vue) et on le multiplie par la hauteur du délégué (ici, soixante pixels). On doit aussi tenir compte de la hauteur de l'en-tête des vues (trente pixels dans l'exemple).

Ceci n'est valable que quand les délégués ont une hauteur statique. C'est heureusement le cas la plupart du temps.

IV - Remerciements

Merci à Claude Leloup pour sa relecture attentive !