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. Flicking one rectangle area should automatically flick another rectangle area, how ?
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 3 Posters 4.1k 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.
  • Z Offline
    Z Offline
    zanes
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • M Offline
      M Offline
      maxpayne
      wrote on last edited by
      #2

      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)

      1 Reply Last reply
      0
      • C Offline
        C Offline
        cpscotti
        wrote on last edited by
        #3

        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.

        cpscotti.com/blog/ - Used when I need to kill some time at work :D

        1 Reply Last reply
        0
        • Z Offline
          Z Offline
          zanes
          wrote on last edited by
          #4

          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
                              }
                          }
                      }
          
                  }
              @
          
          1 Reply Last reply
          0

          • Login

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