QML Recipes

DualPaneFlickable.qml

import QtQuick 2.2

Flickable {
  id: flickable
  anchors.fill: parent
  contentWidth: flickable.width * 2
  contentHeight: 0
  boundsBehavior: Flickable.StopAtBounds
  flickableDirection: Flickable.HorizontalFlick
  onMovementEnded: snapPage(this)
  
  Behavior on contentX { SmoothedAnimation { velocity: 1000 } }
  
  function snapPage(self) {
    if (self.visibleArea.xPosition < 0.25)
        self.contentX = 0;
    else if (self.visibleArea.xPosition > 0.25)
        self.contentX = self.width;
  }

  // First pane
  Rectangle {
    x: 0
    y: 0
    width: flickable.width
    height: flickable.height
    color: "green"
  }
  
  // Second pane
  Rectangle {
    x: flickable.width
    y: 0
    width: flickable.width
    height: flickable.height
    color: "yellow"
  }
}