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 itemitem
below, it looks like the first image. If I set an actual width (of say300
, 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.pngUsing a fixed width: http://i.imgur.com/37RcP1X.png
-
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 itemitem
below, it looks like the first image. If I set an actual width (of say300
, 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.pngUsing a fixed width: http://i.imgur.com/37RcP1X.png
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
width
andheight
to the direct child ofScrollView
which in your case isitem
and henceScrollView
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 reasonitem.width
andview.width
do not work. So it seems the ScrollView is not passing its width on to theItem
here.Just tried using a
Rectangle
, aColumn
and aRepeater
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 } } }
-
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
width
andheight
to the direct child ofScrollView
which in your case isitem
and henceScrollView
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 reasonitem.width
andview.width
do not work. So it seems the ScrollView is not passing its width on to theItem
here.Just tried using a
Rectangle
, aColumn
and aRepeater
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 } } }