Vistas de lista

Listviews can help you display objects from a model in an attractive way. To use a list view, you have to keep track of three things:

1. El modelo, que contiene los datos que quiere que muestre la vista de lista
2. El delegado, que define cómo se muestran los elementos del modelo
3. La vista de lista, propiamente dicha, que mostrará la información del modelo como indica el delegado

Si necesita más aclaraciones, la documentación de Qt tiene una página informativa sobre este tema.

Creación de una vista de lista básica

Una vista de lista tiene dos propiedades esenciales a las que debemos prestar atención:

• model, which accepts the data or the id of the object that holds the data
• delegate, which accepts the component we will use to display the data in the 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 proporciona un número para la propiedad del modelo se generará dicho número de
        // entradas de datos, empezando por 0.
        model: 200

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

In cases where your model data only contain a single piece of data, like in the example above, you can just grab the data in the model by referencing modelData.

Una nota sobre los delegados: si el modelo contiene objetos con datos en propiedades con nombre, el nombre de estas propiedades se expondrá automáticamente al delegado y solo necesitará usar dichos nombres en el delegado.

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 offers a number of components that have been designed specifically for use in list views, such as Kirigami.BasicListItem , Kirigami.CheckableListItem and Kirigami.SwipeListItem , all of which build upon Kirigami.AbstractListItem . There are also Kirigami.CheckDelegate , Kirigami.RadioDelegate , and Kirigami.SwitchDelegate , which are designed to take advantage of those specific controls.

However, you are not limited to using these components and you can choose whichever ones you wish. This may require some tweaking of your layout.

Mensajes de relleno

In some cases, you might want to use a list view that is empty until the user does something. In these situations, using a Kirigami.PlaceholderMessage can be an attractive way of telling your user that the list is empty and that they can do something about it.

You will generally want to place a placeholder message in the center of the ListView and you will likely not want it to span the entire width of the ListView. You will obviously also want it to be hidden once the ListView's model becomes populated with data. Thankfully, ListViews have a property named count that makes doing this quite easy.

You might also want to add a helpful action to your placeholder message. This can be done by attaching an action to the PlaceholderMessage.helpfulAction property.

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