Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. ListView dynamic and content variable height
Forum Updated to NodeBB v4.3 + New Features

ListView dynamic and content variable height

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 3.6k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • H Offline
    H Offline
    helenebro
    wrote on last edited by
    #1

    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' "

    1 Reply Last reply
    0
    • ? Offline
      ? Offline
      A Former User
      wrote on last edited by
      #2

      Hi! I'm not sure if this can help you but maybe you want to have a look at snapMode and positionViewAtIndex.

      1 Reply Last reply
      0
      • H Offline
        H Offline
        helenebro
        wrote on last edited by
        #3

        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

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved