aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quick/views/listview/highlight.qml
diff options
context:
space:
mode:
Diffstat (limited to 'examples/quick/views/listview/highlight.qml')
-rw-r--r--examples/quick/views/listview/highlight.qml44
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]