blob: 2e8cdda79a442a7ceb7ae967de8ea24ed563678f (
plain)
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
88
89
90
91
92
93
|
import Qt 4.7
Rectangle {
width: 600; height: 300
// MyPets model is defined in dummydata/MyPetsModel.qml
// The viewer automatically loads files in dummydata/* to assist
// development without a real data source.
// This one contains my pets.
// Define a delegate component. A component will be
// instantiated for each visible item in the list.
Component {
id: petDelegate
Item {
width: 200; height: 50
Column {
Text { text: 'Name: ' + name }
Text { text: 'Type: ' + type }
Text { text: 'Age: ' + age }
}
}
}
// Define a highlight component. Just one of these will be instantiated
// by each ListView and placed behind the current item.
Component {
id: petHighlight
Rectangle { color: "#FFFF88" }
}
// Show the model in three lists, with different highlight ranges.
// preferredHighlightBegin and preferredHighlightEnd set the
// range in which to attempt to maintain the highlight.
//
// Note that the second and third ListView
// set their currentIndex to be the same as the first, and that
// the first ListView is given keyboard focus.
//
// The default mode allows the currentItem to move freely
// within the visible area. If it would move outside the visible
// area, the view is scrolled to keep it visible.
//
// The second list sets a highlight range which attempts to keep the
// current item within the the bounds of the range, however
// items will not scroll beyond the beginning or end of the view,
// forcing the highlight to move outside the range at the ends.
//
// The third list sets the highlightRangeMode to StrictlyEnforceRange
// and sets a range smaller than the height of an item. This
// forces the current item to change when the view is flicked,
// since the highlight is unable to move.
//
// Note that the first ListView sets its currentIndex to be equal to
// the third ListView's currentIndex. By flicking List3 with
// the mouse, the current index of List1 will be changed.
ListView {
id: list1
width: 200; height: parent.height
model: MyPetsModel
delegate: petDelegate
highlight: petHighlight
currentIndex: list3.currentIndex
focus: true
}
ListView {
id: list2
x: 200; width: 200; height: parent.height
model: MyPetsModel
delegate: petDelegate
highlight: petHighlight
currentIndex: list1.currentIndex
preferredHighlightBegin: 80; preferredHighlightEnd: 220
highlightRangeMode: ListView.ApplyRange
}
ListView {
id: list3
x: 400; width: 200; height: parent.height
model: MyPetsModel
delegate: petDelegate
highlight: Rectangle { color: "lightsteelblue" }
currentIndex: list1.currentIndex
preferredHighlightBegin: 125; preferredHighlightEnd: 125
highlightRangeMode: ListView.StrictlyEnforceRange
flickDeceleration: 1000
}
}
|
