title: QML: scroll multiple ListViews synchronously
body: <p>I want to have a single (vertical) ListView with (horizontal) ListView delegates.  </p>
  
  <p>The horizontal delegates should scroll synchronously. To do so, I put a Flickable on top of the ListViews and bind the contentX of the horizontal ListView to the contentX of the Flickable (and the same for the contentY of the vertical ListView) (Note: <a href="https://stackoverflow.com/questions/29700908/two-dimensional-table-with-nested-scrolling-areas-in-qml">Here</a> a different approach was described for the synchronous ListView scrolling but this seems to have performance issues on mobile devices) </p>
  
  <p>The code below kind of works but still has the following issues</p>
  
  <ul>
  <li>I don't get the onClicked in the Rectangle (I do get it when I remove the top Flickable)</li>
  <li>I want either horizontal flicking or vertical flicking but not both at the same time. I can restrict the flicking of the top Flickable by setting <code>flickableDirection: Flickable.HorizontalFlick</code> but then I can't flick vertically anymore (I was hoping that the Flickable would pass on unused mouse events to the vertical ListView but this doesn't seem to happen)</li>
  </ul>
  
  <p>Suggestions on how to fix these issues?</p>
  
  <p>Any help appreciated!</p>
  
  <pre><code>import QtQuick 2.0
  
  Item {
      id: main
      visible: true
      width: 600
      height: 600
  
      ListView {
          id: verticalList
          width: parent.width;
          height: parent.height;
          contentY : flickable.contentY
          anchors.fill: parent
          spacing: 10
          orientation: ListView.Vertical
          model: 100
          delegate:
              ListView {
                  id: horizontalList
                  width: parent.width;
                  height: 100;
                  contentX : flickable.contentX
                  spacing: 10
                  orientation: ListView.Horizontal
                  model: 20
                  property var verticalIndex : index
                  delegate:
                      Rectangle
                      {
                          property var colors : ['red', 'green', 'blue']
                          property var widths : [100, 200, 300]
                          height: 100
                          width: widths[(verticalIndex + model.index) % widths.length]
                          color: colors[model.index % colors.length]
  
                          MouseArea {
                              anchors.fill: parent
                              onClicked: {
                                  console.log("Rectangle.onClicked")
                              }
  
                          }
                      }
  
             }
  
      }
  
      //on top a Flickable
      Flickable {
         id: flickable
         height: parent.height
         width: parent.width
         contentHeight: 100*100 //nrOfRows * rowHeight
         contentWidth: 20*300 //nrOfEvent * max/averageEventWidth
       }
  
  
  }
  </code></pre>