# Componentes modelo-delegado o listas y cuadrículas

* Modelo: son los datos entrantes como nombre de usuario, edad. Es el componente QML ListModel. 
* Delegado: cómo desea mostrar la información, en una lista, una rejilla o cuadrícula, un rectángulo o cualquier otro componente. Es el componente QML elegido para mostrar los datos.

Se muestran 2 ejemplos:

1. Rellenando el modelo de datos directamente con información definida en el proprio fichero QML.
2. Rellenando el modelo de datos con información procedente de código o funcionalidad C++.

## Ejemplo 1. Rellenando el modelo con datos definidos en el propio fichero QML. Mostrar un menú para Side Bar.

Añada el siguiente código a **main.qml**:

```
import QtQuick 2.15
import QtQuick.Controls 2.15
import org.mauikit.controls 1.3 as Maui

Maui.ApplicationWindow
{
    id: root

    Maui.SideBarView
    {
        anchors.fill: parent

        sideBarContent: Maui.Page
        {
            Maui.Theme.colorSet: Maui.Theme.Window
            anchors.fill: parent

            headBar.visible: false

            ListModel {
            id: mainMenuModel
                ListElement { name: "General behavior" ; description: "Configure other options" ; icon: "love" }
                ListElement { name: "Mouse" ; description: "Adjust mouse behavior" ; icon: "input-mouse" }
                ListElement { name: "Virtual desktops" ; description: "Desktops settings" ; icon: "virtual-desktops" }
            }

            Maui.ListBrowser {
                id: menuSideBar

                anchors.fill: parent
                anchors.margins: 5

                horizontalScrollBarPolicy: ScrollBar.AlwaysOff
                verticalScrollBarPolicy: ScrollBar.AlwaysOff

                currentIndex: 0

                spacing: 5

                model: mainMenuModel

                delegate: Maui.ListBrowserDelegate {
                    width: ListView.view.width
                    height: 60
                    label1.text: name
                    label2.text: description

                    iconSource: icon

                    onClicked: {
                        switch (index) {
                            case 0: {
                                menuSideBar.currentIndex = index
                                //stackView.push("qrc:/Page1.qml")
                                return
                            }
                            case 1: {
                                menuSideBar.currentIndex = index
                                //stackView.push("qrc:/Page2.qml")
                                return
                            }
                            case 2: {
                                menuSideBar.currentIndex = index
                                //stackView.push("qrc:/Page3.qml")
                                return
                            }
                        }
                    }
                }
            }
        }

        Maui.Page
        {
            anchors.fill: parent
            showCSDControls: true

            headBar.background: null

            StackView {
                id: stackView
                anchors.fill: parent
            }
        }
    }
}
```

<figure><img src="/files/7CPImKlS8TVObhiXd0e1" alt=""><figcaption></figcaption></figure>

currentIndex le permite establecer como seleccionado el correspondiente elemento al pulsar el mismo, mostrándolo con el color de selección, en este caso azul.

Si no desea seleccionar ningún elemento:

```
currentIndex: -1
```

También puede mostrar múltiples páginas de menú usando un StackView:

```
sideBarContent: Maui.Page
{
    Maui.Theme.colorSet: Maui.Theme.Window
    anchors.fill: parent

    headBar.visible: false

    Component.onCompleted: {
        stackMenu.push("qrc:/Menu1.qml")
    }

    StackView {
        id: stackMenu
        anchors.fill: parent
    }
}
```

Un código usando StackView se muestra en:

{% content-ref url="/pages/18KOwA6wrzadfZEkz8aQ" %}
[Animaciones](/start/mauikit/documentacion-util/animaciones.md)
{% endcontent-ref %}

## Ejemplo 2. Rellenando el modelo con datos procedentes de código o funcionalidad C++. Mostrar una lista de usuarios.

1\. Siga los pasos de 1 a 5 indicados en:

{% content-ref url="/pages/B1NwihLwqiufEoWkKvWQ" %}
[Conectar funcionalidad C++ con la interfaz QML](/start/mauikit/documentacion-util/conectar-funcionalidad-c++-con-la-interfaz-qml.md)
{% endcontent-ref %}

sustituyendo los pasos 1 y 2 por los indicados en el ejemplo final con **QVariantList**.

2\. Añade el siguiente código a **main.qml**

```
import QtQuick 2.15
import QtQuick.Controls 2.15
import org.mauikit.controls 1.3 as Maui
import org.kde.myapp 1.0

Maui.ApplicationWindow
{
    id: root

    Maui.Page
    {
        anchors.fill: parent
        showCSDControls: true

        ListModel {
            id: usersModel
        }

        Component.onCompleted: {
            getUsers()
        }

        function getUsers() {
            var users = Backend.users
            for (var i = 0; i < users.length; i++) {
                usersModel.append({"name": users[i].name,"subname": users[i].subname,"active": users[i].active,"age": users[i].age})
            }
        }

        Maui.ListBrowser {
            id: listUsers

            anchors.fill: parent
            anchors.margins: 5

            horizontalScrollBarPolicy: ScrollBar.AlwaysOff
            verticalScrollBarPolicy: ScrollBar.AlwaysOff

            currentIndex: -1

            spacing: 5

            model: usersModel

            delegate: Maui.ListBrowserDelegate {
                width: ListView.view.width
                height: 60
                label1.text: name + " " + subname
                label2.text: age
            }
        }
    }
}
```

<figure><img src="/files/KOuGSYt6QSqgLabTJuVW" alt=""><figcaption></figcaption></figure>

## Componentes modelo-delegado.

Maui.ListBrowser

{% content-ref url="/pages/nLWznK5baFR1I3y7FFQZ" %}
[ListBrowser](/start/mauikit/controles/listbrowser.md)
{% endcontent-ref %}

Maui.GridBrowser

{% content-ref url="/pages/bAde38pHQb6OQt1xjasL" %}
[GridBrowser](/start/mauikit/controles/gridbrowser.md)
{% endcontent-ref %}

ListView

{% embed url="<https://doc.qt.io/qt-5/qml-qtquick-listview.html>" %}

GridView

{% embed url="<https://doc.qt.io/qt-5/qml-qtquick-gridview.html>" %}

Repeater

{% embed url="<https://doc.qt.io/qt-5/qml-qtquick-repeater.html>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.novaflowos.com/start/mauikit/documentacion-util/componentes-modelo-delegado-o-listas-y-cuadriculas.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.