Plusieurs ListView superposées en 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é.

Commentez Donner une note à l'article (5)

Article lu   fois.

Les deux auteurs

Site personnel

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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 :

 
Sélectionnez
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 !

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.