Important: Please read the 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!


            id: scrollArea
                left: parent.left
                bottom: parent.bottom
            boundsBehavior: Flickable.StopAtBounds
            contentHeight: Math.max(scrollArea.height,  3.2 * entryHeight + NavigationModel.contentHeight)
                    left: parent.left
                    right: parent.right
                    model: NavigationModel.model
                    delegate: Item{
                                        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 Issue closed. Thx to KDAB series

  • 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