Vues en liste

Un affichage en liste peut vous aider à afficher facilement et dynamiquement de nombreux composants.

Les affichages en liste peuvent vous aider à afficher les objets d’un modèle de manière attrayante. Pour utiliser un affichage en liste, vous devez tenir compte de trois éléments :

  1. Le modèle contenant les données que vous souhaitez afficher dans votre vue en liste.
  2. Le délégué, définissant comment chaque élément du modèle sera affiché.
  3. L’affichage en liste lui-même, qui affichera les informations du modèle en fonction du délégué.

Si vous souhaitez obtenir des précisions, la documentation de Qt contient une page d’informations sur ce sujet.

Création d’une Listview basique

Une vue en liste possède deux propriétés essentielles auxquelles nous devons prêter attention :

  • « model », acceptant les données ou l’« id » de l’objet détenant les données
  • « delegate », acceptant le composant que nous utiliserons pour afficher les données dans le modèle.
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami

Kirigami.Page {

  ListView {
    id: myList

    // La fourniture d'un nombre pour la propriété du modèle générera ce nombre d'entrées de données
    // à partir de 0.
    model: 200

    delegate: Kirigami.BasicListItem {
      label: "Item " + modelData
    }
  }

}

Dans les cas où les données de votre modèle ne contiennent qu’un seul élément de données, comme dans l’exemple ci-dessus, vous pouvez simplement rassembler les données dans le modèle en faisant référence à « modelData ».

Une note sur les délégués : si votre modèle contient des objets avec des données dans des propriétés nommées, le nom de ces propriétés sera automatiquement exposé à votre délégué et vous aurez seulement besoin d’utiliser ces noms dans votre délégué.

ListModel {
  id: myModel
  ListElement { type: "Item"; number: 0 }
  ListElement { type: "Item"; number: 1 }
  ListElement { type: "Item"; number: 2 }
  ListElement { type: "Item"; number: 3 }
}

ListView {
  id: myList

  model: myModel

  delegate: Kirigami.BasicListItem {
    label: type + " " + number
  }
}

Kirigami propose un certain nombre de composants spécialement conçus pour être utilisés dans des affichages en liste, tels que « Kirigami.BasicListItem », « Kirigami.CheckableListItem » et « Kirigami.SwipeListItem », reposant tous sur « Kirigami.AbstractListItem ». Il existe également « Kirigami.CheckDelegate x, « Kirigami.RadioDelegate » et « Kirigami.SwitchDelegate », conçus pour tirer parti de ces contrôles spécifiques.

Cependant, vous n’êtes pas limité à l’utilisation de ces composants. Vous pouvez choisir ceux que vous souhaitez - bien que cela puisse impliquer une certaine adaptation de votre mise en page.

Messages de remplacement

Dans certains cas, vous pouvez utiliser un affichage de liste restant vide jusqu’à ce que l’utilisateur fasse quelque chose. Dans ces situations, l’utilisation d’un objet « Kirigami.PlaceholderMessage » peut être une façon attrayante de dire à votre utilisateur que la liste est vide et qu’il peut faire quelque chose à ce sujet.

Vous souhaiterez généralement placer un « PlaceholderMessage » au centre de l’objet « ListView » et vous voudrez qu’il ne s’étende pas sur toute la largeur de ce dernier non plus. Vous voudrez évidemment aussi qu’il ne soit pas visible une fois que le modèle de la « ListView » sera rempli de données. Heureusement, les objets « ListView » ont une propriété nommée « count » la rendant très facile.

Vous pouvez également ajouter une action utile à votre message de remplacement. Vous pouvez le faire en attachant une action à la propriété « helpfulAction » de l’objet « Kirigami.PlaceHolderMessage ».

ListView {
  id: myList

  model: ListModel { id: myModel }

  delegate: Kirigami.BasicListItem {
    label: text
  }

  Kirigami.PlaceholderMessage {
    anchors.centerIn: parent
    width: parent.width - (Kirigami.Units.largeSpacing * 4)

    visible: myList.count === 0
    text: "Add something to me!"
    helpfulAction: Kirigami.Action {
      icon.name: "list-add"
      text: "Add"
      onTriggered: myModel.append({"text": "Hello!!"})
    }
  }
}

En-têtes de liste

Les objets » ListView » prennent également en charge les composants d’en-tête avec la propriété « header ». Kirigami fournit un composant attrayant à cet effet : « Kirigami.ItemViewHeader ». Nous fournissons à ce composant un texte pour la propriété « title » et un emplacement d’image avec la propriété « backgroundImage.source ». Et voilà, le tour est joué.

Une propriété intéressante de l’affichage en liste est l’objet « headerPositioning ». Cela va déterminer la façon dont votre en-tête sera déplacé quand nous interagirons avec un affichage d’une longue liste, dépassant la hauteur de la page. Cet objet peut être mis en œuvre selon trois configurations différentes :

  • Paramètre « ListView.OverlayHeader » : avec ce paramètre, l’en-tête se contractera lorsque nous commencerons à faire un défilement vers le bas mais restera visible dans sous une forme plus réduite.
  • « ListView.PullBackHeader » : l’en-tête disparaîtra lorsque nous ferons défiler la liste vers le bas, mais elle réapparaîtra lorsque nous ferons défiler la liste vers le haut, même si nous n’avons pas encore atteint le haut de la liste.
  • « ListView.InlineHeader » : l’en-tête se comportera comme une partie de l’affichage en liste et restera en haut de l’affichage en liste.
ListView {
  id: myList

  headerPositioning: ListView.OverlayHeader
  header: Kirigami.ItemViewHeader {
  backgroundImage.source: "../banner.jpg"
    title: "LongListView"
  }

  model: 200

  delegate: Kirigami.BasicListItem {
    label: "Item " + modelData
  }
}