新手必学 QML入门教程 (1)

移动开发
QML是Qt推出的Qt Quick技术的一部分,是一种新增的简便易学的语言。 QML是一种陈述性语言,用来描述一个程序的用户界面:无论是什么样子,以及它如何表现。

本文介绍QML入门教程的文章,教你如何学习QML。在QML,一个用户界面被指定为具有属性的对象树。 这使得Qt更加便于很少或没有编程经验的人使用。

Qt Declarative UI 传得沸沸扬扬,却很少有中文资料介绍这是一个什么样的技术,以及如何使用它。偶尔能搜到几篇也是掐头去尾的,让人摸不着头脑。CuteQt网友英狐奉献的三篇文章很有参考价值,把我带入了门。我准备翻译的这个入门教程来自于Qt官方文档,更多的是语法性的介绍。说是翻译,其实是我在原文基础上的一个阅读理解吧。

QML是什么?

QML是一种描诉性的脚本语言,文件格式以.qml结尾。语法格式非常像CSS(参考后文具体例子),但又支持javacript形式的编程控制。我个人认为它结合了QtDesigner UI和QtScript的有点。QtDesigner可以设计出.ui界面文件,但是不支持和Qt原生C++代码的交互。QtScript可以和Qt原生代码进行交互,但是有一个缺点,如果要在脚本中创建一个继承于QObject的图形对象非常不方便,只能在Qt代码中创建图形对象,然后从QtScript中进行访问。而QML可以在脚本里创建图形对象,并且支持各种图形特效,以及状态机等,同时又能跟Qt写的C++代码进行方便的交互,使用起来非常方便。

如何使用?

在Qt C++文件中通过QDeclarativeView加载,就像使用UiLoader加载.ui文件一样。不过本文不会去介绍如何在Qt C++中使用QML,而是把重点放在QML的语法上,不过别担心看不到.qml文件的效果。Qt提供了一个工具QML Viewer可以查看.qml文件生成的效果,该程序在Qt的bin目录下,应用名字叫qml(Windows下叫qml.exe)。所以你在看到别人提供的.qml文件时,你可以用下面命令qml filename.qml 查看.qml的执行结果,咱们的***个Hello,World生成界面如下:

新手必学 QML入门教程 (1)

开始QML吧

上面的Hello,World源代码如下

  1. import Qt 4.7  
  2.  Rectangle {  
  3.      id: page  
  4.     width: 500; height: 200  
  5.     color: “lightgray”  
  6.      Text {  
  7.         id: helloText  
  8.         text: “Hello world!”  
  9.          font.pointSize: 24; font.bold: true  
  10.         y: 30; anchors.horizontalCenter: page.horizontalCenter  
  11.      }  
  12.  } 

第1行是Qt QML的统一用法,指明当前QML会使用Qt-4.7里已经定义好的类型,比如第3行的Rectangle和第8行的Text。

第3行开始至文章结束处则定义了一个矩形的图形区域对象,第4行则申明了该矩形区域对象的id为”page”可以被其它对象识别并通过该id访问其成员属性,另外几个属性width/height/color则很好理解,语法跟CSS类似,可以写在一行中用分号”;”隔开。

第8行至第12行则是一个文本对象,看它代码的嵌套结构可以知道它是内嵌于Rectangle的。Text的属性除了anchors其它几个都能顾名思义。anchors描诉的是当前对象的位置和其它对象的相对关系,这里看到其水平中心位置在“page“的水平中心位置。如果相对anchors了解更多,请参考锚的解释。

以上就是Hello,World的全部代码,将其存为hellowordl.qml,那么只要执行 qml hellowrold.qml就能看到文章前头的界面了。

更多对象?

在上面的代码中我们用到了Rectangle和Text,那么我还有哪些对象以及这些对象有哪些属性呢。那么请访问QML-Item类,Item类是QML最基础的类,通过查看它的继承类以及这些继承类可用的属性,你可以添加更多你感兴趣的内容。

责任编辑:zhaolei 来源: Qt技术博客
相关推荐

2011-06-16 09:53:25

Qt QML 教程

2011-06-16 09:40:53

QML 教程

2010-07-27 15:53:15

2010-08-02 09:36:22

Flex

2011-07-29 11:28:58

iPhone开发

2011-06-23 13:20:46

2011-09-07 11:13:27

无线路由器无线路由器设置

2023-11-29 07:30:08

Python用户界面

2014-05-26 15:35:55

Web组件Web Compone

2009-07-08 15:12:48

Java Servle

2010-08-03 13:06:15

Flex Builde

2013-08-29 14:12:52

Storm分布式实时计算

2011-06-16 11:04:07

Qt

2018-03-22 14:59:13

Docker入门容器

2011-09-02 10:59:10

jQuery Mobi

2010-07-20 16:19:54

Perl

2013-06-24 13:38:34

HTML5 DataList

2010-06-18 16:56:50

UML建模语言

2010-08-03 14:37:30

Flex入门教程

2010-05-21 12:50:45

Subversion快
点赞
收藏

51CTO技术栈公众号