QML组合模式（Composition Mode）

目录

一 QML介绍

二 QML的使用场合

三 实例演示

---

一 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是一种非常灵活和易于使用的编程语言，可以帮助开发人员快速构建高效的用户界面，并且可以在不同的应用程序领域中使用。

三 实例演示

以下是在 QML 布局中需要注意的一些事项：

1. 在 main.qml 文件中定义的 MouseArea 局部有效，在其它的 .qml 文件定义的 MouseArea 全局有效。
2. 帮助文档没列出的方法、成员变量、信号、槽，可以利用代码提示得到，如:TreeView的__currentRow。
3. C++ 暴露方法给 QML 时，传递的变量是强类型，而 QML 的 ECMAScript 传递的变量是弱类型。
4. C++ 的方法要定义为 public slots 才可以暴露方法给 QML，而 private slots 不可以。
5. 在 C++ 或 QML 调用图片、视频等资源文件时，需要先添加到工程，才可以调用，调用时以工程的相对路径为准。
6. 删掉了某一资源文件，编译时出错，可以删掉release、debug整个文件夹，重新编译就可以了。
7. 如果要用鼠标拖动一个 Rectangle，那么这个 Rectangle 不能使用锚布局，只能用 x、y、width、height 来布局，拖动时，改变 x、y 即可。
8. TextField 有 inputMask 属性，可以限制输入文字的范围。
9. 在 qml 上使用过多 Timer，可能导致界面有点卡，用 c++ 开个 timer线程再发射信号到 qml 即可解决。
10. 修改了除 main.qml 以外的 qml 文件，发现编译时现象跟代码不相符，可以删掉release、debug整个文件夹再重新编译，或者重新构建项目，再编译就可以了(Qt5.7.0才有这个bug，Qt5.9.2没有)。
11. QML 调用C++对象时，C++对象的构造函数会执行两次，这时可以把该构造函数内容写在 qml 的Component.onComplete中。

//组合允许你绘制一个形状然后与已有的像素点集合混合。画布提供了多种组合模式，使用//globalCompositeOperation(mode)来设置。


1.    onPaint: {
2.        var ctx = getContext("2d")
3.        ctx.globalCompositeOperation = "xor"
4.        ctx.fillStyle = "#33a9ff"
5.
6.        for(var i=0; i<40; i++) {
7.            ctx.beginPath()
8.            ctx.arc(Math.random()*400, Math.random()*200, 20, 0, 2*Math.PI)
9.            ctx.closePath()
10.            ctx.fill()
11.        }
12.    }
下面这个例子遍历了列表中的组合模式，使用对应的组合模式生成了一个矩形与圆形的组合。
1.    property var operation : [
2.        'source-over', 'source-in', 'source-over',
3.        'source-atop', 'destination-over', 'destination-in',
4.        'destination-out', 'destination-atop', 'lighter',
5.        'copy', 'xor', 'qt-clear', 'qt-destination',
6.        'qt-multiply', 'qt-screen', 'qt-overlay', 'qt-darken',
7.        'qt-lighten', 'qt-color-dodge', 'qt-color-burn',
8.        'qt-hard-light', 'qt-soft-light', 'qt-difference',
9.        'qt-exclusion'
10.        ]
11.
12.    onPaint: {
13.        var ctx = getContext('2d')
14.
15.        for(var i=0; i<operation.length; i++) {
16.            var dx = Math.floor(i%6)*100
17.            var dy = Math.floor(i/6)*100
18.            ctx.save()
19.            ctx.fillStyle = '#33a9ff'
20.            ctx.fillRect(10+dx,10+dy,60,60)
21.            // TODO: does not work yet
22.            ctx.globalCompositeOperation = root.operation[i]
23.            ctx.fillStyle = '#ff33a9'
24.            ctx.globalAlpha = 0.75
25.            ctx.beginPath()
26.            ctx.arc(60+dx, 60+dy, 30, 0, 2*Math.PI)
27.            ctx.closePath()
28.            ctx.fill()
29.            ctx.restore()
30.        }
31.    }