从头学Qt Quick(2)-- QML语法从一个简单的例子说起

上一篇文章中,我们对QtQuick做了简单的介绍,体验了使用QML语言构建一个UI的便捷。这里我们简要介绍一下QML的语法。

QML将界面分成一些更小的元素,这些元素可以组成一个组件,QML语言描述了UI的形状和行为,并且可以使用JavaScript修饰。总的来说QML的结构有点像HTML,其语法和CSS比较近似。

1.QML层次结构

要使用QML进行界面的布局,首先需要理解QML元素的层次结构。QML的层次结构很简单,是一个树形结构,最外层必须有一个根元素,根元素里面可以嵌套一个或多个子元素,子元素里面还可以包含子元素。如果用图形画出来的话大概是这个样子。

image

QML的坐标系采用的屏幕坐标系,原点在屏幕左上角,x轴从左向右增大,y轴从商到下增大,z轴从屏幕向外增大。子元素从父元素上继承了坐标系统,它的x,y总是相对于它的父元素坐标系。这一点一定要记住,非常重要。

2.基本语法

我们主要对照下面的代码进行介绍:

 

复制代码
 1 import QtQuick 2.4
 2 import QtQuick.Window 2.2
 3 import QtQuick.Controls 1.2
 4 
 5 /* 这是一个多行注释,和c语言的一样 */
 6 // 当然这是一个单行注释
 7 
 8 Window {
 9 
10     id:root;        // Window元素的id,应该保证在这个qml文件中名字唯一
11     visible: true;
12     width: 460;     // 直接指定窗口的宽度
13     height: 288;    // 直接指定窗口的高度
14 
15     Image {
16         id: bg;
17         width: parent.width;            // 图片的宽度依赖父窗口的宽度
18         height: parent.height;          // 图片的高度依赖父窗口的高度
19         source: "qrc:///images/sky.jpg" // 引用一张图片
20     }
21 
22     Image {
23         id: rocket;
24         x: (parent.width - width) / 2;  // 图片位置水平居中
25         y: 40;                          // 图片位置距离父窗口40
26         source: "qrc:///images/rocket.png";
27     }
28 
29     Text {
30         // 没有指定id,即这是一个匿名元素
31         y:rocket.y + rocket.height + 20;                    // 文本顶部距离rocket图片底部20
32         anchors.horizontalCenter: parent.horizontalCenter   // 设置文字水平居中
33         text: qsTr("火箭发射!");                          // 设置文本显示的文字
34         color: "#ff2332";                                   // 设置文本颜色
35         font.family: "楷体";                                // 设置字体为楷体
36         font.pixelSize: 30;                                 // 设置文字大小
37     }
38 }
复制代码

 

运行效果是这个样子。

image

布局结构是是这样的:

image

代码说明:

(1)第1~3行的import是引入了一个指定版本的模块。一般都会引入QtQuick2.x这个模块,Window模块代表一个窗体,Control模块有很多的控制组件。这种import语法类似于C语言中的#include,和Java语言中的imort效果基本上一致。

(2)第5、6两行分别是多行注释和单行注释,和C语言中的规则是一样的。

(3)每一个QML文件都需要一个根元素,这里的根元素是Window元素,元素的形式是:元素类型 {}

(4)元素拥有属性,他们按照name:value的格式进行组织;

(5)语句后面的分号";"是可选的,但是建议加上;

(6)第7行指定了window的id,在一个qml文件这种id硬保证唯一,否则后出现的id会覆盖前面的id造成不必要的bug。建议根元素的名字直接叫“root”,方便查找和理解,当然也可以取名任何你喜欢的名字。任何QML文档中的元素都可以使用他们的id进行访问;

(7)第11行设置窗口可见,默认是false;

(8)第12、13行指定了窗口的宽高为460x288;

(9)第15行使用了一个Image元素,这个元素是用来展示图片的;

(10)第17、18行指定图片的高度和宽度为父元素(即WIndow)的宽高,因此图片的宽高会随着父元素变化,使用parent可以访问父元素。

(11)19行指定了一个图片资源的路径,这里使用了“qrc://”资源,这个资源的路径在image进行配置;qml还支持直接的本地文件路径和网络路径。

(12)第24、25行指定了第二张图片的位置,在窗口水平居中,距离窗口顶部40像素;

(13)第29行创建了一个Text元素,这个元素是用来呈现文字的。

(14)第31行指定文本元素的y坐标为距离火箭图片(rock)底部20个像素;

(15)第32行使用锚点的方式设置了文字的水平居中;

(16)第33行设置了文本内容;

(17)第34行设置文字的颜色,文字的颜色可以使用RGB方式也可以使用W3C规范的SVG方式;

(18)第35、36行设置了字体和文字的大小。

 

3.qmlscene 工具

qt提供了一个查看qml效果的工具qmlscene ,这个工具在$QTDIR/qmlscene.exe,设置好环境变量后就可以直接在cmd矿口里面使用qmlscene 查看qml文件效果。

image

在控制台下输入qmlscene后就会弹出一个文件选择窗口,选择需要预览的qml,当然这里我们图片设置的是qrc路径,qmlscene预览效果并不好

image

image

可以看到,两张图片并没有显示出来,并且会提示找不到这两张图片。

解决办法当然可以将qrc路径修改成本地文件路径

image

image

当然qmlscene也可以直接在后面接qml的位置比如上面图中就使用了

qmlscene D:/Workspace/qt/rocket/main.qml

在下一篇随笔中将详细介绍QML语法中的属性,和在QML使用JS脚本的方式。

代码下载:http://download.csdn.net/detail/csulennon/8673425




from: http://www.cnblogs.com/csulennon/p/4485768.html

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值