Quick--简介

1 简介

1.1 QML

• QML（Qt Meta-Object Language，Qt元对象语言）是一种用于描述应用程序用户界面的声明式编程语言。它使用一些可视组件，通过这些组件之间的交互来描述用户界面。QML是一种高可读性的语言，可以使组件以动态方式进行交互，并且易于复用和自定义。
• QML允许开发者和设计者进行联合创作，快速创建高性能的、具有流畅的动画效果的、极具视觉吸引力的应用程序。QML提供了一个具有高可读性的类似 JSON 的声明式语法，并提供了必要的 JavaScript 语句和动态属性绑定的支持。
  在Qt 5中，QML语言和引擎框架由Qt QML模块提供。

1.2 Quick

• 一种高级用户界面技术，可以轻松创建供移动和嵌入式设备使用的动态触摸式界面和轻量级应用程序。Qt Quick主要由一个改进的Qt Creator IDE（其中包含了Qt Quick设计器）、新增的简单易学的QML语言和新加入Qt库中名为QtDeclarative的模块等三部分组成。这些使得QML更方便不熟悉C++的开发人员和设计人员使用。
• 在Qt 5中，Qt Quick被描述为QML类库：Qt Quick是QML的一个数据类型和功能的标准库，包含了可视化类型、交互类型、动画、模型和视图、粒子特效和渲染特效等。在QML应用程序中，可以通过一个简单的import语句来使用该模块提供的所有功能。

2 优缺点

2.1 优点

• 开发高效，简单

2.2 缺点

参与的开发技术人员较少，资料不多

3 基本语法

3.1 导入语句

类似include，python也是这样用的

import QtQuick 2.9
import QtQuick.Window 2.2

/* QML文档可以看做是一个QML对象树,这里创建了Window根对象
和它的子对象Text */
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Text {
        id: text1
        text: qsTr("hello QML!")
    }
}

代码中使用了 Window 类型，对应导入了 QtQuick.Window 模块。Window类型可以为 Qt Quick 场景创建一个*窗口，所以它一般作为根对象，在其中可以创建其他QML对象。

3.2 类型(QML Types)

基本类型、 QML 对象类型和 JavaScript 类型

• 基本类型
  int 、string 等
• 对象类型(QML Object Types)
  QML对象类型可以通过类型名称{对象特性} 的格式来定义一个对象。
• JavaScript 类型
  QML支持JavaScript对象和数组，可以通过var 类型创建并存储任何标准的JavaScript类型。

property var theArray: []
property var theDate: new Date()

3.3 对象

QML对象由类型指定，一般与类型同名，名称以大写字母开头，后面跟一对大括号，在括号中包含了对象特性(QML Object Attributes)定义，包括 id、属性、信号、信号处理器、方法、附加属性和附加信号处理器等，也可包含子对象。

3.4 属性

可以分配一个静态的值或者绑定一个动态表达式，属性和值由一个冒号隔开，使用“属性 : 值”语法进行初始化，比如width: 640 。属性可以分行写，这样结尾可以不用分号，也可以写在一行，中间使用分号隔开。

3.5 注释

单行注释使用 “ // ” 开始，直到行末结束；多行注释使用 “ / ” 开始，以 “ / ” 结尾。

3.6 锚布局

Rectangle {
    anchors.left: text1.right
    anchors.leftMargin: 10
    anchors.verticalCenter: text1.verticalCenter
}

anchors 翻译过来就是锚，使用它可以进行简单的布局，当然这只是QML布局中的一种方法，不过很常用。anchors可以在一个部件的上、下、左、右、水平居中、垂直居中、中心等位置进行锚定。

anchors.centerIn: parent 就是锚定在了其父对象的中心；
anchors.left: text1.right 将绿色圆形的左侧与文本的右侧进行锚定，效果就是绿色圆形紧挨文本右侧放置；
anchors.leftMargin: 10 表明绿色圆形左侧的边距为10；
anchors.verticalCenter: text1.verticalCenter 表明绿色圆形的垂直居中位置锚定到文本的垂直居中位置，效果就是绿色圆形与文本在同一行上，且中心线对齐

3.7 JavaScript表达式和属性绑定

height: width ，这也被称作属性绑定，当 width 的值改变时，height 属性的值会跟随变化。

3.8 交互（如鼠标）

MouseArea是常用的交互方式。

MouseArea {
        anchors.fill: parent
        onClicked: {
            // TODO
        }
 }

MouseArea对象中 anchors.fill: parent 表明让MouseArea填充整个父对象，这里就是绿色圆形，所以我们可以使用鼠标点击绿色圆形的任何部位来进行交互。当鼠标点击后，就可以在MouseArea中使用 onClicked:{} 来执行想要进行的操作。

3.9 调试输出

在QML中一般使用console将需要的信息输出到控制台，可用的有console.log, console.debug, console.info, console.warn 和 console.error，比如这里使用了console.debug("colorRect: ", parent.color) ，可以顺序输出参数中的内容，可以是字符串，也可以是对象属性引用。

4 中级语法

4.1 界面细节美化

4.1.1 美化字体和圆形

4.1.2 添加装饰图片

Image {
    id: backImg
    source: "images/show.png"
    width: parent.width
    anchors.bottom: parent.bottom
    fillMode: Image.PreserveAspectFit
}

source指明路径，比如这里的 “images/show.png”
填充模式 Image.PreserveAspectFit 表明在缩放图片时会保持宽高比不变，这样图片不会被拉伸变形。

4.1.3 实现圆形的交互特效

4.1.4 复制圆形按钮

4.2 自定义组件

4.2.1 自定义对象类型和组件

4.2.2 自定义信号

4.2.3 自定义属性

4.2.4 自定义方法

5

参考

1、yafeilinux的Quick入门
2、Qt5 QML 学习资料整理
3、A Book about Qt5
4、Text QML Type
5、QML学习笔记（三）-引入Font-awesome
6、QML，QtQuick2.0以上常用控件