QT Quick是QT提供的一种高级用户界面工具包，包含对QML完美支持，QTQuick设计器，QML与C++混合编程技术。Qt Quick 就是使用 QML 构建的一套类库。

Qml模块本身并没有涉及图形显示，所有的图形处理都由Qt Quick模块完成。

QMl是一种高效的开发UI 的语言。QML（Qt Meta-Object Language，Qt元对象语言）是一种声明式编程语言，并且它是Qt框架的一个组成部分。QML的主要功能是让开发人员快速、便捷地开发出用户界面，这些界面包括了桌面应用、移动设备和嵌入式就用的界面。并且，QML还能够与JavaScript无缝整合一起开发使用，即在QML代码中可以直接使用JavaScript文件。

# view.qmlimport QtQuick 2.0Rectangle {    width: 200    height: 200    color: "green"    Text {        text: "Hello World"        anchors.centerIn: parent    }}

创建QML项目

只想测试QML相关内容，希望可以快速显示界面效果，这时可以创建 Qt Quick Ul项目。Qt QuickUl项目中只包含QML和JavaScript代码，没有添加任何C++代码。

创建Qt Quick项目

// main.qmlimport QtQuick 2.12import QtQuick.Window 2.12 Window {    visible: true    width: 640    height: 480    title: qsTr("Hello World")}

每一个 QML 有且只有一个根元素，类似于 XML 文档。这个根元素就是这个 QML 文档中定义的 QML 元素，在这个例子中就是一个 Window 对象。

#include <QtQml>

import QtQml 2.14

qmake .pro文件：

QT += qml

领Qt学习资料→Qt开发（视频教程+文档+代码+项目实战）

QML Basic Types

QML对象类型是指具有properties, signals, methods等的对象。

bool：true/false

Item {      focus: true      clip: false  }

double

Item {      property double number: 32155.2355  }

enumeration：<Type>.<value>

Text { horizontalAlignment: Text.AlignRight }

int：e.g. 0, 10, or -20。

Item { width: 100; height: 200 }

list

import QtQuick 2.0  Item {      width: 100; height: 100      states: [          State { name: "activated" },          State { name: "deactivated" }      ]      Component.onCompleted: {          console.log("Name of first state:", states[0].name)          for (var i = 0; i < states.length; i++)              console.log("state", i, states[i].name)      }  }

如果列表仅包含一个对象，则可以省略方括号：

import QtQuick 2.0  Item {      width: 100; height: 100      states: State { name: "activated" }  }

real：带小数点的数字

Item { width: 100.45; height: 150.82 }

string

Text { text: "Hello world!" }

url

Image { source: "pics/logo.png" }

Image {      source: "pics/logo.png"      Component.onCompleted: {          // This prints 'false'. Although "pics/logo.png" was the input string,          // it's been converted from a string to a URL, so these two are not the same.          console.log(source == "pics/logo.png")          // This prints 'true' as Qt.resovledUrl() converts the string into a          // URL with the correctly resolved path          console.log(source == Qt.resolvedUrl("pics/logo.png"))          // This prints the absolute path, e.g. "file:///path/to/pics/logo.png"          console.log(source.toString())      }  }

var：可以引用任何数据类型的通用属性类型。

Item {      property var aNumber: 100      property var aBool: false      property var aString: "Hello world!"      property var anotherString: String("#FF008800")      property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)      property var aRect: Qt.rect(10, 10, 10, 10)      property var aPoint: Qt.point(10, 10)      property var aSize: Qt.size(10, 10)      property var aVector3d: Qt.vector3d(100, 100, 100)      property var anArray: [1, 2, 3, "four", "five", (function() { return "six"; })]      property var anObject: { "foo": 10, "bar": 20 }      property var aFunction: (function() { return "one"; })  }

date：“YYYY-MM-DDThh:mm:ss.zzzZ”

MyDatePicker { minDate: "2000-01-01 0:0"; maxDate: "2020-12-31 23:59" }

point：描述x和y属性，“x,y”

CustomObject { myPointProperty: "0,20" }

CustomObject { myPointProperty: Qt.point(0, 20) }

rect：x, y, width and height。“x, y, width x height”

CustomObject { myRectProperty: "50,50,100x100" }

CustomObject { myRectProperty: Qt.rect(50, 50, 100, 100) }

Rectangle {      width: childrenRect.width      height: childrenRect.height      Rectangle { width: 100; height: 100 }  }

size：width和height。“width x height”

Image { sourceSize: "150x50" }

Image { sourceSize: Qt.size(150, 50) }

Column {      Image { id: image; source: "logo.png" }      Text { text: image.sourceSize.width + "," + image.sourceSize.height }  }

QML object typesComponent：（组件）组件是可重用、封装的 QML 类型，具有明确定义的接口。QtObjectBindingConnectionsTimerquick组件

如表是Qt Quick Controls 1.1 提供的组件