Qt Forum

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

    Update: Forum Guidelines & Code of Conduct

    [SOLVED] Creating ListModels for Nested ListViews

    QML and Qt Quick
    listview
    1
    1
    491
    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.
    • M
      myQtQml last edited by myQtQml

      The listed code with nested ListView works as expected. Here the ListModels are statically created. In my requirement, initially both the ListModels (rootModel & childModel) are empty. The list element details are there in a json file. The file is read in javascript and list elements are appended. For each rootModel element childModel would be different. rootModel can be created easily, but how to create dynamically changing childModel for all rootElement?

      import QtQuick 2.2
      import QtQuick.Window 2.1
      import QtQuick.Layouts 1.1
      
      Window {
          visible: true
          width: 360
          height: 360
      
          ListModel {
              id: rootModel
      
              ListElement { rootText: "root-1" }
              ListElement { rootText: "root-2" }
          }
      
          ListView {
              id: rootListView
      
              anchors.fill: parent
              model: rootModel
              delegate: rootDelegate
          }
      
          Component {
              id: rootDelegate
      
              Item {
                  width: 360
                  height: 70
      
                  RowLayout {
                      anchors.fill: parent
                      Rectangle {
                          id: rect1
                          width: parent.width / 2
                          height: 20
                          color: "lightgray"
                          anchors.left: parent.left
                          Text {
                              id: text1
                              text: rootText
                          }
                      }
                      Rectangle {
                          id: rect2
                          width: parent.width / 2
                          height: 60
                          color: "lightblue"
                          anchors.right: parent.right
      
                          ListModel {
                              id: childModel
      
                              ListElement { childText: "child-1" }
                              ListElement { childText: "child-2" }
                              ListElement { childText: "child-3" }
                          }
      
                          ListView {
                              id: childListView
                              anchors.fill: parent
      
                              model: childModel
                              delegate: Text { text: childText }
                          }
                      }
                  }
              }
          }
      }
      

      Solved by creating array of list models and changing model of listView dynamically according to list view index.

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