Detect vertical scroll direction in QML ListView? - maemo.org

Active Topics

HDMI with Leste (1)
to Maemo 7 / Leste by teroyk - 2 days, 17 hrs ago
Firefox with Leste (9)
to Maemo 7 / Leste by teroyk - 4 days, 19 hrs ago
more...

Thread Tools

sony123	2012-06-30 , 21:16
Posts: 650 \| Thanked: 619 times \| Joined on Nov 2009	#1

I want to implement something like Harmattan's default pull-down search bar. My implementation is like this:

Code:

ListView {
    onMovementStarted: { 
        // trigger pull-down item 
        showPulldownItem(contentY, verticalVelocity);
    }
    onMovementEnded: { 
        // trigger timer to hide pull-down item 
        timer.restart();
    }
}

Timer {
    id: timer
    onTriggered: { pulldownItem.state = ""; }
}

I want the pull-down item only when the listview is pulled down from the top of the list. ContentY is used to detect top-of-list, but I am stuck at detecting the vertical direction. The problem is, verticalVelocity is 0 when movementStarted signal is triggered so I cannot use it for the detection. Is there any other way to detect the direction?

I have googled and saw some pull-down implementations are triggered by "onMovementEnded". However, I don't like the solution because there is a significant delay before the pull-down item is invoked.

Quote & Reply |

gionni88	2012-06-30 , 21:18
Posts: 435 \| Thanked: 769 times \| Joined on Apr 2010	#2

Check flicking bool property: http://doc.qt.nokia.com/4.7-snapshot...#flicking-prop

__________________
My Fremantle projects: InternetRadioPlayer, QRadio, InternetRadioWidget, AutoRemoveSms, PSAutoLock, TodoListWidget, MediaPlayerWidget
My Harmattan projects: InternetRadioPlayer, QMLRadio, SigmaPlayer, WidgetCanvas, NotesExporter, 3DTris, NoStopPlayer, NotesImporter

Quote & Reply |

The Following User Says Thank You to gionni88 For This Useful Post:
sony123

sony123	2012-07-01 , 04:39
Posts: 650 \| Thanked: 619 times \| Joined on Nov 2009	#3

Originally Posted by gionni88

Check flicking bool property: http://doc.qt.nokia.com/4.7-snapshot...#flicking-prop

I tried, but these properties only tells me whether the list is flicking.
How do I know the direction, i.e. flicking up or down?

Quote & Reply |

gionni88	2012-07-01 , 07:12
Posts: 435 \| Thanked: 769 times \| Joined on Apr 2010	#4

In QML there are signals for every property change, so with

Code:

onVerticalVelocityChanged: console.debug(verticalVelocity)

you get the current flicking velocity, which is negative if you're going up, or positive if you're going down.

But for your purpose, I'd show the pulldownitem when contentY is something like -200 (which means the user has pulled the list 200pixels below).

onContentYChanged: {
console.debug(contentY)
if (contentY == -200) showPulldownItem()
}

EDIT: ofc the debug line is only for checking, remove if from your release version.

Last edited by gionni88; 2012-07-01 at 07:15.

Quote & Reply |

The Following User Says Thank You to gionni88 For This Useful Post:
sony123

Wonko	2012-07-01 , 09:52
Posts: 456 \| Thanked: 1,580 times \| Joined on Dec 2009	#5

I knew I already saw something similar somewhere. Finally, I recalled that I stumbled across this functionality when I read a post about Kasvopus:
http://projects.developer.nokia.com/...s/HomeList.qml
Unfortunately, the source code doesn't say about anything which license is used. Maybe you can find more license info. In doubt I would simply contact the author.

Edit: For the sake of completeness I add the link to the blog post as well: http://www.substanceofcode.com/2011/...apps-new-face/

__________________

MeePasswords --- Q To-Do --- QZeeControl
Advanced Clock Plugin --- Binary Clock, Desktop Version --- libswt-hildon
Stultitia Simplex --- To-Do-O --- VU Meter --- Zeecontrol
My homepage with assorted posts about my apps, Qt/QML, etc.: http://ruedigergad.com

Last edited by Wonko; 2012-07-01 at 09:55.

Quote & Reply |

The Following User Says Thank You to Wonko For This Useful Post:
sony123

sony123	2012-07-01 , 16:37
Posts: 650 \| Thanked: 619 times \| Joined on Nov 2009	#6

@gionni88 @Wonko Thanks for your suggestions!

Quote & Reply |

sony123	2012-07-03 , 07:18
Posts: 650 \| Thanked: 619 times \| Joined on Nov 2009	#7

The solution I use is like this:

Code:

Page {
  property bool bannerStart: false

  ListView {
    onContentYChanged: {
      if (bannerStart && (contentY <= params.bannerMargin))
        showPullDownItem(); 
    }
    onMovementStart: {
      if (contentY==0) bannerStart = true;
      else                    bannerStart = false;
    }
    onVerticalVelocityChanged: {
      // Prevent triggering pulldown item when rebound from top boundary.
      if (verticalVelocity>0) bannerStart = false;
    }
    onMovementEnded: {
      bannerStart = false;
      // trigger timer to hide pull-down item 
      timer.restart();
    }
  }
}

This achieves what I want:
> Responsive pull-down with little delay, doesn't wait till focus is released to show.
> Don't trigger pull-down item when the list rebounds from top boundary.
> Don't trigger pull-down item when users start dragging at the top of the list downwards, then without releasing touch drag up to hit the top boundary.

The timer approach used by Tommi looks more flexible, but I didn't use use it because I am concerned about the power usage. But maybe I am wrong...

Quote & Reply |

« Previous Thread | Next Thread »

Forum Jump

All times are GMT. The time now is 13:00.

Active Topics

HDMI with Leste (1)

Firefox with Leste (9)