QML: ListView dynamical height in following of content. How?

bogong

Hello!
Is there way to do dynamical height of elements in QML LictView? for example I have list of elements that contain description and for each of elements description is different, therefor should be different hight of element. Previously I've been using Column but there was no big amount of elements.

J.Hilk

@bogong sure, I use custom heights for elements to simulate a TreeView out of a ListView since TreeView is still not part of the QML module and probably won't be (at least the free to use Qt5 Variant)

I'm actually doing this via column and a repeater and not a ListView, but it should work for both the same way!

Excerption:

 Flickable{
        id: scrollArea
        anchors{
            left: parent.left
            right:parent.right
            top:header.bottom
            bottom: parent.bottom
        }

        boundsBehavior: Flickable.StopAtBounds

        contentHeight: Math.max(scrollArea.height,  3.2 * entryHeight + NavigationModel.contentHeight)

        Column{
            id:middle
            anchors{
                left: parent.left
                right: parent.right
            }

            Repeater{
                model: NavigationModel.model
      
                delegate: Item{
                                    id:child1
                                    width: middle.width
                                    height: modelData.selected ? parentItem.height + childrenItem.count *root.entryHeight : parentItem.height
                
                                    property var model: modelData.children
                
                                    Behavior on y {
                                        NumberAnimation{duration:  200}
                                    }
                                    Behavior on height{
                                        NumberAnimation{duration:  200}
                                    }
....
....
                    }
       }

A shame really, I had a fully working AbstractTreeModel and everything, but I'm forced to do this workaround 😞

bogong

Solution found. Example published here https://youtu.be/SYWcgY4q12o Issue closed. Thx to KDAB series https://www.youtube.com/channel/UCjsJkTJSZ5G7ewH2uf08t0A

GrecKo

The video doesn't really explain what the solution is. (The question is not very clear too)

What op wanted was wrapping text, so you need Text delegate, set its width (either by explicitely setting the width property, or with anchors left+right or fill) and set a wrapMode.

As always don't forget to set a size for your ListView too, most commonly anchors.fill: parent

Solved QML: ListView dynamical height in following of content. How?