QML介绍

1 什么是QML

QML是一种描述应用程序用户界面的声明式变成语言,使用一些可视化组件以及折现组件之间的交互来描述用户界面。QML一种可读性很高的语言,可以使组件以动态方式进行交互,并且允许组件在用户界面中很容易地实现复用和定义。

2 什么是Qt Quick

Qt Quick 是QML的一个数据类型和功能的标准库,包含了可视化类型、交互类型、动画、例子特效和渲染特效等。在QML应用,可以通过一个简单的import语句来使用该模块提供的所有功能。Qt Quick在Qt5中由Qt Quick 模块提供。

3 QML 语法基础

3.1 导入语句

使用 import QtQuick 导入 模块

模块导入语句

import < ModuleIdentifier > [as < Qualifier > ]

举例:

1
2
3
4
5
6
import QtQuick 2.2 as Quick
Quick.Rectangle{
width:300
height:200
color:"blue"
}

目录导入语句

举例: 该目录下的所有qml文件变成一个对象

1
2
3
4
import "../textwidgets"  as  MyModule
MyModule.Text{
text:"hello"
}

3.2 对象和属性

对象: 使用大括号表示
Rectangle{

}

属性: 使用冒号表示,回车分割。若卸载同一行,用分号分割。
width:100
height:100

width:100;height:100

3.3 布局

anchors.centerIn : parent 表示相对父对象居中

3.4 注释

QML的注释和JS的注释方式一样,使用 // 和 / / 来完成注释

3.5 表达式

可以采用表达式对属性进行赋值:
width :300*2 +50
width :parent.width - 50

3.6 调试输出

console.log()
console.debug()

4 QML类型系统

4.1 QML基本类型

类型 描述
int
bool
double
string
url
list
var
enumeration

4.2 QtQueck 基本类型

类型 描述
color
font
matrix4x4
quaternion
vector2d
vector3d
vacter4d
date
point
size
rect