Listvyer
Listvyer kan hjälpa dig att visa objekt från en modell på ett attraktivt sätt. För att använda en listvy måste du hålla redan på tre saker:
- En modell, som innehåller data som du vill att din listvy ska visa
- En delegat, som definierar hur varje element i modellen kommer att visas
- Själva listvyn, som visar information från modellen enligt delegaten
Om du vill ha ytterligare klargöranden, har Qt-dokumentationen en informativ sida om ämnet.
Skapa en grundläggande listvy
En listvy har två grundläggande egenskaper som vi måste ta hänsyn till:
model
, som accepterar objektetsid
som innehåller datadelegate
, som accepterar komponenten vi ska använda för att visa data i modellen
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
// Att tillhandahålla ett tal för modellegenskapen genererar så många dataposter med början på
// 0.
model: 200
delegate: Kirigami.BasicListItem {
label: "Item " + modelData
}
}
}

I fallet där modellens data bara innehåller ett enda datavärde, som i exemplet ovan, kan du bara hämta data i modellen genom att referera till modelData
.
En anmärkning om delegater: Om din modell innehåller objekt med data i namngivna egenskaper, exponeras namnet på egenskaperna automatiskt till din delegat och du behöver bara använda namnen i din delegat.
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 erbjuder ett antal komponenter som specifikt har konstruerats för användning i listvyer, såsom Kirigami.BasicListItem
, Kirigami.CheckableListItem
och Kirigami.SwipeListItem
, som alla bygger på Kirigami.AbstractListItem
. Det finns också Kirigami.CheckDelegate
, Kirigami.RadioDelegate
och Kirigami.SwitchDelegate
, som är konstruerade för att dra nytta av de specifika kontrollerna.
Dock är du inte begränsad till att använda de här komponenterna och kan välja vilka du vill, även om det kan betyda att layouten måste justeras något.
Platsmarkeringsmeddelanden
I vissa fall, kan du vilja använda en listvy som är tom tills användaren gör något. I sådana situationer, kan användning av en Kirigami.PlaceholderMessage
vara ett attraktivt sätt att tala om för användaren att listan är tom och att de kan göra något åt det.
I allmänhet placerar du en PlaceholderMessage i listvyns mitt, och du vill inte heller att den inte ska fylla hela listvyns bredd. Man vill uppenbarligen också att det inte är synligt när listvyns modell befolkas med data: som tur är har listvyer en egenskap som heter count
som gör det rätt enkelt.
Du kanske också vill lägga till en hjälpsam åtgärd i platsmarkeringsmeddelandet. Det går att göra genom att bifoga en åtgärd till egenskapen helpfulAction
i en 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!!"})
}
}
}

Listhuvuden
Listvyer stöder också huvudkomponenter med egenskapen header
, och Kirigami tillhandahåller en attraktiv komponent i detta syfte: Kirigami.ItemViewHeader
. Vi tillhandahåller komponenten med text för egenskapen title
och med en bildplats för egenskapen backgroundImage.source
så är vi klara.
En intressant egenskap i listvyn är headerPositioning
. Den påverkar hur vårt huvud flyttas när vi interagerar med en lång listvy som expanderar utanför sidans höjd. headerPositioning
kan ställas in till tre olika värden:
ListView.OverlayHeader
: Med det här värdet dras huvudet ihop när vi börjar rulla neråt, men förblir synligt i ett mer kompakt tillstånd.ListView.PullBackHeader
: Huvudet försvinner när vi rullar neråt, men dyker upp igen när vi rullar tillbaka uppåt, även om vi inte har nått listvyns topp ännu.ListView.InlineHeader
: Huvudet beter sig som en del av listvyn och förblir längst upp i listvyn.
ListView {
id: myList
headerPositioning: ListView.OverlayHeader
header: Kirigami.ItemViewHeader {
backgroundImage.source: "../banner.jpg"
title: "LongListView"
}
model: 200
delegate: Kirigami.BasicListItem {
label: "Item " + modelData
}
}
