List view in Column, scroll problem
-
Hello,
Note: this is for a mobile application so although I use words like 'click' this is for use on Android and iOS (and the problem occurs on both).
I have a column with some buttons, between each set of buttons there is a listview.
So far no problem.
The problem starts if the users tries to scroll on off the listviews. As I want the column to scroll, not the listview the 'boundsbehaviour' property of the listview is set to 'StopAtBounds'.
Scrolling now works as expected IF the users starts by scrolling upward (i.e moving his finger downwards on the screen causing content on the screen to move down). When the scrolling has started, it works in both directions.
Starting a scroll by moving a finger upwards does not work (which is bad because the top of the listview is always on the screen, and this is the direction a user wants to scroll).
If the users starts a scroll on one of the buttons the scroll works perfectly.
Anybody came accross this problem at some point? Any suggestions?
To simulate this problem, create a new QML projects and replace the main.qml code by this code. Run this on android or iOS. (this code is a much simplified version of what I'm doing but it has the same problem).
I've tested this using Qt 5.3.1, I'll try downloading the new version (if I can find a way to upgrade to 5.3.2)
@import QtQuick 2.2
import QtQuick.Controls 1.1ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
id: window
ListModel
{
id: firstNames
ListElement{name:"Joe"}
ListElement{name:"Bob"}
ListElement{name:"Alice"}
ListElement{name:"Bill"}
ListElement{name:"Jane"}
ListElement{name:"Tarzan"}
ListElement{name:"John"}
ListElement{name:"Julie"}
ListElement{name:"Karen"}
ListElement{name:"Steve"}
ListElement{name:"Jack"}
ListElement{name:"Ellie"}
ListElement{name:"Me"}
}Component { id:myDelegate Rectangle { height: 30 width: window.width Text{text:name} } } ScrollView { anchors.fill: parent Column { Button { text: "Button 1" width: window.width } Item { Rectangle { anchors.fill: parent} height:390 width: window.width ListView { model: firstNames delegate: myDelegate anchors.fill: parent boundsBehavior: Flickable.StopAtBounds } } Button { text: "Button 2" width: window.width } Item { Rectangle { anchors.fill: parent} height:390 width: window.width ListView { model: firstNames delegate: myDelegate anchors.fill: parent boundsBehavior: Flickable.StopAtBounds } } Button { text: "Button 3" width: window.width } Item { Rectangle { anchors.fill: parent} height:390 width: window.width ListView { model: firstNames delegate: myDelegate anchors.fill: parent boundsBehavior: Flickable.StopAtBounds } } } }
}
@ -
I've been trying to solve this by adding a mouse area on top of each list view and although that fixes the scroll issue this isn't exactly a solution:
By adding the mouse area, all mouse events are handled by it, so a pressed, released, clicked,.. are no longer handeld by the listview delegate (as they are in the real application, e.g. change the delegate appearance on mouse down).
Of course I can propagate the events, but than the scroll issue is back (which makes sense of course).
I could also track all mouse events in the mouse area's and manually propagate them to the underlying components but it 'll be a hard job getting everything working.So unless anybody has a solution (please). I'm stuck with te scrollview, not stealing an upward swipe from the listview.
Any help would be appreciated