Cannot get correct width for a ListView embedded in a ScrollView



  • I'm trying to overlay a ListView that is embedded in a ScrollView, but cannot seem to figure out the right width to use for the ListView delegate.

    If I use a width of parent.width for the item item below, it looks like the first image. If I set an actual width (of say 300, it looks like the second. So it seems that the problem is that the item is not receiving a width. Could someone help me disentangle why this could be the case?

        ScrollView{
            id: root
            anchors.fill: parent
            Item {
                id: item
                height: 3000
                width: parent.width
                ListView {
                  id: view
                  anchors.fill: parent
                  model: 100
                  delegate: Rectangle{height: 30; width: parent.width; border.color: "red"; border.width: 1}
                }
    
                Rectangle {
                    color: "purple"
                    width: 30
                    height: 30
                    x: 25
                    y: 25
                }
    
            }
        }
    

    Using parent.width: http://i.imgur.com/iDyY1bs.png

    Using a fixed width: http://i.imgur.com/37RcP1X.png


  • Moderators

    Hi @cheezus,
    Quoting from the docs:

    The width and height of the child item will be used to define the size of the content area.

    May be I'm wrong but what I understand is that the user needs to provide the widthand height to the direct child of ScrollView which in your case is item and hence ScrollView will adjust accordingly.



  • Two questions arise from your code:

    Why is there a Rectangle next to the ListView in the Item?
    Why do you have a hardcoded height set?

    To me it seems ambigous what the ScrollView should scroll. The Item or the ListView? If I reorder your code like this it works:

    Window {
        visible: true
        width: 640
        height: 480
    
        ScrollView{
            id: root
            anchors.fill: parent
            ListView {
                id: view
                anchors.fill: parent
                model: 100
                delegate: Rectangle{height: 30; width: parent.width; border.color: "red"; border.width: 1}
            }
        }
        Rectangle {
            color: "purple"
            width: 30
            height: 30
            x: 25
            y: 25
        }
    }
    

    But thats probably not what you want? Maybe you can clarify what your goal is you want to achieve?

    BTW, I found out that when you use root.width in your code the delegates get a width. But for some reason item.width and view.width do not work. So it seems the ScrollView is not passing its width on to the Item here.

    Just tried using a Rectangle, a Column and a Repeater and this also shows the same symptoms. So to me it seems like there might be a bug in the ScrollView? But I am still a QML beginner so not sure. Here is the code:

        ScrollView{
            id: root
            anchors.fill: parent
            Rectangle {
                id: item
                height: 3000
                width: parent.width
                Column {
                    Repeater {
                      id: view
                      model: 100
                      Rectangle{height: 30; width: parent.width; border.color: "red"; border.width: 1}
                    }
                }
    
                Rectangle {
                    color: "purple"
                    width: 30
                    height: 30
                    x: 25
                    y: 25
                }
    
            }
        }
    


  • @p3c0 Thanks, I did re-read this in the end and forgot to update the thread. It all works great now, thanks!



  • @hvoigt FWIW, I wanted to overlay the first ListView with other random objects. Imagine buckets and things going into multiple buckets. I wanted to scroll both the ListView and the item.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.