Lijstweergaven

Listviews 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.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

        // 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 u kunt kiezen uit diegenen die u wenst. Dit kan enig aanpassen in uw indeling 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 plaatshouderbericht in het centrum van de ListView willen plaatsen en u wilt waarschijnlijk ook niet dat het de gehele breedte van de ListView gebruikt. U zult natuurlijk ook willen dat het verborgen 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 PlaceholderMessage.helpfulAction 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!!"})
        }
    }
}