diff -r 5dc02b23752f -r 3e2da88830cd examples/declarative/modelviews/listview/highlight.qml --- 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 } }