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. List view in Column, scroll problem
Forum Updated to NodeBB v4.3 + New Features

List view in Column, scroll problem

Scheduled Pinned Locked Moved QML and Qt Quick
2 Posts 1 Posters 1.2k Views 1 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.
  • T Offline
    T Offline
    TT_NBE
    wrote on 3 Nov 2014, 15:34 last edited by
    #1

    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.1

    ApplicationWindow {
    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
                }
            }
    
        }
    }
    

    }
    @

    1 Reply Last reply
    0
    • T Offline
      T Offline
      TT_NBE
      wrote on 4 Nov 2014, 09:29 last edited by
      #2

      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

      1 Reply Last reply
      0

      1/2

      3 Nov 2014, 15:34

      • Login

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