Simple QML Tutorial
本教程介绍Qt 的Quick UI的语言QML。该教程并不涵盖一切;重点讲解一些关键原则,并根据需要介绍其特点。
通过本教程的各个步骤,我们将学习QML基本类型(Basic Types),我们将创建具有属性(properties)和信号(signals)的QML组件,我们将在状态(states)和转换(transitions)的帮助下创建一个简单的动画。
从一个最小的“Hello world”程序开始,夹杂着介绍一些新概念。
1.Basic Types
1.1 Hello world
第一个程序是一个非常简单的“Hello world”示例,它使用了一些基本的QML概念。下图是这个程序的截图。
1.2 新建项目过程
1.2.1 新建 Qt Quick Application
1.2.2 新建 QML File
1.2.3 修改Helloworld.qml
根项目是Item的子类Rectangle,自身不带显示窗口,需要使用QQuickView加载qml来显示才行,所以需要修改加载的方式。
import QtQuick 2.0
Rectangle {
id: page
width: 320; height: 480
color: "lightgray"
Text {
id: helloText
text: "Hello world!"
y: 30
anchors.horizontalCenter: page.horizontalCenter
font.pointSize: 24; font.bold: true
}
}
1.2.4 修改main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>
int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
#if 0
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);
return app.exec();
#else
QQuickView view ;
view.setSource(QUrl("qrc:/Helloworld.qml"));
view.show();
return app.exec();
#endif
}
到此即可运行。
1.2.5 打包方法
qml项目打包命令:
windeployqt xxxx.exe --qmldir qmlPath
注意,qmlPath 指的是你的项目中 qml 文件所在的文件路径!
- 新建bat文件–qtenv2.bat
::@echo off
echo Setting up environment for Qt usage...
set QtKit=C:\Qt\5.15.2\msvc2019_64
set PATH=%QtKit%\bin;%PATH%
echo %QtKit%
::cd /D C:\Qt\5.15.2\msvc2019_64
echo Remember to call vcvarsall.bat to complete environment setup!
start windeployqt ch1_1_1_Helloworld.exe --qmldir E:\Project\QML\SimpleQMLTutorial\ ch1_1_1_Helloworld
cmd /k
- 去除掉一些没用的文件和文件夹
最终结果展示如下:
1.3 基本概念
1.3.1 import
首先,我们需要导入本例所需的类型。大多数QML文件将导入内置的QML类型(如矩形,图像,…)
import QtQuick 2.0
1.3.2 Rectangle Type
Rectangle {
id: page
width: 320; height: 480
color: "lightgray"
声明一个Rectangle类型的根对象。它是用来在QML创建应用程序的基本构建块之一。我们给它一个id以便以后可以引用它,称之为“page”。我们还设置了宽度width、高度height和颜色color属性。矩形类型还包含许多其他属性(如x和y),不设置则会保留其默认值。
1.3.3 Text Type
Text {
id: helloText
text: "Hello world!"
y: 30
anchors.horizontalCenter: page.horizontalCenter
font.pointSize: 24; font.bold: true
}
添加一个文本Text类型作为根矩形类型的子类型:
- text属性:“Hello world!”
- y属性:用于将文本垂直放置在离父对象顶部30个像素的位置。
- anchors.horizontalCenter属性:指的是类型的水平中心。在这种情况下,我们指定文本类型应该在页面元素中水平居中(参见基于锚的布局)。
- font.pointSize属性:与字体相关,并使用点表示法。
- font.bold属性:文本加粗
2. QML Components
本节添加一个颜色选择器用来改变文本的颜色。
2.1 自定义单元格Cell组件
新建Cell.qml ,注意文件名大小写
import QtQuick 2.0
Item {
id: container
property alias cellColor: rectangle.color
signal clicked(cellColor: color)
width: 40; height: 25
Rectangle {
id: rectangle
border.color: "white"
anchors.fill: parent
}
MouseArea {
anchors.fill: parent
onClicked: container.clicked(container.cellColor)
}
}
2.1.1 item
组件的根类型是一个id为container的Item。
Item是QML中最基础的视觉类型,通常用作其他类型的容器。
2.1.2 container 的property
property alias cellColor: rectangle.color
给container声明一个cellColor属性。
属性可以从组件外部访问,在组件可以用不同的颜色实例化单元格。这个属性的值是一个现有属性的别名alias --矩形的颜色(参见属性绑定)。
2.1.3 container 的signal
给container定义一个信号:
signal clicked( cellColor : color )
组件也可以有一个信号,我们调用click时发射一个类型为color的cellColor参数。稍后,使用这个信号来更改主QML文件中的文本的颜色。
2.1.4 单元格颜色
Cell组件的颜色显示是用一个矩形来实现的。
anchors.fill属性是设置可视类型大小的方便方法,该矩形的大小将与其父对象container相同。
Rectangle {
id: rectangle
border.color: "white"
anchors.fill: parent
}
2.6 鼠标点击事件
为了在单击单元格时改变文本的颜色,我们创建了一个MouseArea类型,其大小与其父单元格container相同。
MouseArea定义了一个称为clicked的信号。当这个信号被触发时,将会发出自定义的点击信号,并将颜色作为参数进行传递。
MouseArea {
anchors.fill: parent
onClicked: container.clicked(container.cellColor)
}
2.2 main.qml
在main.qml文件中,使用Cell组件来创建颜色选择器:
import QtQuick 2.0
Rectangle {
id: page
width: 320; height: 480
color: "lightgray"
Text {
id: helloText
text: "Hello world!"
y: 30
anchors.horizontalCenter: page.horizontalCenter
font.pointSize: 24; font.bold: true
}
Grid {
id: colorPicker
x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
rows: 2; columns: 3; spacing: 3
Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
}
}
2.3 Cell使用
在网格Grid中放置6个不同颜色的单元格来创建颜色选择器。
当单元格的点击信号被触发时,我们希望将文本的颜色设置为作为参数传递的cellColor。我们可以通过名为“onSignalName”的属性对组件的任何信号做出反应(参见信号属性)。
2.4 注意
在main.cpp文件中view.setSource(QUrl("qrc:/main.qml"));
要使用url的链接,qt才会找到Cell.qml ,否则会报Cell 不是类型的错误。
3. 状态States和转换Transitions
在本节中,我们通过引入状态和转换使这个例子更加动态。
我们希望我们的文本移动到屏幕底部,旋转并在点击时变成红色。
在上述代码中,增加代码
3.1 为Text项添加鼠标事件处理项
Text {
...
MouseArea {
id: mouseArea;
anchors.fill: parent
}
...
}
MouseArea是一个不可见项,通常与可见项一起使用,以便为该项提供鼠标处理。通过有效地充当代理,鼠标处理的逻辑可以包含在MouseArea项中。
Text添加MouseArea项后,则具备了鼠标事件,可以被点击。
3.2 为Text项添加状态
Text {
...
states: State {
name: "down";
when: mouseArea.pressed === true
PropertyChanges {
target: helloText;
y: 160;
rotation: 180;
color: "red"
}
}
...
}
首先,我们为文本类型创建一个新的“down”状态。
当鼠标区域被按下时,该状态将被激活,当鼠标区域被释放时,该状态将被取消激活。
“down”状态包括一组从起始状态变化后的属性值。具体来说,我们将文本的y属性设置为160,旋转设置为180,颜色设置为红色。
3.3 Text设置状态变化的过渡效果
因为我们不希望文本立即出现在底部,而是要平稳地移动,所以我们在两个状态之间添加了一个过渡。并定义转换将在其之间运行的状态。在本例中,我们希望从默认状态转换到下状态。
Text {
...
transitions: Transition {
from: ""; to: "down"; reversible: true
ParallelAnimation {
NumberAnimation {
properties: "y,rotation";
duration: 500;
easing.type: Easing.InOutQuad
}
ColorAnimation { duration: 500 }
}
}
...
}
ParallelAnimation类型确保两种类型的动画(数量NumberAnimation和颜色ColorAnimation)同时开始。我们也可以使用SequentialAnimation来逐个运行它们。