diff options
Diffstat (limited to 'examples/quick/views/listview/highlight.qml')
-rw-r--r-- | examples/quick/views/listview/highlight.qml | 68 |
1 files changed, 34 insertions, 34 deletions
diff --git a/examples/quick/views/listview/highlight.qml b/examples/quick/views/listview/highlight.qml index 5b03d30f25..092b4d59bd 100644 --- a/examples/quick/views/listview/highlight.qml +++ b/examples/quick/views/listview/highlight.qml @@ -58,44 +58,44 @@ import "content" Rectangle { width: 200; height: 300 - // Define a delegate component. A component will be + // Define a delegate component. The component will be // instantiated for each visible item in the list. - Component { - id: petDelegate - Item { - id: wrapper - width: 200; height: 55 - Column { - SmallText { text: 'Name: ' + name } - SmallText { text: 'Type: ' + type } - SmallText { text: 'Age: ' + age } - } - // indent the item if it is the current item - states: State { - name: "Current" - when: wrapper.ListView.isCurrentItem - PropertyChanges { target: wrapper; x: 20 } - } - transitions: Transition { - NumberAnimation { properties: "x"; duration: 200 } - } - MouseArea { - anchors.fill: parent - onClicked: wrapper.ListView.view.currentIndex = index - } + component PetDelegate: Item { + id: pet + width: 200; height: 55 + + required property int index + required property string name + required property string type + required property int age + + Column { + SmallText { text: 'Name: ' + pet.name } + SmallText { text: 'Type: ' + pet.type } + SmallText { text: 'Age: ' + pet.age } + } + // indent the item if it is the current item + states: State { + name: "Current" + when: pet.ListView.isCurrentItem + PropertyChanges { target: pet; x: 20 } + } + transitions: Transition { + NumberAnimation { properties: "x"; duration: 200 } + } + MouseArea { + anchors.fill: parent + onClicked: pet.ListView.view.currentIndex = pet.index } } //! [0] // Define a highlight with customized movement between items. - Component { - id: highlightBar - Rectangle { - width: 200; height: 50 - color: "#FFFF88" - y: listView.currentItem.y; - Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } } - } + component HighlightBar : Rectangle { + width: 200; height: 50 + color: "#FFFF88" + y: listView.currentItem.y + Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } } } ListView { @@ -104,12 +104,12 @@ Rectangle { x: 30 model: PetsModel {} - delegate: petDelegate + delegate: PetDelegate {} focus: true // Set the highlight delegate. Note we must also set highlightFollowsCurrentItem // to false so the highlight delegate can control how the highlight is moved. - highlight: highlightBar + highlight: HighlightBar {} highlightFollowsCurrentItem: false } //! [0] |