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:
- Het model dat de gegevens bevat die u in uw lijstweergave wilt tonen
- De delegate, die definieert hoe elk element in het model getoond zal worden
- 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 deid
van het object dat de gegevens bevatdelegate
, 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
}
}
