qml简介

• 前言
  本文主要对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
  
  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个边缘，如图：
  
  使用：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: 100
    Text {
        id: cusText
        x:0; y:50; width:50
        text: qsTr("My First qml---> helloworld")
    }
    //信号
    MouseArea{
        anchors.fill: parent;
        onClicked: {
            parent.color="red"
        }
    }
    //id动态绑定
    color: mouseTest.containsMouse?"red":"blue"
    MouseArea{
        id: mouseTest
        anchors.fill: parent;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 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);//定义QuickWidget
 pQmlWgt ->setSource(QUrl(QStringLiteral("helloworld.qml")));//加载qml文件
 pQmlWgt ->rootContext()->setContextProperty("testObj",this);//向qml注册Qt对象，qml中可以直接使用Qt注册对象
1
2
3

• qml开发工具
  1）在Qt的bin目录下，Qt提供了一个工具QML Viewer可以查看.qml文件生成的效果。
  2） Qt Creatorr是一个用于Qt开发的轻量级跨平台集成开发环境。提供首个专为支持跨平台开发而设计的集成开发环境 (IDE)。Qt Creator包含了一套（一个高级的C++代码编辑器 、上下文感知帮助系统、可视化调试器、源代码管理、项目和构建管理工具）用于创建和测试基于Qt应用程序的高效工具。