Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



  • 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.


  • Moderators

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



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


  • Qt Champions 2018

    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


Log in to reply