examples/declarative/modelviews/listview/highlight.qml
changeset 33 3e2da88830cd
parent 30 5dc02b23752f
--- 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
     }
 }