ListView delegates of different heights overlap
-
Hello, everyone.
Although i'm kinda new to QML, I'm working on my coursework on Qt - a messenger. And currently hard-stuck with issue while dealing with ListView and it's delegate.
Thing is, delegates containig messages can variate in height and if delegate is larger than other ones - it overlaps over others and, if it's the last one - part of text is clipped by the view, so it can't be seen unless you flick and hold the view.
Example of clipping if last delegate is longer
Overlapping over other delegates
ListView is defined as follows:
ListView { id: messagesView anchors.fill: parent anchors.bottomMargin: messageInput.height + 75 anchors.leftMargin: 5 anchors.rightMargin: 5 model: messagesModel spacing: 25//75 verticalLayoutDirection: ListView.BottomToTop delegate: MessagesDelegate { width: ListView.view.width time: model.timeStamp username: model.nickname message: model.text avatarSource: model.nickname == contactsModel.currentDialog() ? Qt.resolvedUrl("file:///" + contactsModel.currentAvatar()) : Qt.resolvedUrl("file:///" + applicationDirPath + "/../images/" + client.username() + "_avatar.png") ListView.onAdd: { messagesView.positionViewAtBeginning() } } }
It's delegate defined as follows:
//MessagesDelegate.qml RowLayout { id: rowLayout property string avatarSource property string username property string time property string message spacing: 10 RoundImage { id: avatar source: avatarSource Layout.preferredWidth: 40 Layout.preferredHeight: 40 Layout.alignment: Qt.AlignLeft | Qt.AlignTop } Item { id: messageContent Layout.alignment: Qt.AlignLeft Layout.leftMargin: 5 Layout.fillWidth: true Layout.fillHeight: true Label { id: senderNickname anchors.top: parent.top anchors.left: parent.left text: username } Label { id: timeSpan anchors.top: parent.top anchors.left: senderNickname.right anchors.leftMargin: 15 text: time } Label { id: messageText anchors.fill: parent anchors.topMargin: (timeSpan.height + senderNickname.height) / 1.5 text: message wrapMode: Text.Wrap } } }
It would be great, if someone could help with advice or similar example.
Thank you in advance.
Sincerely yours,
Raiden. -
Your
messageText
does not have any control over the size of the delegate. In other words, your problem is not with delegates overlapping, but withmessageText
not fitting into the delegate. You need to rewrite this code so that the delegate size changes based on how largemessageText
wants to be.One possible solution is something like (pseudocode!):
Row { Image { id: icon } Column { StatusItem { // this is your username and timestamp } Label { id: messageText text: message wrapMode: Text.Wrap height: contentHeight width: windowWidth - icon.width } } }