Flicking one rectangle area should automatically flick another rectangle area, how ?
-
Dear All,
I got rectangle1 and rectangle2 with different parent and both are under flickable.
So, when i flick rectangle1 i want the rectangle 2 to flick in the same direction like the rectangle 1.
any ideas?
Thanks in advance.Zanes
-
From rectangle 1, use onFlickStarted signal (http://doc.qt.nokia.com/4.7-snapshot/qml-flickable.html#onFlickStarted-signal) to send the flick direction (http://doc.qt.nokia.com/4.7-snapshot/qml-flickable.html#flickingHorizontally-prop) to rectangle 2.
Property binding should help you achieve this (http://www.qtcentre.org/threads/35786-Signal-and-Slots-with-QML-confusion-with-QML-items)
-
Maybe you can bind both Flickables' contentX and contentY (from rectangle1 to 2)
those two properties give you the exact "position" of the content inside the flickable so binding both would make both move acordingly..If you need the behaviour to be both ways I think having a "master" contentX/Y on the parent might be the way to go.
-
Thank you for your reply maxpayne and cpscotti.
With onFlickStarted its not accurate but onFlickEnded it works good but there is time delay, which i understand.
But another problem with this is, when i flick by just a click it all works fine but when i click and drag the rectangle2 flick is not working!!!
I guess onFlickEnded and started signals are fired only on a mouse click and not when i drag the mouse !!!
@
Rectangle{
id: rectangle1
width: 600
height: 200
color:"green"
clip: trueFlickable{ id:flickable1 anchors.fill: parent contentWidth: rectangleFlickable1.width onFlickEnded: { flickable2.contentX = flickable1.contentX } Rectangle{ id: rectangleFlickable1 width: 800 height: 200 color:"yellow" clip:true Text { id: name text: "123456789123456789" font.pointSize:84 } } } } Rectangle{ id: rectangle2 width: 600 height: 200 color:"green" clip: true anchors.top: rectangle1.bottom Flickable{ id:flickable2 anchors.fill: parent contentWidth: rectangleFlickable2.width onFlickEnded: { flickable1.contentX = flickable2.contentX } Rectangle{ id: rectangleFlickable2 width: 800 height: 200 color:"blue" clip:true Text { id: name2 text: "123456789123456789" font.pointSize:84 } } } } @