由于项目的原因，接触到qml语言。经过一段时间的熟悉和使用，发现只要有基本的开发能力，那么快速掌握qml的入门知识，并不难。

本文首先将简单介绍qml, 紧接着引入第一个入门例子hello world。然后将采用图文并茂的示例来介绍qml的界面布局、监听事件、简单动画效果、自定义属性、自定组件等。最后再总结概述。

一、qml简介

qml是一种描述性的脚本语言，语法类似css, 可以在脚本中创建图像对象，并支持各种特效，并且文件是以.qml结尾。

qml文档描述 了一个对象树。各个元素可以以嵌套的方式来组合成复杂的图形功能。q ml是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的学习，然后结合示例分别介绍说明了锚布局、函数功能、动画效果、自定义属性、自定义组件、定位器、注册单例的使用方法。这些基本的例子可以为后续深入的学习打下基础，同时也分享出来给大家参考。