Flicking one rectangle area should automatically flick another rectangle area, how ?

zanes

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

maxpayne

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)

cpscotti

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.

zanes

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: true

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

        }
    @