Nested menus using ListView



  • 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)!



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



  • Thank you so much! That works great.



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.