Vistes de llista

Les vistes de llista «Listviews» poden ajudar a mostrar objectes d'un model d'una manera atractiva. Per a utilitzar una vista de llista, haureu de realitzar un seguiment de tres coses:

1. El model, el qual conté les dades que voleu mostrar a la vista de llista.
2. El delegat, el qual defineix com es mostrarà cada element en el model.
3. La vista de llista en si, la qual mostrarà la informació del model segons el delegat.

Per a més aclariments, la documentació de les Qt té una pàgina informativa sobre el tema.

Crear una vista de llista bàsica

Una vista de llista té dues propietats essencials a les quals hem de parar atenció:

• model, el qual accepta les dades o l'id de l'objecte que conté les dades
• delegate, el qual accepta el component que utilitzarem per a mostrar les dades en el model

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

        // Si proporcioneu un número per a la propietat del model, es generaran aquest nombre
        // d'entrades de dades a partir de 0.
        model: 200

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

En els casos en què les dades del model només contenen una sola peça de dades, com en l'exemple anterior, podeu prendre les dades en el model fent referència a modelData.

Una nota sobre els delegats: si el vostre model conté objectes amb dades en propietats amb nom, el nom d'aquestes propietats s'exposarà automàticament al delegat i només podreu utilitzar aquests noms en el vostre 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
    }
}

El Kirigami ofereix una sèrie de components que s'han dissenyat específicament per al seu ús en vistes de llista, com Kirigami.BasicListItem , Kirigami.CheckableListItem i Kirigami.SwipeListItem , tots els quals es basen en el Kirigami.AbstractListItem . També hi ha Kirigami.CheckDelegate , Kirigami.RadioDelegate i Kirigami.SwitchDelegate , els quals estan dissenyats per a aprofitar aquests controls específics.

No obstant això, no esteu limitat a utilitzar aquests components i podreu triar els que vulgueu. Això pot requerir alguns ajustos de la vostra disposició.

Missatges amb marcadors de posició

En alguns casos, possiblement voldreu utilitzar una vista de llista que estigui buida fins que l'usuari faci alguna cosa. En aquestes situacions, utilitzar un Kirigami.PlaceholderMessage pot ser una forma atractiva de dir-li a l'usuari que la llista està buida i que hi pot fer alguna cosa.

En general, voldreu col·locar un missatge amb marcador de posició al centre de la ListView, però no voldreu que abasti tota l'amplada de la ListView. Òbviament, també voldreu que no s'oculti un cop el model de la ListView es completi amb les dades. Afortunadament, les ListView tenen una propietat anomenada count, la qual facilita fer això.

Possiblement també voldreu afegir una acció d'ajuda al vostre missatge amb un marcador de posició. Això es pot fer adjuntant una acció a la propietat 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!!"})
        }
    }
}