目录
一 QML介绍
QML是Qt Quick的缩写，它是一种新型的、面向对象的、跨平台的脚本语言，可以用来描述用户界面或应用程序的交互逻辑。QML可以在Qt应用程序中使用，也可以在其他JavaScript应用程序中使用。
QML使用XML语法来描述应用程序的用户界面，其中包括各种组件、布局、控件和事件处理程序等。这种语言非常易于学习和使用，因为它具有简单的语法、清晰的结构和易于理解的类型系统。此外，QML还支持自定义组件和自定义控件，使开发人员能够根据需要灵活地设计和重构用户界面。
QML可以帮助开发人员快速构建原生桌面应用程序、移动应用程序和Web应用程序等。由于它是Qt框架的一部分，因此可以利用Qt提供的丰富功能和工具，如Qt Creator、Qt Widgets等。因此，使用QML可以大大提高开发效率和应用程序的质量。
二 QML的使用场合
QML是一种用于描述应用程序用户界面的声明式编程语言，主要应用于移动应用程序、桌面应用程序和Web应用程序等领域。以下是QML主要应用场景：
- 移动应用程序：QML可以帮助开发人员快速构建原生移动应用程序，如游戏、音乐播放器、地图应用等。由于QML可以将用户界面分解为一个个小的元素，并且可以对这些元素进行美化和自定义，因此非常适合构建移动应用程序。
- 桌面应用程序：QML可以用于开发桌面应用程序，如窗口管理器、文本编辑器、数据分析工具等。QML可以将界面分解为各个小的部件，并且可以使用Qt提供的各种组件和工具来构建高效的桌面应用程序。
- Web应用程序：QML可以用于开发Web应用程序，如网页浏览器、表单验证器、媒体播放器等。由于QML可以将界面分解为小的元素，并且可以使用JavaScript来操作这些元素，因此非常适合构建Web应用程序。
QML是一种非常灵活和易于使用的编程语言，可以帮助开发人员快速构建高效的用户界面，并且可以在不同的应用程序领域中使用。
三 实例演示
在使用链表时通常会使用当前项激活时展开的机制。这个操作可以被用于动态的将当前项目填充到整个屏幕来添加一个新的用户界面，或者为链表中的当前项提供更多的信息。
在下面的例子中，当点击链表项时，链表项都会展开填充整个链表视图（ListView）。额外的间隔区域被用于添加更多的信息，这种机制使用一个状态来控制，当一个链表项展开时，代理项都能输入expanded（展开）状态，在这种状态下一些属性被改变。
首先，包装器（wrapper）的高度（height）被设置为链表视图（ListView）的高度。标签图片被放大并且下移，使图片从小图片的位置移向大图片的位置。除了这些之外，两个隐藏项，实际视图（factsView）与关闭按键（closeButton）切换它的opactiy（透明度）显示出来。最后设置链表视图（ListView）。
设置链表视图（ListView）包含了设置内容Y坐标（contentsY），这是视图顶部可见的部分代理的Y轴坐标。另一个变化是设置视图的交互（interactive）为false。这个操作阻止了视图的移动，用户不再能够通过滚动条切换当前项。
由于设置第一个链表项为可点击，向它输入一个expanded（展开）状态，导致了它的代理项被填充到整个链表并且内容重置。当点击关闭按钮时，清空状态，导致它的代理项返回上一个状态，并且重新设置链表视图（ListView）有效。
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 signifies the colour of blood." }
23. }
24.
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.}
这个技术展示了展开代理来填充视图能够简单的通过代理的形变来完成。例如当浏览一个歌曲的链表时，可以通过放大当前项来对该项添加更多的说明。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
