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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
// 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.view.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]
}
|
