[resolved] Dynamic height in ListView?

markg85

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

markg85

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.

geniuss

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.

geniuss

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.