QML入门教程.doc

《QML入门教程.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、同时又能跟Qt写的C++代码进行方便的交互，使用起来非常方便。 如何使用？在QtC＋＋文件中通过QDeclarativeView加载，就像使用UiLoader加载.ui文件一样。不过本文不会去介绍如何在QtC＋＋中使用QML，而是把重点放在QML的语法上，不过别担心看不到.qml文件的效果。Qt提供了一个工具QMLViewer可以查看.qml文件生成的效果，该程序在Qt的bin目录下，应用名字叫qml(Windows下叫qml.exe)。所以你在看到别人提供的.qml文件时，你可以用下面命令qmlfilename.qml 查看.qml的执行结果，咱们的第一个Hello

3、,World生成界面如下        开始QML吧上面的Hello,World源代码如下 Js代码  1.import QtQuick 1.0  2.  3.Rectangle {  4.    id: page  5.    width: 500; height: 200  6.    color: "lightgray"  7.  8.    Text {  9.        id: helloText  1.        text: "Hello world!"  2.        y: 30  3.        anchors.horizontalC

4、enter: page.horizontalCenter  4.        font.pointSize: 24; font.bold: true  5.    }  6.}    第1行是QtQML的统一用法，指明当前QML会使用Qt-4.7里已经定义好的类型，比如第3行的Rectangle和第8行的Text。第3行开始至文章结束处则定义了一个矩形的图形区域对象，第4行则申明了该矩形区域对象的id为”page”可以被其它对象识别并通过该id访问其成员属性，另外几个属性width/height/color则很好理解，语法跟CSS类似，可以写在一行中用分号”;”隔开

5、。第8行至第12行则是一个文本对象，看它代码的嵌套结构可以知道它是内嵌于Rectangle的。Text的属性除了anchors其它几个都能顾名思义。anchors描诉的是当前对象的位置和其它对象的相对关系，这里看到其水平中心位置在“page“的水平中心位置。如果想对anchors了解更多，请参考锚的解释。以上就是Hello,World的全部代码，将其存为hellowordl.qml，那么只要执行qmlhellowrold.qml就能看到文章前头的界面了。  更多对象？在上面的代码中我们用到了Rectangle和Text，那么我还有哪些对象以及这些对象有哪些属性呢。那么

6、请访问QML-Item类,Item类是QML最基础的类，通过查看它的继承类以及这些继承类可用的属性，你可以添加更多你感兴趣的内容。 QML入门教程(2)在上一篇文章里我们使用了最基础的QML类型实现了文字Hello,World的显示。这篇文章中将会增加颜色选项面板，用户可以给 Hello,World设置不同的颜色，如下图显示QML组件从图中可以看到选项面板由6个颜色小块组成，它们唯一的区别就是颜色不一样。那么我们就可以用组件(Component)来实现一个颜色块，然后在需要的时候使用这个组件就可以了。组件其实和其它编程语言中的宏，函数，类，结构体等功能差不多，就是代码

7、复用。作为程序员，我知道你懂的。组件由一个单独的QML文件名组成，文件名总是以大写字母开头，要使用该组件的时候直接使用该文件名就可以了。关于如何定义自己的组件，请访问 DefiningnewComponents。我们为一个颜色块定义了一个Cell.qml文件，然后使用Cell作为一个去访问它。  Cell.qml的内容 Js代码  1.import QtQuick 1.0  2.  3.Item {  4.    id: container  5.    property alias cellColor: rectangle.color  6.