1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
// 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 QtQuick
import "content"
Rectangle {
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
required property int index
required property string name
required property string type
required property int age
Column {
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 {
name: "Current"
when: pet.ListView.isCurrentItem
PropertyChanges { pet.x: 20 }
}
transitions: Transition {
NumberAnimation { properties: "x"; duration: 200 }
}
MouseArea {
anchors.fill: parent
onClicked: pet.ListView.view.currentIndex = pet.index
}
}
//! [0]
// Define a highlight with customized movement between items.
component HighlightBar : Rectangle {
width: 200; height: 50
color: "#FFFF88"
y: listView.currentItem.y
Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
}
ListView {
id: listView
width: 200; height: parent.height
x: 30
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 {}
highlightFollowsCurrentItem: false
}
//! [0]
}
|
