# 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="https://3899745996-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FED1v8xhNFPWKlgOCuryr%2Fuploads%2FdLWqvRKI0vAGbrkYnQjT%2FModelo-Delegado-Ejemplo-1.png?alt=media&#x26;token=b56d3aea-e1f9-4483-9c05-e15cd9291017" 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="animaciones" %}
[animaciones](https://docs.novaflowos.com/start/mauikit/documentacion-util/animaciones)
{% 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="conectar-funcionalidad-c++-con-la-interfaz-qml" %}
[conectar-funcionalidad-c++-con-la-interfaz-qml](https://docs.novaflowos.com/start/mauikit/documentacion-util/conectar-funcionalidad-c++-con-la-interfaz-qml)
{% 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="https://3899745996-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FED1v8xhNFPWKlgOCuryr%2Fuploads%2F6erENMrC8YxbD7oKb2wY%2FModelo-Delegado-Ejemplo-2.png?alt=media&#x26;token=f675f6c3-e3fc-4852-9511-674e6cb5e1ee" alt=""><figcaption></figcaption></figure>

## Componentes modelo-delegado.

Maui.ListBrowser

{% content-ref url="../controles/listbrowser" %}
[listbrowser](https://docs.novaflowos.com/start/mauikit/controles/listbrowser)
{% endcontent-ref %}

Maui.GridBrowser

{% content-ref url="../controles/gridbrowser" %}
[gridbrowser](https://docs.novaflowos.com/start/mauikit/controles/gridbrowser)
{% 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>" %}