使用QML进行界面开发

1、概述

 

　　ESM6802是英创公司推出的基于Freescale i.MX6DL双核处理器(ARM Cortex-A9，主频1GHz)的高性能工控主板，imx6dl内部带有硬件3D、2D图像处理模块，能够对图像界面绘制进行硬件加速，使得应用程序显示更加快速流畅。ESM6802支持Qt 5.8版本，支持使用QML进行界面开发，而且能够利用硬件图像加速处理模块优化QML构建的图像界面的渲染。本文将会简单介绍一下QML的基础知识，给客户提供一种新的界面的开发方案。

 

　　QML是Qt提供的一种描述性的脚本语言，类似于CSS(Cascading Style Sheets)，可以在脚本里创建图形对象，并且支持各种图形特效，以及状态机等，同时又能跟Qt写的C++代码进行方便的交互，使用起来非常方便。采用QML加插件的方式主要是为了将界面设计与程序逻辑解耦，一般的系统开发中界面设计的变动往往多于后台逻辑，因此采用QML加插件的方式将界面设计与逻辑分离有利于开发人员的分工，加速产品迭代速度，降低后期维护成本。而且QML解释性语言的特性使得其语法更加简单，可以将界面设计部分交给专业的设计人员开发，而不要求设计人员会c++等编程语言。Qt底层对QML做了优化，将会优先使用硬件图形加速器进行界面的渲染，也针对触摸屏应用做了优化，使用QML能够更简单快捷的搭建流畅、优美的界面。QML也支持嵌入Javascript处理逻辑，但是底层逻辑处理使用Qt C++编写插件，能够更好的控制数据结构，数据处理也更加高效，Qt提供了多种方式将C++数据类型导入QML脚本中，更多详细资料可以查看Qt官方的文档，本文将简单介绍一下QML语言的语法以展示QML相对于以往的Qt C++界面编程的区别，文中所有代码均在ESM6802 Linux上运行测试过了，有需要的客户可以向我们索取，QML文件是脚本文件，不需要编译，可以使用/usr/bin/qt5/qmlscene程序直接打开QML脚本文件查看效果。

 

2、QML基础介绍

 

　　QML将界面分解为一个一个小的元素，通过使用QML描述各元素的排列以及对特定事件的响应来搭建一个动态的界面。QML中的元素是以层级的形式进行描述的，子元素继承父元素的坐标系统，子元素的坐标以父元素作为参考，父元素的左上角为子元素的坐标原点，子元素中可以以parent关键字引用父元素。

 

　　在一个QML文件中，每个元素都可以设定唯一的id，在其他元素中可以引用id来更改此元素的属性等。QML提供一系列内置的元素类型供开发中快速搭建界面，包括最常用的Rectangle、Image、Text、MouseArea、Item等。元素都有自己内置的属性，比如之前介绍的id，以及用于指定坐标的x、y，和width、height等，同时也支持使用property关键字自定义属性。一个简单的QML文件如下：

 

import QtQuick 2.0   Rectangle {     width: 100     height: 100     color: "red" }

 

　　这个QML文件将会展示一个红色的正方形，如下图：

 

 

　　在上面的例子中为Rectangle增加radius属性的设置就可以得到圆角长方形：

 

Rectangle {     width: 100     height: 100     color: "red"     radius: 10 }