examples/declarative/modelviews/parallax/qml/ParallaxView.qml
changeset 33 3e2da88830cd
parent 30 5dc02b23752f
equal deleted inserted replaced
30:5dc02b23752f 33:3e2da88830cd
    42 
    42 
    43 Item {
    43 Item {
    44     id: root
    44     id: root
    45 
    45 
    46     property alias background: background.source
    46     property alias background: background.source
       
    47     property int currentIndex: 0
    47     default property alias content: visualModel.children
    48     default property alias content: visualModel.children
    48     property int currentIndex: 0
       
    49 
    49 
    50     Image {
    50     Image {
    51         id: background
    51         id: background
    52         fillMode: Image.TileHorizontally
    52         fillMode: Image.TileHorizontally
    53         x: -list.contentX / 2
    53         x: -list.contentX / 2
    54         width: Math.max(list.contentWidth, parent.width)
    54         width: Math.max(list.contentWidth, parent.width)
    55     }
    55     }
    56 
    56 
    57     ListView {
    57     ListView {
    58         id: list
    58         id: list
       
    59         anchors.fill: parent
    59 
    60 
    60         currentIndex: root.currentIndex
    61         currentIndex: root.currentIndex
    61         onCurrentIndexChanged: root.currentIndex = currentIndex
    62         onCurrentIndexChanged: root.currentIndex = currentIndex
    62 
    63 
    63         orientation: Qt.Horizontal
    64         orientation: Qt.Horizontal
    64         boundsBehavior: Flickable.DragOverBounds
    65         boundsBehavior: Flickable.DragOverBounds
    65         anchors.fill: parent
       
    66         model: VisualItemModel { id: visualModel }
    66         model: VisualItemModel { id: visualModel }
    67 
    67 
    68         highlightRangeMode: ListView.StrictlyEnforceRange
    68         highlightRangeMode: ListView.StrictlyEnforceRange
    69         snapMode: ListView.SnapOneItem
    69         snapMode: ListView.SnapOneItem
    70     }
    70     }
    71 
    71 
    72     ListView {
    72     ListView {
    73         id: selector
    73         id: selector
    74 
    74 
    75         Rectangle {
       
    76             color: "#60FFFFFF"
       
    77             x: -10; y: -10; radius: 10; z: -1
       
    78             width: parent.width + 20; height: parent.height + 20
       
    79         }
       
    80         currentIndex: root.currentIndex
       
    81         onCurrentIndexChanged: root.currentIndex = currentIndex
       
    82 
       
    83         height: 50
    75         height: 50
    84         anchors.bottom: parent.bottom
    76         anchors.bottom: parent.bottom
    85         anchors.horizontalCenter: parent.horizontalCenter
    77         anchors.horizontalCenter: parent.horizontalCenter
    86         width: Math.min(count * 50, parent.width - 20)
    78         width: Math.min(count * 50, parent.width - 20)
    87         interactive: width == parent.width - 20
    79         interactive: width == parent.width - 20
    88         orientation: Qt.Horizontal
    80         orientation: Qt.Horizontal
    89 
    81 
       
    82         currentIndex: root.currentIndex
       
    83         onCurrentIndexChanged: root.currentIndex = currentIndex
       
    84 
       
    85         model: visualModel.children
    90         delegate: Item {
    86         delegate: Item {
    91             width: 50; height: 50
    87             width: 50; height: 50
    92             id: delegateRoot
    88             id: delegateRoot
    93 
    89 
    94             Image {
    90             Image {
   111                     scale: 1
   107                     scale: 1
   112                     y: -5
   108                     y: -5
   113                 }
   109                 }
   114             }
   110             }
   115             transitions: Transition {
   111             transitions: Transition {
   116                 NumberAnimation {
   112                 NumberAnimation { properties: "scale,y" }
   117                     properties: "scale,y"
   113             }
   118                 }
       
   119              }
       
   120         }
   114         }
   121         model: visualModel.children
   115 
       
   116         Rectangle {
       
   117             color: "#60FFFFFF"
       
   118             x: -10; y: -10; z: -1
       
   119             width: parent.width + 20; height: parent.height + 20
       
   120             radius: 10
       
   121         }
   122     }
   122     }
   123 }
   123 }