Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Nested menus using ListView

    QML and Qt Quick
    3
    4
    2239
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      brents1 last edited by

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

      1 Reply Last reply Reply Quote 0
      • M
        MartinJ last edited by

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

        1 Reply Last reply Reply Quote 0
        • B
          brents1 last edited by

          Thank you so much! That works great.

          1 Reply Last reply Reply Quote 0
          • C
            CookieCollider last edited by

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

            1 Reply Last reply Reply Quote 0
            • First post
              Last post