Vistas de lista

Las Listviews le pueden ayudar a mostrar los objetos de un modelo de una forma atractiva. Para usar una vista de lista, debe seguir la pista de tres cosas:

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, que acepta los datos o el id del objeto que contiene los datos
• delegate, que acepta el componente que usaremos para mostrar los datos del modelo

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
        }
    }
}

En los casos donde los datos del modelo solo contienen un único dato, como en el ejemplo anterior, puede tomar los datos del modelo haciendo referencia a 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!!"})
        }
    }
}