• 前言
    本文主要对qml语言进行一个基本介绍，主要涉及qml简介、qml基本语法、以及qml与Qt相互调用、qml开发工具等。

  • qml简介
    从Qt4.7版本引入Qt Quick，qml (Qt Meta-Object Language)，是Qt推出的Qt Quick技术的一部分，是一种新增的简便易学的语言。QML是一种陈述性语言，用来描述一个程序的用户界面。文件格式以.qml结尾。语法格式非常像CSS，但又支持javacript形式的编程控制。在QML，一个用户界面被指定为具有属性的对象树。 这使得Qt更加便于很少或没有编程经验的人使用。 JavaScript在QML中作为一种脚本语言，对QML进行逻辑方面的编程。

  • qml详细介绍
    首先我们先看一个例子：
    helloworld.qml
    qml简介-编程知识网
    1）import导入一个QtQuick包
    2）Rectangle被称为界面元素，描述一个矩形，每个界面元素后面跟着一对大括号，括号内描述元素信息
    3）Text是一个文本消息，可以设置元素id、文本内容等

  • 1、界面元素
    界面元素（如上例中的Rectangle）是QML实现的界面中的基本单位。多个元素平行定义。QML提供了很多定义好的界面元素（也可以自己定义），
    常用元素：Item, Rectangle, Image, Text, MouseArea等。

  • 2、界面元素属性
    界面元素属性用于描述界面元素，放在界面元素大括号中，每一属性独占一行，多个属性放在一行时，之间用逗号分开。qml提供x、y 、width、height、parent等等属性同样QML提供了丰富的界面元素属性。详细可查阅帮助文档。

  • 3、布局
    qml提供了两种布局方式：Anchor 布局管理和布局器
    1）Anchor布局管理：
    一个元素可以参考另外一个元素位置就是由Anchor实现的。每个qml元素都有6个方位和4个边缘，如图：
    qml简介-编程知识网
    使用：Rectangle { id: rectTest1; … }
    Rectangle { id: rectTest2; anchors.left: rectTest1.right; … }
    2）布局器
    a.Grid布局（网格布局）
    b.Row布局（纵向布局）
    c.Column布局（横向布局）

  • 4、事件
    1）键盘事件
    TextInput和TextEdit两个元素使用到键盘事件。（前者为单行文本，后者为多行文本）不但可以向普通界面元素一样，可以设置其长度，位置，颜色等属性。还可以可设置focus属性觉得焦点停留的位置。
    2）鼠标事件
    鼠标事件在界面元素中加入MouseArea元素，MouseArea元素中设置相应的属性来设置事件。有两种方法具体实现处理鼠标事件：信号处理即信号槽、动态属性绑定。参照如下代码：

import QtQuick 2.0
Rectangle
{width: 100; height: 100Text {id: cusTextx:0; y:50; width:50text: qsTr("My First qml---> helloworld")}//信号MouseArea{anchors.fill: parent;onClicked: {parent.color="red"}}//id动态绑定color: mouseTest.containsMouse?"red":"blue"MouseArea{id: mouseTestanchors.fill: parent;}
}
  • qml和Qt交互
    1）qml调用Qt
    qml可以调用槽函数，也可以在函数前添加Q_INVOKABLE。例如：Q_INVOKABLE void myFunc();
    2）Qt使用qml
    Qt通过QQuickWidget或者QQuickVIew加载qml，（QQuickWidget可以直接放入布局，QQuickVIew需要进行转化）
 QQuickWidget *pQmlWgt = new QQuickWidget(this);//定义QuickWidgetpQmlWgt ->setSource(QUrl(QStringLiteral("helloworld.qml")));//加载qml文件pQmlWgt ->rootContext()->setContextProperty("testObj",this);//向qml注册Qt对象，qml中可以直接使用Qt注册对象
  • qml开发工具
    1）在Qt的bin目录下，Qt提供了一个工具QML Viewer可以查看.qml文件生成的效果。
    2） Qt Creatorr是一个用于Qt开发的轻量级跨平台集成开发环境。提供首个专为支持跨平台开发而设计的集成开发环境 (IDE)。Qt Creator包含了一套（一个高级的C++代码编辑器 、上下文感知帮助系统、可视化调试器、源代码管理、项目和构建管理工具）用于创建和测试基于Qt应用程序的高效工具。