目录
一 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是一种非常灵活和易于使用的编程语言,可以帮助开发人员快速构建高效的用户界面,并且可以在不同的应用程序领域中使用。
三 实例演示
Repeater元素适合有限的静态数据,但是在真正使用时,模型通常更加复杂和庞大,我们需要一个更加智能的解决方案。QtQuick提供了ListView和GridView元素,这两个都是基于Flickable(可滑动)区域的元素,因此用户可以放入更大的数据。同时,它们限制了同时实例化的代理数量。对于一个大型的模型,这意味着在同一个场景下只会加载有限的元素。
这两个元素的用法非常类似,我们由ListView开始,然后会描述GridView的模型起点来进行比较。
ListView与Repeater元素像素,它使用了一个model,使用delegate来实例化,并且在两个delegate之间能够设置间隔sapcing。下面的列表显示了怎样设置一个简单的链表。
1.import QtQuick 2.0
2.
3.Rectangle {
4. width: 80
5. height: 300
6.
7. color: "white"
8.
9. ListView {
10. anchors.fill: parent
11. anchors.margins: 20
12.
13. clip: true
14.
15. model: 100
16.
17. delegate: numberDelegate
18. spacing: 5
19. }
20.
21. Component {
22. id: numberDelegate
23.
24. Rectangle {
25. width: 40
26. height: 40
27.
28. color: "lightGreen"
29.
30. Text {
31. anchors.centerIn: parent
32.
33. font.pixelSize: 10
34.
35. text: index
36. }
37. }
38. }
39.}
如果模型包含的数据比屏幕上显示的更多,ListView元素只会显示部分的链表内容。然后由于QtQuick的默认行为导致的问题,列表视图不会限制被显示的代理项(delegates)只在限制区域内显示。这意味着代理项可以在列表视图外显示,用户可以看见在列表视图外动态的创建和销毁这些代理项(delegates)。为了防止这个问题,ListView通过设置clip属性为true,来激活裁剪功能。下面的图片展示了这个结果,左边是clip属性设置为false的对比。
对于用户,ListView(列表视图)是一个滚动区域。它支持惯性滚动,这意味着它可以快速的翻阅内容。默认模式下,它可以在内容最后继续伸展,然后反弹回去,这个信号告诉用户已经到达内容的末尾。
视图末尾的行为是由到boundsBehavior属性的控制的。这是一个枚举值,并且可以配置为默认的Flickable.DragAndOvershootBounds,视图可以通过它的边界线来拖拽和翻阅,配置为Flickable.StopAtBounds,视图将不再可以移动到它的边界线之外。配置为Flickable.DragOverBounds,用户可以将视图拖拽到它的边界线外,但是在边界线上翻阅将无效。
使用snapMode属性可以限制一个视图内元素的停止位置。默认行为下是ListView.NoSnap,允许视图内元素在任何位置停止。将snapMode属性设置为ListView.SnapToItem,视图顶部将会与元素对象的顶部对齐排列。使用ListView.SnapOneItem,当鼠标或者触摸释放时,视图将会停止在第一个可见的元素,这种模式对于浏览页面非常便利。