Nested menus using ListView

brents1

I'm trying to create a menu in Qt Quick that allows the user to drill down into a sublist of items. Ideally the datasource would be nested XML, but I'll take anything at this point. I'm thinking of just using a ListView and changing the datasource each time an item is clicked. However, I wanted to see what others are doing, and hopefully there is a better way of achieving this.

EDIT: I got this working somewhat. When I click on an item it navigates to the child items. However, how do I go back to the previous model? See code below:
@import QtQuick 1.1

Rectangle {
id:root
width: 800
height: 480

ListModel {
    id: model
    ListElement {
        title: "Item 1"
        items: [
            ListElement {
                title: "Item 11"
                items: [
                    ListElement {
                        title: "Item 111"
                    },
                    ListElement {
                        title: "Item 112"
                    },
                    ListElement {
                        title: "Item 113"
                    },
                    ListElement {
                        title: "Item 114"
                    }
                ]
            },
            ListElement {
                title: "Item 12"
            },
            ListElement {
                title: "Item 13"
            }
         ]
    }
    ListElement {
        title: "Item 2"
        items: [
            ListElement { title: "Item 22" },
            ListElement { title: "Item 23" },
            ListElement { title: "Item 24" }
         ]
    }
}

Component {
    id: delegate
    Rectangle {
        height: 40
        width: 200
        color: "LightGray"
        Text {
            color: "red"
            font.bold: true
            text: title
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (model.items != undefined)
                {
                    view.model = model.items
                    view.model.append({title: "Back"})
                }
                else if (title == "Back")
                {
                    // How do I go back???
                    view.model = parent.model
                }
                else
                {
                    // Do something
                }
            }
        }
    }
}

ListView {
    id: view
    anchors.fill: parent
    model: model
    delegate: delegate
}

}@

Here is an example of what I want it to look like:
!http://unleashthephones.com/wp-content/uploads/2011/08/SubList1.jpg(SubList)!

MartinJ

One possibility is to store the parent model in the "Back" element that you append, e.g.

@
if (model.items != undefined)
{
model.items.append({title: "Back", "parent": view.model})
view.model = model.items
}
else if (title == "Back")
{
// How do I go back???
view.model = model.parent
}
@

brents1

Thank you so much! That works great.

CookieCollider

So, is it possible to divide the sublists in seperate files? I tried a few different ways but without success. Any good advises?

Example:

FoodList.qml
@ ListModel {
id: foodList
ListElement {name: "Fruits"; ??/subList: "fruitList"/ }
ListElement {name: "Vegetables"; ??/subList: "vegtableList"/ }
ListElement {name: "Meat"; ??/subList: "meatList"/ }
}@

FruitList.qml
@ ListModel {
id: fruitList
ListElement {name:"Apple}
ListElement {name:"Banana}
}@