Lijstweergaven

Lijstweergaven kan u helpen om objecten uit een model op een attractieve manier te tonen. Om een lijstweergave te gebruiken moet u drie dingen volgen:

1. Het model dat de gegevens bevat die u in uw lijstweergave wilt tonen
2. De delegate, die definieert hoe elk element in het model getoond zal worden
3. De list view zelf, die de informatie uit het model volgens de delegate zal tonen

Als u verdere verheldering wilt, de Qt-documentatie heeft een informatieve pagina over het onderwerp.

Een basis lijstweergave aanmaken

Een lijstweergave heeft twee essentiële eigenschappen waar we aandacht aan moeten besteden:

• model, die de gegevens accepteert of de id van het object dat de gegevens bevat
• delegate, die de component accepteert die we willen gebruiken om de gegevens in het model te tonen

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

    // Een getal leveren voor de eigenschap model zal dat getal genereren uit gegevensitems
    // beginnend vanaf 0.
    model: 200

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

}

In gevallen waar uw modelgegevens slechts een enkel stukje gegevens bevatten, zoals in het bovenstaande voorbeeld, kunt u de gegevens in het model pakken door te wijzen naar modelData.

Een opmerking over gedelegeerden: als uw model objecten bevat met gegevens eigenschappen met namen, zal de naam van deze eigenschappen automatisch zichtbaar zijn aan uw gedelegeerde en u hoeft alleen deze namen in uw gedelegeerde te gebruiken.

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 biedt een aantal componenten die specifiek ontworpen zijn voor gebruik in lijstweergaven, zoals Kirigami.BasicListItem, Kirigami.CheckableListItem en Kirigami.SwipeListItem, die allemaal bouwen op Kirigami.AbstractListItem. Er zijn ook Kirigami.CheckDelegate, Kirigami.RadioDelegate en Kirigami.SwitchDelegate, die ontworpen zijn om te profiteren van deze specifieke besturingen.

U bent echter niet beperkt tot het gebruik van deze componenten en kunt kiezen uit diegenen die u wenst - hoewel dat enig aanpassen in uw indeling kan betekenen.

Meldingen met plaatshouders

In sommige gevallen zou u een lijstweergave willen gebruiken die leeg is totdat de gebruiker iets doet. In deze situaties kan gebruik van een Kirigami.PlaceholderMessage een attractieve manier zijn om uw gebruiker te vertellen dat de lijst leeg is en dat deze er iets aan kan doen.

In het algemeen zult u een PlaceholderMessage in het centrum van de ListView willen plaatsen en u wilt ook niet dat het de gehele breedte van de ListView gebruikt. U zult natuurlijk ook niet willen dat het onzichtbaar is nadat het model van ListView bevolkt is met gegevens: gelukkig heeft ListViews een eigenschap genaamd count die dit erg gemakkelijk maakt.

U zou ook een behulpzame actie willen toevoegen aan uw plaatshoudermelding. Dit kan gedaan worden door een actie aan de eigenschap helpfulAction van Kirigami.PlaceHolderMessage vast te maken.

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!!"})
    }
  }
}

Koppen in lijsten

ListViews ondersteunen ook kopcomponenten met de eigenschap header en Kirigami biedt een attractieve component voor dit doel: Kirigami.ItemViewHeader. We bieden deze component met tekst voor de eigenschap title en met een afbeeldingslocatie voor de eigenschap backgroundImage.source en we zijn gereed.

Een interessante eigenschap van de lijstweergave is headerPositioning. Dit heeft invloed op de manier waarop onze kop beweegt wanneer we werken met een lange lijstweergave die zich uitsteekt over de hoogte van de pagina. headerPositioning kan ingesteld worden op drie verschillende instellingen:

• ListView.OverlayHeader: in deze instelling zal de kop zich inkorten nadat we omlaag schuiven maar zal zichtbaar blijven in een compactere status.
• ListView.PullBackHeader: de kop zal verdwijnen als we omlaag schuiven, maar zal opnieuw verschijnen als we terug omhoog schuiven, zelfs als we de top van de lijstweergave nog niet hebben bereikt.
• ListView.InlineHeader: de kop zal zicht gedragen als onderdeel van de lijstweergave en bovenaan de lijstweergave blijven.

ListView {
  id: myList

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

  model: 200

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