QML ListView place new list item below last list item - qt

Question

I'm trying to create a simple chat bubble layout where the height of each message's rectangle can be variable while the width is fixed. Now we need to place the new message right below the last message present in the listview. Since height is variable, ListView.spacing can't be decided between any two elements. So how can I achieve this?
Listview code:
ListView{
id: listView
anchors.fill: parent
anchors.top: parent.top
anchors.topMargin: 10
delegate: ChatMessageItem{}
model: listModel
spacing: 10
}
ChatMessageItem's code
Item{
Rectangle {
color: "#6BB9F0"
height: 50
width: (childrenRect.width < 200? childrenRect.width : 200)
radius: 7
Text {
id: name
text: username
}
Text {
id: message
text: msg
anchors.top: name.bottom
wrapMode: Text.WordWrap
Component.onCompleted: {
if(width > 200)
width = 200;
else if(width < 50)
width = 50;
}
}
}
}

Answer 1

Your issue is that your Item does not has a height. Your ListView therefore does not know what height your delegates have. This has nothing to do with your ListView.spacing. Try the following change:
Item{
height: rect.height
Rectangle {
id: rect
color: "#6BB9F0"
height: name.paintedHeight + message.paintedHeight
width: (childrenRect.width < 200 ? childrenRect.width : 200)
radius: 7
Text {
id: name
text: username
}
Text {
id: message
text: msg
anchors.top: name.bottom
wrapMode: Text.WordWrap
Component.onCompleted: {
if(width > 200)
width = 200;
else if(width < 50)
width = 50;
}
}
}
}