Create nested lists

[eterfampubcoet51]

Hi,

i’m looking for a way to create a page with nested lists, like a tasks list.
The screen should display a list of days (taken from a JSON data result), and for each day, display a list of tasks (that an array of JSON objects in the array of days in the JSON result).
The list of days should be scrollable, but inside a day, the height of the ‘day’ group/widget should auto adjust to the content, that is to the number of tasks.

Thanks for your advice.

[BeautyMore]

Hallo hier ist ein Bsp.

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: "Verschachtelte Listen"

    ListView {
        anchors.fill: parent
        model: ListModel {
            ListElement {
                title: "Kategorie 1"
                items: ListModel {
                    ListElement { name: "Item 1.1" }
                    ListElement { name: "Item 1.2" }
                    ListElement { name: "Item 1.3" }
                }
            }
            ListElement {
                title: "Kategorie 2"
                items: ListModel {
                    ListElement { name: "Item 2.1" }
                    ListElement { name: "Item 2.2" }
                }
            }
            ListElement {
                title: "Kategorie 3"
                items: ListModel {
                    ListElement { name: "Item 3.1" }
                    ListElement { name: "Item 3.2" }
                    ListElement { name: "Item 3.3" }
                    ListElement { name: "Item 3.4" }
                }
            }
        }

        delegate: Item {
            width: parent.width
            Column {
                spacing: 5

                Text {
                    text: model.title
                    font.bold: true
                }

                // Unterliste anzeigen, wenn die Kategorie ausgewählt wird
                Repeater {
                    model: model.items // Zugriff auf die untere Liste

                    Text {
                        text: model.name
                        paddingLeft: 20 // Einrückung für Unterelemente
                    }
                }

                Rectangle {
                    height: 1
                    color: "#cccccc"
                    width: parent.width
                }
            }
        }
    }
}

Erklärung des Codes

1. ListView:

• Das Haupt-UI-Element, das die verschachtelten Listen anzeigt.
• Das Modell besteht aus einer Liste von Kategorien (ListModel), wobei jede Kategorie eine eigene Liste von Items hat.

2. ListModel:

• Jede ListElement im Hauptmodell hat einen Titel und ein weiteres ListModel, das die Items dieser Kategorie enthält.

3. Delegate:

• Der Delegate definiert, wie jede Kategorie angezeigt wird.
• Innerhalb des Delegates gibt es einen Column, der den Titel der Kategorie und die zugehörigen Items anzeigt.

4. Repeater:

• Der Repeater wird verwendet, um die Items innerhalb jeder Kategorie anzuzeigen.
• Jedes Item wird mit einer Einrückung dargestellt, um es visuell von der Kategorie zu unterscheiden.