第一个Qt Quick程序（QML程序）-优快云博客

本文介绍了Qt4.7中QtQuick的应用，包括QML语言的基本使用方法及如何在QtCreator中建立简单的QML工程。通过实践操作，读者可以快速上手QtQuick并了解其基本特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这一节，我们讲述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. 我们这时运行程序，效果如下。