ListView delegates of different heights overlap

Raiden

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.

sierdzio

Your messageText does not have any control over the size of the delegate. In other words, your problem is not with delegates overlapping, but with messageText not fitting into the delegate. You need to rewrite this code so that the delegate size changes based on how large messageText 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
    }
  }
}

Raiden

Thanks a lot! Your soultion wokred perfectly.