--- a/examples/declarative/modelviews/listview/highlight.qml Tue Jul 06 15:10:48 2010 +0300
+++ b/examples/declarative/modelviews/listview/highlight.qml Wed Aug 18 10:37:55 2010 +0300
@@ -38,15 +38,15 @@
**
****************************************************************************/
+// This example shows how to create your own highlight delegate for a ListView
+// that uses a SpringAnimation to provide custom movement when the
+// highlight bar is moved between items.
+
import Qt 4.7
+import "content"
Rectangle {
- width: 400; height: 300
-
- // MyPets model is defined in dummydata/MyPetsModel.qml
- // The launcher automatically loads files in dummydata/* to assist
- // development without a real data source.
- // This one contains my pets.
+ width: 200; height: 300
// Define a delegate component. A component will be
// instantiated for each visible item in the list.
@@ -54,42 +54,46 @@
id: petDelegate
Item {
id: wrapper
- width: 200; height: 50
+ width: 200; height: 55
Column {
Text { text: 'Name: ' + name }
Text { text: 'Type: ' + type }
Text { text: 'Age: ' + age }
}
- // Use the ListView.isCurrentItem attached property to
- // indent the item if it is the current item.
+ // indent the item if it is the current item
states: State {
name: "Current"
when: wrapper.ListView.isCurrentItem
- PropertyChanges { target: wrapper; x: 10 }
+ PropertyChanges { target: wrapper; x: 20 }
}
transitions: Transition {
NumberAnimation { properties: "x"; duration: 200 }
}
}
}
- // Specify a highlight with custom movement. Note that highlightFollowsCurrentItem
- // is set to false in the ListView so that we can control how the
- // highlight moves to the current item.
+
+ // Define a highlight with customised movement between items.
Component {
- id: petHighlight
+ id: highlightBar
Rectangle {
width: 200; height: 50
color: "#FFFF88"
- SpringFollow on y { to: list1.currentItem.y; spring: 3; damping: 0.1 }
+ y: listView.currentItem.y;
+ Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
}
}
ListView {
- id: list1
+ id: listView
width: 200; height: parent.height
- model: MyPetsModel
+
+ model: PetsModel {}
delegate: petDelegate
- highlight: petHighlight; highlightFollowsCurrentItem: false
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
+ highlightFollowsCurrentItem: false
}
}