diff options
Diffstat (limited to 'examples/declarative/modelviews/listview/highlight.qml')
-rw-r--r-- | examples/declarative/modelviews/listview/highlight.qml | 34 |
1 files changed, 16 insertions, 18 deletions
diff --git a/examples/declarative/modelviews/listview/highlight.qml b/examples/declarative/modelviews/listview/highlight.qml index 239272a..5748974 100644 --- a/examples/declarative/modelviews/listview/highlight.qml +++ b/examples/declarative/modelviews/listview/highlight.qml @@ -41,12 +41,7 @@ import Qt 4.7 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 +49,45 @@ Rectangle { 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 } + SpringFollow on y { to: listView.currentItem.y; spring: 3; 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 } } |