blob: a22237876e9fd96eed91d97f33d874fdc0923fec (
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
|
Rect {
width: 600; height: 300; color: "white"
// 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 {
id: Wrapper
width: 200; height: 50
VerticalLayout {
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
Rect { color: "#FFFF88" }
}
// Show the model in three lists, with different currentItemPositioning.
// currentItemPositioning determines how the list behaves when the
// current item changes. 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, Free, 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.
// Snap currentItemPositioning attempts to keep the current item
// aligned with the snapPosition by scrolling the view, however the
// items will not scroll beyond the beginning or end of the view.
// SnapAuto currentItemPositioning always keeps the current item on
// the snapPosition by scrolling the view. It also automatically
// sets the current item as is scrolled with the mouse. 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
currentItemPositioning: "Snap"; snapPosition: 125
currentIndex: List1.currentIndex
}
ListView {
id: List3
x: 400; width: 200; height: parent.height
model: MyPetsModel; delegate: PetDelegate
currentItemPositioning: "SnapAuto"; snapPosition: 125
currentIndex: List1.currentIndex
children: [
// Position a static highlight rather than a normal highlight so that
// when the view is flicked, the highlight does not move.
// By positioning the highlight at the same position as the snapPosition
// the item under the highlight will always be the current item.
// Note that we specify the 'children' property. This is because
// the default property of a ListView is 'delegate'.
Rect {
y: 125; width: 200; height: 50
color: "#FFFF88"; z: -1
}
]
}
}
|
