ListView dynamic and content variable height



  • 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' "



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



  • 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.