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:

1. En modell, som innehåller data som du vill att din listvy ska visa
2. En delegat, som definierar hur varje element i modellen kommer att visas
3. 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 objektets id som innehåller data
• delegate, som accepterar komponenten vi ska använda för att visa data i modellen

import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 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. Det kan kräva att layouten 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 ett platsmarkeringsmeddelande i listvyns mitt, och du vill troligen inte att den ska fylla hela listvyns bredd. Du vill uppenbarligen också att det är dolt när listvyns modell väl har befolkats 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 PlaceholderMessage.helpfulAction .

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