第一个Qt Quick程序（QML程序）

 

上一节我们详细讲述了Qt 4.7和Qt Creator 2.0的安装。这一节，我们讲述Qt Quick的应用。

Qt Quick是Qt 4.7主推的技术，下面是Qt官网对其进行的介绍：

Qt Quick 是一种高级用户界面技术，使用它可轻松地创建供移动和嵌入式设备使用的动态触摸式界面和轻量级应用程序。三种全新的技术共同构成了 Qt Quick 用户界面创建工具包：一个改进的Qt Creator IDE、一种新增的简便易学的语言 (QML) 和一个新加入 Qt 库中名为 QtDeclarative 的模块，这些使得 Qt 更加便于不熟悉 C++ 的开发人员和设计人员使用。

下面我们先到Qt Creator中查看相关帮助文件，让我们对它有个大体的了解。

我们查看Qt Creator中的帮助Help，首先进入我们眼帘的便是Qt Creator的介绍，在这里你可以查看Qt Creator的相关信息和使用方法。

 

我们查看下面的目录，可以看到这里有简单的工程的建立教程。我们进入Creating an

Animated Application 的链接，这个便是一个最简单的QML工程的教程，你可以参考一下。

 

下面我们建立自己的QML工程。

1.新建Qt QML Application ，工程名设置为helloWorld 。

 

2.我们点击helloWorld.qmlproject文件。

在这里可以看到它就是包含了几个文件夹的路径信息，默认的都是本工程文件夹。

在最上面，有一句提示，Do you want to enable the experimental Qt Quick Designer? 你是否要启用实验中的Qt Quick Designer？当然，所以我们点击后面的按钮来启用Qt Quick Designer。

 

3.这时弹出一个提示框。

它的大体内容是，如果启用Qt Quick Designer ，将影响Qt Creator的整体稳定性。还告诉了我们怎么停用Qt Quick Designer。我们选择“Enable Qt Quick Designer”。

 

4.我们关闭Qt Creator，然后重新打开它。我们再次打开刚才建立的工程。

双击helloWorld.qml文件，这时我们期盼已久的Qt Quick Designer界面终于出现了。对于这个界面，我们以后再详细讲解。

 

5.我们再次回到Edit模式下，查看helloWorld.qml文件的内容。

import Qt 4.6

Rectangle {

    width: 200

    height: 200

    Text {

        x: 66

        y: 93

        text: “Hello World”

    }

}

这就是传说中的QML语言了，就像官网所说的，它是JavaScript的扩展，所以它很像JavaScript。我们这里先不对这些代码做什么解释，到后面会专门来讲这个语言的。

6.我们这时运行程序，效果如下。

 

7.我们更换一下程序的皮肤。

在skin菜单中选择一个皮肤。

 

运行效果如下：

 

我们可以在其上右击鼠标，选择Quit菜单，退出程序。

8.关于停用Qt Quick。

我们打开Help菜单，进入About Plugins子菜单。然后将Qt Quick项的对勾去掉即可。

 

到这里，一个最简单的Qt Quick程序就完成了。我们可以看到，这是一个全新的体验，它与以前的Qt应用是完全不同的。在以后的教程里我们会对Qt Quick及其包含的QML语言进行全面的讲解。