-
1 什么是QML
通俗的讲,QML是一种编程语言,用来开发界面用的. QML书写格式类似于JSON的语法,并支持将命令性JavaScript表达式与动态属性绑定结合在一起
-
2 学习QML的第一步 -通过一个示例来开始学习QML
创建一个QML文件
每个QML文件都由两部分组成:导入部分和对象声明部分. QtQuick
导入中提供了用户界面最常用的类型和功能. 类似c++的include<>
导入(import)和使用 QtQuick 模块
要使用Qt Quick模块,需要导入QML文档. 导入语法如下所示:
import QtQuick 2.3
导入后就可以使用Qt Quick的功能了
定义一个简单对象,例如一个红色的矩形,其中的文本居中显示,以下是代码和运行截图
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("qml学习")
Rectangle {
width: 200
height: 100
color: "red"
Text {
anchors.centerIn: parent
text: "Hello, World!"
}
}
}
这个简单的QML文件开始是import语句,会引入QtQuick 2.9模块,类似c++的include语句,与java中的import语句一样的效果。
1、ApplicationWindow{},定义了一个应用程序的窗口,里面有title 名字为“qml学习”。
2、Rectangle{}语句,定义了一个rectangle的对象。
3、Text 可以说是一个rectangel的内置对象。anchors.centerIn: parent让它居中父类显示
4、属性初始化了rectangle的width 和 height属性。
用户的输入怎么处理?
使用QML开发界面的一大优点是,它允许程序员使用简单的JavaScript表达式定义应用程序对事件的反应. 在QML中,我们将这些事件称为信号 ,这些信号由信号处理程序处理 .
Rectangle {
width: 200
height: 100
color: "red"
Text {
anchors.centerIn: parent
text: "Hello, World!"
}
MouseArea {
anchors.fill: parent
onClicked: parent.color = "blue"
}
这个例子是每当用户单击窗口中的任何位置时,矩形都会从红色变为蓝色. 请注意, MouseArea类型还会发出触摸事件的点击信号,因此此代码也可以在移动设备上运行.
用户用键盘输入时,可以用一个简单的表达式类似地处理:
Rectangle {
width: 200
height: 100
color: "red"
Text {
anchors.centerIn: parent
text: "Hello, World!"
}
focus: true
Keys.onPressed: {
if (event.key == Qt.Key_Return) {
color = "blue";
event.accepted = true;
}
}
}
当用户点返回键时,矩形颜色会变成蓝色
属性绑定
对象及其属性构成了QML文件中定义的图形界面的基础. QML语言允许属性以各种方式彼此绑定,从而实现高度动态的用户界面.
在以下示例中,每个子Rectangle对象均绑定到父Rectangle上面. 如果父矩形的几何形状发生变化,由于属性绑定,每个子矩形的几何形状将自动更新.
Rectangle {
width: 400
height: 200
Rectangle {
width: parent.width / 2
height: parent.height
}
Rectangle {
width: parent.width / 2
height: parent.height
x: parent.width / 2
}
}
动画 Animations
属性也可以通过动画动态更新. QtQuick
导入提供了各种动画类型,可用于为属性值的更改制作动画. 在下面的示例中,动画了一个属性,然后将其显示在" 文本"区域中:
Rectangle {
color: "lightgray"
width: 200
height: 200
property int animatedValue: 0
SequentialAnimation on animatedValue {
loops: Animation.Infinite
PropertyAnimation { to: 150; duration: 1000 }
PropertyAnimation { to: 0; duration: 1000 }
}
Text {
anchors.centerIn: parent
text: parent.animatedValue
}
}
显示的值会从0到150定期变化
自定义类型
我们可以自定义一个按钮类型,利用rectangle对象达到想要的视觉效果,并且将这个类型定义为自定义类型。
例如,我们写一个button.qml
// Button.qml
import QtQuick 2.3
Rectangle {
width: 100; height: 100
color: "red"
MouseArea {
anchors.fill: parent
onClicked: console.log("Button clicked!")
}
}
现在,可以在应用程序中多次重复使用该类型,如下所示
// application.qml
import QtQuick 2.3
Column {
Button { width: 50; height: 50 }
Button { x: 50; width: 100; height: 50; color: "blue" }
Button { width: 50; height: 50; radius: 8 }
}
这样,模块化用户界面类型就可以在应用程序中进行组装和重用
下一章 讲QML的属性