Plusieurs ListView superposées en QML

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

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

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.

Merci à Claude Leloup pour sa relecture attentive !