qml快速入门，各种图文并茂的示例
软件技术分享2020-05-24 16:14
最近由于项目的原因，接触到qml这种开发语言。在熟悉和使用的过程中，发现只要有基本的开发基础，要快速入门qml, 其实不难。
本文首先将简单介绍qml, 紧接着引入第一个入门例子hello world。然后将采用图文并茂的示例来介绍qml的界面布局、监听事件、简单动画效果、自定义属性、自定组件等。最后再总结概述。
一、qml简介
qml是一种描述性的脚本语言，语法类似css, 可以在脚本中创建图像对象，并支持各种特效，并且文件是以.qml结尾。
qml文档描述 了一个对象树。各个元素可以以嵌套的方式来组合成复杂的图形功能。qml是Qt quick的核心组件之一。
qml是运行时解释，不需要重新编译。
二、第一个例子
使用Qt Creator来创建空的qml工程，注意本文所有的示例均使用了Qt5.9的版本。
创建工程完成之后，pro文件添加使用quick组件，并且配置使用了C++11
main.cpp的内容如下所示，这里可以暂时不需要了解其内容含义。只需要知道 这是程序启动的入口。
然后我们来介绍下main.qml的内容含义，import需要使用的组件，Window表示的是一个窗体，内部内容使用大括号包含起来，visible设置窗体的可见性，width表示窗体的宽度，height表示窗体的高度，title的设置窗体的标题。
运行后的效果图，是一个标题为Hello World的空窗体。
三、界面布局
qml通过anchor锚点来进行界面的布局， 首先看下效果图，一个黑色背景窗体，四边有四个红色边框的白色矩形，中间一个红色边框的白色正方形。
qml文件的实现如下，关键字Rectangle表示一个矩形组件，Rectangle可以嵌套使用。说明下顶部白色矩形的实现，定义id为topBar, 背景色color是白色，边框border.width的宽度是2，边框颜色border.color是红色。anchors.left: leftBar.right表示顶部矩形的左侧位于左侧边框的右侧。
四、函数功能
qml支持函数功能，通过两个不同时刻窗口对比来查看效果，左侧窗口是当窗体宽度小于320像素的效果，右侧窗口是当窗体宽度小于640像素的效果。
qml文件实现中，Rectangle包含了Text文本对象，Text内部定义了函数getColor，当Rectangle的宽度小于320时，返回red, 当宽度小于等于640时，返回black, 其他情况返回blue。
五、动画效果
qml支持动画效果，首先看下使用Behavior的效果图，窗体分为上下两个矩形，当鼠标按下上方区域不动的时候，下方矩形中的正方形就会上左上角移动到右下角，当鼠标释放的时候，正方形又会从右下角回到左上角。
qml文件中，上方矩形实现鼠标按下和释放的监控事件，并且接受事件中，修改下方矩形的x和y的坐标值。下方矩形实现上图所示的动画效果，easing.type指定的是一种缓和曲线。
六、自定义属性
qml支持自定义属性，调用自定义属性值显示文本信息
qml文件中，自定义属性以关键字property开始，然后是说明类型，最后是属性的名称和值。
七、自定义组件
qml没有提供直接的圆形组件，所以，这里自定义圆形组件
实现圆形组件Circle.qml, 定义了整型属性d, 可以由外部传入，radius表示半径。
然后看下main.qml如何调用呢，其使用方法与通用组件的方式是一样的，如下所示是自定义圆形组件Circle的使用方法。
八、Column定位器
qml提供了定位器的功能，比如Row、Column、Grid、Flow。下面就看下Column的使用效果。
首先自定义组件Article.qml, 该组件接受两个属性值，并且分别显示到两个Text对象上。
main.qml中使用Column定位器来组织显示Article对象。
九、注册单例
qml还支持注册C++的单例模型，然后在qml中直接调用，实现了与C++代码的通信。
首先实现用于事件上报的单例模型，具体实现代码如下所示。
然后在main.cpp中将EventSender注册到qml中, 后续qml文件才能调用
最后看下qml如何调用上面注册成功的单例，很简单，只要import EventSender, 然后就可以调用EventSender的函数。
十、总结
本文通过一个简单的例子开始qml的学习，然后结合示例分别介绍说明了锚布局、函数功能、动画效果、自定义属性、自定义组件、定位器、注册单例的使用方法。这些基本的例子可以为后续深入的学习打下基础，同时也分享出来给大家参考。
举报/反馈
0
0
收藏
分享
