When working with linked lists, the mechanism of expanding when the current item is activated is usually used. This operation can be used to dynamically fill the entire screen with the current item to add a new user interface, or to provide more information about the current item in a linked list.
In the following example, when the linked list item is clicked, the linked list item will expand to fill the entire linked list view (ListView). Additional spacing areas are used to add more information. This mechanism uses a state control. When a linked list item is expanded, the surrogate items can enter the expanded (expanded) state, in which some attributes are changed.
First, the height of the wrapper is set to the height of the ListView. The label image is scaled up and moved down, moving the image from the position of the small image to the position of the large image. In addition to these, two hidden items, the actual view (factsView) and the close button (closeButton) toggle its opactiy (transparency) to show. Finally, set the linked list view (ListView).
Setting the list view (ListView) includes setting the content Y coordinate (contentsY), which is the Y coordinate of the part of the delegate visible at the top of the view. Another change is to set the view’s interactive to false. This action prevents the view from moving, and the user can no longer scroll through the current item.
Since setting the first list item to be clickable, passing it an expanded state caused its surrogates to fill the entire list and reset the content. When the close button is clicked, the state is cleared, causing its proxy item to return to the previous state, and the list view (ListView) is reset to be valid.
1. import QtQuick 2.0
2.
3. Item {
4. width: 300
5. height: 480
6.
7. ListView {
8. id: listView
9.
10. anchors. fill: parent
11.
12. delegate: detailsDelegate
13. model: planets
14. }
15.
16. ListModel {
17. id: planets
18.
19. ListElement { name: "Mercury"; imageSource: "images/mercury.jpeg"; facts: "Mercury is the smallest planet in the Solar System. It is the closest planet to the sun. It makes one trip around the Sun once every 87.969 days." }
20. ListElement { name: "Venus"; imageSource: "images/venus.jpeg"; facts: "Venus is the second planet from the Sun. It is a terrestrial planet because it has a solid, rocky surface . The other terrestrial planets are Mercury, Earth and Mars. Astronomers have known Venus for thousands of years." }
21. ListElement { name: "Earth"; imageSource: "images/earth.jpeg"; facts: "The Earth is the third planet from the Sun. It is one of the four terrestrial planets in our Solar System . This means most of its mass is solid. The other three are Mercury, Venus and Mars. The Earth is also called the Blue Planet, 'Planet Earth', and 'Terra'." }
22. ListElement { name: "Mars"; imageSource: "images/mars.jpeg"; facts: "Mars is the fourth planet from the Sun in the Solar System. Mars is dry, rocky and cold. It is home to the largest volcano in the Solar System. Mars is named after the mythological Roman god of war because it is a red planet, which signs the color of blood." }
twenty three. }
twenty four.
25. Component {
26. id: detailsDelegate
27.
28. Item {
29. id: wrapper
30.
31. width: listView. width
32. height: 30
33.
34. Rectangle {
35. anchors. left: parent. left
36. anchors.right: parent.right
37. anchors. top: parent. top
38.
39. height: 30
40.
41. color: "#ffaa00"
42.
43. Text {
44. anchors. left: parent. left
45. anchors.verticalCenter: parent.verticalCenter
46.
47. font. pixelSize: parent. height-4
48.
49. text: name
50.}
51.}
52.
53. Rectangle {
54. id: image
55.
56. color: "black"
57.
58. anchors.right: parent.right
59. anchors. top: parent. top
60. anchors.rightMargin: 2
61. anchors. topMargin: 2
62.
63. width: 26
64. height: 26
65.
66. Image {
67. anchors. fill: parent
68.
69. fillMode: Image. PreserveAspectFit
70.
71. source: imageSource
72.}
73.}
74.
75. MouseArea {
76. anchors. fill: parent
77. onClicked: parent. state = "expanded"
78.}
79.
80. Item {
81. id: factsView
82.
83. anchors. top: image. bottom
84. anchors. left: parent. left
85. anchors.right: parent.right
86. anchors. bottom: parent. bottom
87.
88. opacity: 0
89.
90. Rectangle {
91. anchors. fill: parent
92.
93. color: "#cccccc"
94.
95. Text {
96. anchors. fill: parent
97. anchors. margins: 5
98.
99. clip: true
100. wrapMode: Text. WordWrap
101.
102. font. pixelSize: 12
103.
104. text: facts
105. }
106. }
107. }
108.
109. Rectangle {
110. id: closeButton
111.
112. anchors.right: parent.right
113. anchors. top: parent. top
114. anchors.rightMargin: 2
115. anchors. topMargin: 2
116.
117. width: 26
118. height: 26
119.
120. color: "red"
121.
122. opacity: 0
123.
124. MouseArea {
125. anchors. fill: parent
126. onClicked: wrapper. state = ""
127. }
128. }
129.
130. states: [
131. State {
132. name: "expanded"
133.
134. PropertyChanges { target: wrapper; height: listView. height }
135. PropertyChanges { target: image; width: listView.width; height: listView.width; anchors.rightMargin: 0; anchors.topMargin: 30 }
136. PropertyChanges { target: factsView; opacity: 1 }
137. PropertyChanges { target: closeButton; opacity: 1 }
138. PropertyChanges { target: wrapper.ListView.view; contentY: wrapper.y; interactive: false }
139. }
140.]
141.
142. transitions: [
143. Transition {
144. NumberAnimation {
145. duration: 200;
146. properties: "height,width,anchors.rightMargin,anchors.topMargin,opacity,contentY"
147. }
148. }
149.]
150. }
151. }
152.}
This technique shows that expanding the proxy to fill the view can be done simply by deforming the proxy. For example, when browsing a linked list of songs, you can add more description to the item by zooming in on the current item.