blob: 6cacdd1f772d985c0760912113c8cf2c2ce69229 (
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
|
<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}"/>
</VerticalLayout>
</Item>
</Component>
<!--
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"/>
</Component>
<!--
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"/>
</children>
</ListView>
</Rect>
|
