diff options
Diffstat (limited to 'examples/quick/views/listview/highlight.qml')
-rw-r--r-- | examples/quick/views/listview/highlight.qml | 44 |
1 files changed, 31 insertions, 13 deletions
diff --git a/examples/quick/views/listview/highlight.qml b/examples/quick/views/listview/highlight.qml index 137347203a..1f9b9c015c 100644 --- a/examples/quick/views/listview/highlight.qml +++ b/examples/quick/views/listview/highlight.qml @@ -9,13 +9,15 @@ import QtQuick import "content" Rectangle { - width: 200; height: 300 + width: 200 + height: 300 // Define a delegate component. The component will be // instantiated for each visible item in the list. component PetDelegate: Item { id: pet - width: 200; height: 55 + width: 200 + height: 55 required property int index required property string name @@ -23,9 +25,15 @@ Rectangle { required property int age Column { - SmallText { text: 'Name: ' + pet.name } - SmallText { text: 'Type: ' + pet.type } - SmallText { text: 'Age: ' + pet.age } + 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 { @@ -34,7 +42,10 @@ Rectangle { PropertyChanges { pet.x: 20 } } transitions: Transition { - NumberAnimation { properties: "x"; duration: 200 } + NumberAnimation { + properties: "x" + duration: 200 + } } MouseArea { anchors.fill: parent @@ -45,24 +56,31 @@ Rectangle { //! [0] // Define a highlight with customized movement between items. component HighlightBar : Rectangle { - width: 200; height: 50 + width: 200 + height: 50 color: "#FFFF88" - y: listView.currentItem.y - Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } } + y: ListView.view.currentItem.y + Behavior on y { + SpringAnimation { + spring: 2 + damping: 0.1 + } + } } ListView { id: listView - width: 200; height: parent.height + width: 200 + height: parent.height x: 30 - model: PetsModel {} - delegate: PetDelegate {} + model: PetsModel { } + 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] |