ListView dynamic and content variable height

helenebro

Hi,
I want create a list of "messages" like a chat. This message can be different height (depending of the text). My problem is when content of delegate (all messages) is longer than parent of the listview.
I have found this example but I can't see the last message :

Window {
    visible: true
    width: 400; height: 600;

    Component {
        id: myDelegate
        Rectangle {
            id: content
            anchors { left: parent.left; right: parent.right }
            height: myText.implicitHeight + 4
            border.width: 1
            border.color: "lightsteelblue"
            Text {id:myText; text: 'Message: ' + message ; width:parent.width; wrapMode: Text.WordWrap}
        }
    }
    Rectangle{
        border.color: "blue"
        width:200
        height: 200;
        anchors.centerIn: parent
        ListView {
            id: view
            anchors { fill: parent; margins: 2 }
            model: messagesModel
            delegate: myDelegate
            spacing: 4
        }
    }
    ListModel {
        id:messagesModel
        ListElement {
            message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        }
        ListElement {
            message: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
        }
        ListElement {
            message: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
        }
        ListElement {
            message: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        }
    }
}

If delegate height is bigger than listview height, I can't see all messages. I would like in this case content move.

My solution is to have a listview with the same height of content and change anchors when it's necessary :

        ListView {
            id: view

            width: parent.width
            eight: contentHeight
            anchors.top:parent.top;
            anchors.topMargin: (view.contentHeight<parent.height) ? 2 : (parent.height-view.contentHeight)
            Component.onCompleted: {
                console.log("complete", view.contentHeight)
            }
            model: messagesModel
            delegate: myDelegate
            spacing: 10
        }

It work's but I have the error :
" QML ListView: Binding loop detected for property 'height' "

? Offline

Hi! I'm not sure if this can help you but maybe you want to have a look at snapMode and positionViewAtIndex.

helenebro

I have found the solution to delete the warning . The warning happens when your list view has "0" items. If I add a condition on height :

height : count > 0 ? contentHeight : 0

I have no warning