Qt Forum

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

    [resolved] Dynamic height in ListView?

    QML and Qt Quick
    2
    4
    14036
    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
      markg85 last edited by

      Hi,

      I'm wondering if it's possible to have a dynamic height for a ListView?
      Right now i have to set a fixed size for my ListView or anchor it to some other element. But what i'd like to do is let the height of the ListView grow with the elements that it has till a max settable height.

      Just as an example. In CSS (has nothing to do with QML but shows what i want to do) you could so something like this:
      CSS
      {
      min-height: 0px;
      max-height: 500px;
      }

      Now if you where to add text to that CSS element then it just gets the height it needs to have till 500px max.

      So how can this be done in QML? Can it even be done?
      I hope my example is a bit clear..

      Kind regards,
      Mark

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

        Got this one working.

        Some people probably would like to know how i did it so here we go.
        You have a ListView.count that returns how many items there are. Then all you have to know is the height for each element. In my case that was fixed anyway so i could simply do:
        @height: ListView.count * itemHeight@

        that did the trick for me. Note that i did define itemHeight myself and you have to use your ListView ID for the count.

        1 Reply Last reply Reply Quote 0
        • G
          geniuss last edited by

          Here is another solution which solves the problem:

          @ListView {
          id: myListView

          onCountChanged: {
              /* calculate ListView dimensions based on content */
          
              // get QQuickItem which is a root element which hosts delegate items
              var root = myListView.visibleChildren[0]
              var listViewHeight = 0
              var listViewWidth = 0
          
              // iterate over each delegate item to get their sizes
              for (var i = 0; i < root.visibleChildren.length; i++) {
                  listViewHeight += root.visibleChildren[i].height
                  listViewWidth  = Math.max(listViewWidth, root.visibleChildren[i].width)
              }
          
              myListView.height = listViewHeight
              myListView.width = listViewWidth
          }
          

          }
          @
          "onCountChanged" event fires after all delegate items are rendered so their sizes are known by that moment. This code works with Qt 5.4.0.

          1 Reply Last reply Reply Quote 0
          • G
            geniuss last edited by

            Here is another solution which solves the problem:

            @ListView {
            id: myListView

            onCountChanged: {
                /* calculate ListView dimensions based on content */
            
                // get QQuickItem which is a root element which hosts delegate items
                var root = myListView.visibleChildren[0]
                var listViewHeight = 0
                var listViewWidth = 0
            
                // iterate over each delegate item to get their sizes
                for (var i = 0; i < root.visibleChildren.length; i++) {
                    listViewHeight += root.visibleChildren[i].height
                    listViewWidth  = Math.max(listViewWidth, root.visibleChildren[i].width)
                }
            
                myListView.height = listViewHeight
                myListView.width = listViewWidth
            }
            

            }
            @
            "onCountChanged" event fires after all delegate items are rendered so their sizes are known by that moment. This code works with Qt 5.4.0.

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