一、本文所包含的qml技能
在Qt中，使用qml开发在新建项目界面需选择qt quick，如图
接下来的创建流程与widget的过程是一样的，我就不再多说了。
qml的基本图形是矩形，能明白这一点，接下来的学习会很轻松。
在.pro中我们可以看到Qt+=quick，这是添加了quick模块，我们在写quick程序时必须要加入此模块。
Rectangle：qml中基本图形
组件：qml为我们提供的类似于控件的东西，也可以自己创建组件
parent：区域或者组件所在的父类，其中包含父类的属性
Text：用于显示字符串的组件
id：qml组件唯一标识，不可以大写字母开头命名
MouseArea：qml中的鼠标区域，区域大小自行定义。
二、界面中显示hello world
在主函数中，我们可以看到一些qt为我们创建好的代码，此处是加载了qml界面，从下面的代码中我们可以看到，这是加载了main.qml界面，所以我们打开软件的主窗口就是main.qml界面
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);在main.qml中我们写入了以下代码。
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle//自定义区域
{
id: textArea //唯一标识的id
x: 0 //起始坐标
y: 0
width: parent.width //区域大小
height: parent.height
Text { //显示字符串
id: textStr
x: parent.width/2
y: parent.height/2
text: qsTr("Hello World!!")
}
}
}要首先在qml界面中创建一个窗口window，在这里面我们可以完成一些对窗口操作的功能，比如窗口大小、窗口标题等。
我前面说过，qml是一个以矩形为基本图形的界面，所以接下来的一个区域我们使用矩形来创建Rectangle，在这之中我们可以规定这个区域的大小以及位置等信息，最重要的一个是id的概念，id是作为qml中标识区域或者组件的唯一标识，可以使用字母但是不可以以大写字母开头，不然会报错。在这之中我们可以看到parent，顾名思义就是父类的一些性能集合，可以将它想象成一个结构体，其中包含着父类的一些信息（大小、位置等）。
在这个区域中我们包含了一个Text的组件，用来显示我们的文字。
依靠以上代码我们可以实现hello world显示在界面中。
三、鼠标点击输出hello world
qml中的鼠标点击事件是通过MouseArea实现的，通过在区域内定义鼠标事件，来使鼠标在此区域内实现效果。以下代码通过点击Rectangle的区域（id为textArea），来在输出窗口输出hello world。
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle//自定义区域
{
id: textArea//唯一标识的id
x: 0 //起始坐标
y: 0
width: parent.width //区域大小
height: parent.height
Text { //显示字符串
id: textStr
x: parent.width/2
y: parent.height/2
text: qsTr("Hello World!!")
}
MouseArea //鼠标区域
{
id: mouseTest
width: parent.width
height: parent.height
onClicked: console.debug("Hello World!!!") //单击实现输出字符串
}
}
}通过点击鼠标区域，输出hello world
