找回密码
 立即注册
Qt开源社区 门户 查看内容

第3篇Qt Quick入门教程之基础(三)QML语法1

2019-2-27 15:13| 发布者: admin| 查看: 2425| 评论: 0

摘要: 来源于微信公众号:yafeilinux和他的朋友们 导语前面两篇我们已经成功创建了Qt Quick项目,并搭载好了Android开发环境。俗话说万事开头难,大家可能没感觉到自己已经把最难的地方完成了。接下来就要正式开始探索炫 ...
来源于微信公众号:yafeilinux和他的朋友们



导语


前面两篇我们已经成功创建了Qt Quick项目,并搭载好了Android开发环境。俗话说万事开头难,大家可能没感觉到自己已经把最难的地方完成了。接下来就要正式开始探索炫酷的Qt Quick世界了,不过,在这之前,还是需要学习一下Qt Quick世界的相关规则,不然,后面遇到各种问题,会严重影响我们探索的效率和心情!

Qt Quick世界的规则,也可以说是QML语法。说到规则,大家一定会感到很枯燥,一定要学吗?如果哪位同学现在已经考过了驾照,那些条款制度现在还能记住几条?其实,我们不需要完全记住哪条交通规则要扣多少分罚多少款,这个可以到需要的时候再去查,我们只要记住哪些行为是不对的,这就够了。学习语言语法也类似,不要一开始就把什么都死记背过,这个作用不大,能记住有哪些规则或概念就够了,到真正碰到的时候可以再回头来学。等后面用的多了,自然就熟记于心了!

下面,我们开始,尽量让大家不会太枯燥!

语法基础


我们新建空的Qt Quick项目helloqml,下面更改一下自动生成的main.qml文件:
1// 下面是导入语句
2import QtQuick 2.9
3import QtQuick.Window 2.2
4
5/* QML文档可以看做是一个QML对象树,这里创建了Window根对象
6和它的子对象Text */
7Window {
8    visible: true
9    width: 640
10    height: 480
11    title: qsTr("Hello World")
12
13    Text {
14        id: text1
15        text: qsTr("hello QML!")
16    }
17}

1. 导入语句


类似于C++中的 include,在QMl中使用 import 语句导入模块,模块中包含了各种QML类型。QtQuick 模块为创建图形用户界面提供了最基本的类型,比如代码中使用的Text类型就包含在 QtQuick 模块中,QML文档中首先要导入该模块。这里我们导入了 QtQuick 2.9,其实在Qt 5.12中最新的QtQuick模块版本是2.12,使用2.9只是为了向下兼容,如果这里直接使用 QtQuick 2.12,那么使用低于 Qt 5.12 的 Qt 版本编译该源码会报错。关于 QtQuick 模块会在后面的教程中详细讲解。

因为代码中使用了 Window 类型,所以这里还导入了 QtQuick.Window 模块。Window类型可以为 Qt Quick 场景创建一个顶级窗口,所以它一般作为根对象,在其中可以创建其他QML对象。

2. QML类型(QML Types)


QML的类型系统包含了基本类型、 QML 对象类型和 JavaScript 类型,这些类型组成了整个QML文档。

  • 基本类型

在QML中将指向简单数据的类型称为基本类型,比如 int 或 string 等。基本类型的概念是相对于QML对象类型而言的,QML 对象类型可以包含属性、信号和函数等,但基本类型不能作为对象,比如 int {} 是不允许的。在QML中原生支持的基本类型如下图所示。



QML模块也可以提供基本类型,例如 date、point、rect、size 等。详细内容大家可以在帮助中索引 QML Basic Types 关键字。


  • QML对象类型(QML Object Types)

QML对象类型就是可以实例化QML对象的类型。从语法上面来说,QML对象类型可以通过类型名称{对象特性} 的格式来定义一个对象。例如,代码中 Window 和 Text 都是对象类型。当对象类型被实例化以后,就被叫做该对象类型的对象 ,例如 Text 对象类型在代码中被实例化为了 Text 类型的对象 Text,之所以这两个概念容易被混淆,是因为它们是同名的。只需要记住对象类型后面添加 {} 后就被称为对象 ,大家也可以类比C++中的类与实例化。

  • JavaScript 类型

QML支持JavaScript对象和数组,可以通过var 类型创建并存储任何标准的JavaScript类型。下面是一个例子:
1import QtQuick 2.0
2
3Item {
4    property var theArray: []
5    property var theDate: new Date()
6
7    Component.onCompleted: {
8        for (var i = 0; i < 10; i++)
9            theArray.push("Item " + i)
10        console.log("There are", theArray.length, "items in the array")
11        console.log("The time is", theDate.toUTCString())
12    }
13}

3. 对象


在前面对象类型处已经讲明了什么是对象,这里再重申一下。QML对象由类型指定,一般与类型同名,名称以大写字母开头,后面跟一对大括号,在括号中包含了对象特性(QML Object Attributes)定义,包括 id、属性、信号、信号处理器、方法、附加属性和附加信号处理器等,当然也可以包含子对象。例如,前面代码中 Window 对象中包含了visible、width、height、title等属性定义和 Text 子对象。

4. 属性(Property)


属性是对象的特性之一,可以分配一个静态的值或者绑定一个动态表达式,属性和值由一个冒号隔开,使用“属性 : 值”语法进行初始化,比如前面代码中width: 640 。属性可以分行写,这样结尾可以不用分号,也可以写在一行,中间使用分号隔开,例如:width: 640 ; height: 480 。可以在任意对象类型的帮助文档中查看该类型的所有属性。




  • id 特性

一个对象一般都会在开始指定一个id,可以通过它在其他对象中识别并引用该对象,id 特性是QML语言本身提供的,不能被QML对象类型进行重定义或者重写。id 值必须使用小写字母或者下划线开头,并且不能使用字母、数字和下划线以外的字符,其值在一个组件的作用域中必须是唯一的。

id 看起来像是一个属性,但 id 特性并不是一个属性。例如前面代码中Text 对象的 id 为 text1,所以可以在其他对象中通过 text1.text 来获取 Text 对象中的 text 属性的值, 但无法通过text1.id 来获取 id 的值。

5. 注释


QML中的注释与C++相似,单行注释使用 “ // ” 开始,直到行末结束;多行注释使用 “ /* ” 开始,以 “ */ ” 结尾。



更进一步


编译运行程序,可以看到hello QML! 文本显示在窗口左上角。下面更改 Text 对象定义代码如下:
1Text {
2    id: text1
3    text: qsTr("hello QML!")
4    anchors.centerIn: parent
5}

现在再次编译运行程序,可以看到文本显示到了界面中间。接下来在 Window 根对象中,Text 对象定义的下面继续添加一个 Rectangle 对象定义:
1Rectangle {
2    id: colorRect
3    width: 20 * 2
4    height: width
5    radius: 20
6    color: "green"
7
8    anchors.left: text1.right
9    anchors.leftMargin: 10
10    anchors.verticalCenter: text1.verticalCenter
11
12    MouseArea {
13        anchors.fill: parent
14        onClicked: {
15            console.debug("colorRect: ", parent.color)
16        }
17    }
18}

Rectangle 也是 QtQuick 模块中一个很常用的对象类型,使用它可以定义一个矩形,这里设置了矩形的宽、高为40,半径radius为20,颜色为绿色,它最终显示效果是一个绿色圆形。运行程序,效果如下图所示。



1. 锚布局


前面使用的 anchors 翻译过来就是锚,使用它可以进行简单的布局,当然这只是QML布局中的一种方法,不过很常用。anchors可以在一个部件的上、下、左、右、水平居中、垂直居中、中心等位置进行锚定,如下图所示。



比如Text 对象中 anchors.centerIn: parent 就是将 Text 对象锚定在了其父对象也就是 Window 的中心。在 Rectangle 对象中,我们使用anchors.left: text1.right 将绿色圆形的左侧与文本的右侧进行锚定,效果就是绿色圆形紧挨文本右侧放置;anchors.leftMargin: 10 表明绿色圆形左侧的边距为10;anchors.verticalCenter: text1.verticalCenter 表明绿色圆形的垂直居中位置锚定到文本的垂直居中位置,效果就是绿色圆形与文本在同一行上,且中心线对其。

2. JavaScript表达式和属性绑定


在Rectangle对象中width属性的值使用了表达式 width: 20 * 2 。在表达式中也可以包含其他对象或属性的引用,例如,height: width ,这也被称作属性绑定,当 width 的值改变时,height 属性的值会跟随变化。

3.进行交互


在QML中一个很常见的设置交互的方式是使用MouseArea,MouseArea本身是不可见的,但是它可以为一些可见内容提供鼠标交互,比如这里,MouseArea对象中 anchors.fill: parent 表明让MouseArea填充整个父对象,这里就是绿色圆形,所以我们可以使用鼠标点击绿色圆形的任何部位来进行交互。当鼠标点击后,就可以在MouseArea中使用 onClicked:{} 来执行想要进行的操作。

4.调试输出


在QML中一般使用console将需要的信息输出到控制台,可用的有console.log, console.debug, console.info, console.warn 和 console.error,比如这里使用了console.debug("colorRect: ", parent.color) ,可以顺序输出参数中的内容,可以是字符串,也可以是对象属性引用。

结语


虽然这一篇是最基础的语法,但是依然包含了众多新的术语、概念、名词,对于新的东西,唯有多用多尝试才能快速掌握。下一篇咱们继续对程序进行扩展,会涉及更多新的内容。

相关文章


第1篇 Qt Quick入门教程之基础(一)进入Qt Quick的世界

第2篇 Qt Quick入门教程之基础(二)搭建Qt Android开发环境

Qt 学习之路 2:QML 和 QtQuick 2




----------------------------------------------------------------------------------------------------------------------
我们尊重原创,也注重分享,文章来源于微信公众号:yafeilinux和他的朋友们,建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了