Solved 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