×
Namespaces

Variants
Actions

QML入门教程(1)

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

兼容于
平台:
Symbian

文章
bugatcuteqt 在 27 May 2010 创建
最后由 hamishwillee 在 13 Jun 2012 编辑


Contents

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生成界面如下
Qml1.png

开始QML吧

上面的Hello,World源代码如下

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

第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最基础的类,通过查看它的继承类以及这些继承类可用的属性,你可以添加更多你感兴趣的内容。

好吧, Happy QML。


参考文档

Nokia Qt官方QML教程

This page was last modified on 13 June 2012, at 10:56.
352 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×