Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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
    Screenshot_4.png

    Overlapping over other delegates
    Screenshot_5.png

    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.


  • Moderators

    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
        }
      }
    }
    


  • Thanks a lot! Your soultion wokred perfectly.


Log in to reply