How to increase the "scrolling height" of a Qml ListView?
-
So I have got a qml
ListView
and the bottom of the list I have got a little banner that is visible at all times. Now this works fine, but when I scroll the list to the end the bottom of the list is obviously covered by the banner. How can increase the amount of "scrolling height" so that the user is able to scroll further until the list is completely visible?ListView{ id: lisView anchors.fill: parent } Banner{ id: banner width: listView.width/2 anchors.bottom: parent.bottom }
-
You can put your ListView into a Rectangle or an Item with the size of your available space.
Here is an example :
Rectangle{ // Can be replace with Item id: lisView height: parent.height-banner.height // Make sure to set height or width or you could lose the scroll width: parent.width ListView{ // Your ListView you can put what you want in it spacing : 2 model : 30 delegate: Rectangle { height: 20 width: 50 border.color: "black" border.width: 1 color: "blue" } anchors.fill: parent } } Rectangle{ // did not have your banner component so I replaced it with a rectangle but the idea is the same id: banner width: parent.width height: 50 opacity: 0.4 //Set the opacity to make sure their is no more elements to show on the bottom of the ListView anchors.bottom: parent.bottom }
Hope this help
-
The problem is that I want my list to visible behind the banner (which is transparent). Your solution would constrain me to make the list on top of the banner.
-
This post is deleted!
-
-
Can you layout the banner below the view rather than on top?
-
@DavidM29 So what I want is the list to be partial visible behind the transparent banner (like in your 2nd screenshot), however when the user scrolls up they are able to scroll until the content of the
ListView
sits on top of the banner. -
Add
bottomMargin: banner.height
to yourListView
EDIT: and as @shaan7 said, a
footer
with az: 2
andfooterPositioning: ListView.OverlayFooter
works too. -
-
@daljit97 said in How to increase the "scrolling height" of a Qml ListView?:
@GrecKo setting the
bottomMargin
will make the view sit on top of the banner.No, it has nothing to do with that.
Just place the banner on top of yourListView
's delegate.
If your banner is a child of yourListView
, setz: 2
.
If it's a sibling of theListView
, declare it after or with a higherz
.See http://doc.qt.io/qt-5/qml-qtquick-item.html#z-prop and http://doc.qt.io/qt-5/qml-qtquick-listview.html#stacking-order-in-listview
4/13