summaryrefslogtreecommitdiffstats
path: root/examples/declarative/parallax/ParallaxView.qml
diff options
context:
space:
mode:
Diffstat (limited to 'examples/declarative/parallax/ParallaxView.qml')
-rw-r--r--examples/declarative/parallax/ParallaxView.qml64
1 files changed, 63 insertions, 1 deletions
diff --git a/examples/declarative/parallax/ParallaxView.qml b/examples/declarative/parallax/ParallaxView.qml
index 38bb8c0..1708ad1 100644
--- a/examples/declarative/parallax/ParallaxView.qml
+++ b/examples/declarative/parallax/ParallaxView.qml
@@ -1,7 +1,11 @@
import Qt 4.6
Item {
+ id: root
+
property alias background: background.source
+ default property alias content: visualModel.children
+ property int currentIndex: 0
Image {
id: background
@@ -10,9 +14,12 @@ Item {
width: Math.max(list.viewportWidth, parent.width)
}
- default property alias content: visualModel.children
ListView {
id: list
+
+ currentIndex: root.currentIndex
+ onCurrentIndexChanged: root.currentIndex = currentIndex
+
orientation: "Horizontal"
overShoot: false
anchors.fill: parent
@@ -23,4 +30,59 @@ Item {
preferredHighlightEnd: 0
highlightRangeMode: "StrictlyEnforceRange"
}
+
+ ListView {
+ id: selector
+
+ currentIndex: root.currentIndex
+ onCurrentIndexChanged: root.currentIndex = currentIndex
+
+ height: 50
+ anchors.bottom: parent.bottom
+ anchors.horizontalCenter: parent.horizontalCenter
+ width: Math.min(count * 50, parent.width - 20)
+ interactive: width == parent.width - 20
+ orientation: "Horizontal"
+
+ delegate: Item {
+ width: 50; height: 50
+ id: delegateRoot
+
+ Image {
+ id: image
+ source: modelData.icon
+ smooth: true
+ scale: 0.8
+ transformOrigin: "Center"
+ }
+
+ MouseRegion {
+ anchors.fill: parent
+ onClicked: { root.currentIndex = index }
+ }
+
+ states: State {
+ name: "Selected"
+ when: delegateRoot.ListView.isCurrentItem == true
+ PropertyChanges {
+ target: image
+ scale: 1
+ y: -5
+ }
+ }
+ transitions: Transition {
+ NumberAnimation {
+ properties: "scale,y"
+ }
+ }
+ }
+ model: visualModel.children
+
+ Rectangle {
+ color: "#40FFFFFF"
+ x: -10;
+ y: -10;
+ width: parent.width + 20; height: parent.height + 10
+ }
+ }
}