6.2 Hello Qt

在这一节中,将通过一个“Hello Qt!”程序,向大家介绍 Qt4 程序编译运行的流 程,并且将采用上面所述的 3 种方法分别介绍,使大家能够对比学习。为什么选择这个 “老套”的程序呢,大家可以看到它虽然简单,却是“麻雀虽小,五脏俱全”。基本上每个 讲述编程的书籍开头不是“Hello World”就是“Welcome You”,好多世界级的大师都这么 做,肯定是有道理的,并且这已经是讲述编程的书籍的“约定俗成”了。

6.2.1 基本流程

1. 成功安装 Qt 4.5

2. 正确配置环境变量(Windows 环境通常不需要)

3. 书写源代码

将下面的源代码保存至一个名为 helloqt.cpp 的文件,并把它放进一个名为 helloqt 的目录中,你可以使用任何一种文本编辑器完成此项工作,比如 Windows 平台的记事本, Linux 下的 vim,Mac OS X 下的 TextEdit。

4. 生成项目文件

在命令行下,进入 helloqt 目录,输入如下命令,生成一个与平台无关的项目文件 helloqt.pro:

qmake –project

5.生成 makefile 文件

然后输入如下命令,从这个项目文件生成一个与平台相关的 makefile 文件:

qmake helloqt.pro

6.运行 make 构建程序

在 X11 以及 Mac 下,键入 make;

在 Windows 上,如果使用的是开源版的 Qt,键入 mingw32-make.exe;如果使用的是商 业版的 Qt,则输入 nmake;

7. 运行程序

在 Windows 下,输入 helloqt,并回车运行; 在 X11 下,输入./helloqt;

在 Mac OS X 下,输入 open helloqt.app

8.结束程序

要结束该程序,可以直接单击窗口标题上的关闭按钮。

小贴士:这就是 Qt4 程序编译运行的大致顺序,上面的这个流程主要是采用命令行方式进 行的。如果你使用的是 Qt 的商业版和 Microsoft Visual C++作为开发环境,则需要使用 nmake 命令替代 make 命令。还可以通过.pro 文件创建一个 Visual C++工程文件,方法如 下:

qmake –project
qmake –tp vc helloqt.pro

然后,就可以使用 Visual C++打开生成的工程文件,继续完成编译运行的工作。

如果是在 Mac OS X 的 Xcode 里面使用 Qt,则可以打开命令行,输入如下命令来生成一 个 Xcode 工程文件,继而完成后面的工作:

qmake –spec macx-xcode helloqt.pro

最后这个程序的运行起来就像图 6-1 所示的那样。

图 6-1 Hello Qt!运行效果

6.2.2 源码分析

本实例实现一个“Hello Qt !”的例子,它是基于对话框的程序,界面上有一个按 钮,上面的字符是“Hello Qt!”,单击该按钮,对话框关闭,程序退出。实例效果如图所 示:

实现代码如下:

#include <QApplication>
#include <QPushButton>
int main(int argc, char *argv[])
{
    QApplication app(argc,argv);
    QPushButton pushButton( QObject::tr("Hello Qt !") );
    pushButton.show();
    QObject::connect(&pushButton,SIGNAL(clicked()),&app,SLOT(quit()));
    return app.exec();
}

第 1 行包含了 QApplication 的定义。Qt 的头文件中最为重要的两个是<QApplication>

和<QCoreApplication>。在本书后面的章节中,你会经常看到它们。所有 Qt GUI 应用程序 都需要包含<QApplication>这个文件,若使用的是非 GUI 应用程序,则需要包含

&lt;QCoreApplication&gt;。

小贴士:在 Qt4 中,对于每个 Qt 类,都有一个与该类同名并且采用大写形式的头文件,在 这个头文件中包含了对该类的定义。

第 2 行包含了按钮窗口部件的头文件。

小贴士:在 Qt4 中,头文件的包含可以采用类似于<QApplication>和<QPushButton>的形 式,也可以使用<qapplication.h>和<qpushbutton.h>的形式。为什么这么说呢,以 Windows 上安装的 Qt4.5 为例,请进入你的安装路径下的 include 目录,我的是 C:\Qt\2009.03\qt\include\QtGui,在这里你可以找到 QApplication 和 qapplication.h, 用记事本打开 QApplication 这个文件,你就会发现里面只有一行代码: #include "qapplication.h"。

第 3 行创建了应用程序的入口,Qt 程序以一个 main()函数作为入口,它有 argc 和 argv 两个参数。

第 5 行创建了一个 QApplication 对象,用来管理整个应用程序所用到的资源。每个 Qt 程序都必须有且只有一个 QApplication 对象。这个 QApplication 构造函数需要 argc 和 argv 作为参数,以支持程序的命令行参数。

第 6 行创建了一个 QPushButton 对象,它是一个窗口部件(widget),并把它的显示文 本设置为“Hello Qt!”。

小贴士:在 Qt 和 UNIX 术语中,窗口部件(widget)通常是指用户界面中的可视化元素, 比如按钮、滚动条和菜单等都是窗口部件。该词起源于 “window gadget”这个词组,语义 有些类似于 Windows 系统中的“控件”(control)的含义,但又不尽相同。

第 7 行调用按钮对象的 show()方法,将按钮显示出来。Qt4 在创建窗口部件的时候, 通常都是隐藏不显示的,可以调用 show()方法来将它们显示出来。这种做法还有一个好 处,就是我们可以先对窗口部件的属性等进行设置,然后再显示出来,从而防止闪烁现象的 出现。

第 8 行使用了 Qt 的信号/槽机制。这一机制是这样运作的,Qt 的窗口部件可以通过发 射信号(signal)来通知应用程序,某个用户动作已经发生或者是窗口部件的某种状态发生 了变化,应用程序通过一个称为槽( slot)的函数来做出回应和处理。以我们这个程序为 例,当用户使用鼠标左键单击那个 “Hello Qt!”按钮时,该按钮就会发射一个 clicked() 信号,根据我们的设置,QApplication 对象的 quit()槽负责响应这个信号,它执行退出应 用程序的操作。

这里大家不必深究这个内容,只需要知道“它们就是这么用的”即可。在本节的后面

会讲述信号/槽机制的用法,更为深入的内容,可以阅读第 13 章。

第 9 行调用 QApplication 的 exec()方法,程序进入事件循环,等待用户的动作并适时 做出响应,这里的响应通常就是执行槽函数。 Qt 完成事件处理及显示的工作后,退出应用 程序,并返回 exec()的值。

6.2.3 编译运行

在 6.2.1 节里,我们已经总结了编译运行 Qt 的方法,但恐怕还是有些晦涩难懂,为了 使读者朋友看得更为清晰,现在把它图文解说一下。以 Windows 平台为例,操作系统是 Windows XP SP2 中文版,Qt 是 4.5 SDK,我们从第 4 步开始(前 3 步实在没有什么好说 的,如有不明白的,请回头去看前几章,呵呵)。

依次点击【开始】→【所有程序】→【Qt SDK by Nokia v2009.03(open source)】→【Qt Command Prompt】,启动 Qt 命令行,如图 6-2 所示,每次启动时,命令行会自动为我 们配置好 Qt 所需的环境。

图 6-2 启动 Qt 命令行

接下来切换到你保存的程序文件目录,我这里的情形如图 6-3 所示

图 6-3 进入程序文件所在的目录

接下来输入 qmake –project,生成项目文件,再输入 dir/p 查看,发现生成的项目文 件名为 helloqt.pro。

图 6-4 生成项目文件

然后输入 qmake –helloqt.pro,生成 makefile 文件。

这之后再输入 mingw32-make.exe,开始编译程序,情形如图 6-5 所示,编译成功后,将在 debug 目录下生成一个名为 helloqt.exe 的可执行文件。

图 6-5 编译程序

进入 debug 目录,输入 helloqt,运行它,程序的样子与图 6-1 所示相同。 好了,到此我们的第一个 Qt4 程序就顺利完成了,它是基于手写代码,并且是采用命令行方式编译运行的。这就是我们所说的第 1 种方法。

6.2.4 第 2 种方法

这里我们以 Qt Creator(关于 Qt Creator 的详细使用方法,请见第 12 章)作为 IDE,流程如下:

1. 成功安装 Qt4.5

2. 正确配置环境变量(Windows 环境通常不需要)

3. 书写源代码

4. 启动 Qt Creator

首先依次点击【开始】→【所有程序】→【Qt SDK by Nokia v2009.03(open source)】→【Qt Creator】,启动 Qt Creator。

然后依次点击主菜单的【Tools】→【Options...】,在弹出的如图所示的对话框中选 中【Qt4】→【Qt Versions】,查看 Qt Creator 识别的 Qt4 的版本情况,如果符合你的实 际情形,就直接点击【OK】按钮退出;如果不符合,你可以对它进行增、删、改,方法比较

简单,根据屏幕的提示完成即可。

注意,这一步很重要,如果 Qt Creator 没有正确识别你的 Qt4 所在的位置,那么接下 来的所有步骤都将变得没有意义。

图 6-6 查看并设置 Qt4 环境

5.新建工程

依次点击【File】→【New...】→【Projects】→【Empty Qt4 Project】,如图 6-7 所示,点击【OK】按钮建立一个空的 Qt4 工程。

图 6-7 新建 Qt4 工程

接下来弹出的对话框会要求你设置工程的名字和所在的目录,并且会提示你不可采用 特殊的字符,如图 6-8 所示,根据笔者的经验,不要包含空格,最好不要包含中文字符, 切记!

图 6-8 Qt 对于命名的要求

如图 6-9 所示,输入正确的路径和工程名字(这里是 helloqt)后,点击 Next 按钮。

图 6-9 正确的输入工程名称和目录

接下来这一步没有什么好说的,系统向你展示了即将创建的工程的信息,如图 6-10 所 示,点击 Finish 按钮,这就生成了一个新的工程,如图 6-11 所示。

图 6-10 新工程的信息

图 6-11 生成了一个新的工程

这时候的工程还是空的,我们需要向里面添加文件。有两种方法,一是添加已经存在的,还有就是新建一个。

下面先说如何添加一个已经存在的文件。 在工程目录上点击鼠标右键,在弹出的上下文菜单上选择 【Add Existing Files...】,如图 6-12 所示。

图 6-12 添加已有文件

然后找到你要添加的 helloqt.cpp 的位置,把它加入进去,这时候在工程目录里面就 多了一项你刚才添加的文件,如图 6-13 所示。

图 6-13 加入已经制作好的文件

小贴士:在 Qt Creator 中对添加已有文件采取的是“不拷贝添加”的方式,即添加完成 后,Qt4 的工程并没有把这个文件从原有的位置拷贝一份到工程目录里面,而是添加了它的 相对路径位置。这点可以通过添加文件完成后,查看 .pro 文件的内容看出来。在这一点上 Qt Creator 与 KDevelop 和 QDevelop 中有所不同,后两者都可以设置添加的方式是不拷贝 添加还是拷贝添加。

我建议还是自己先手动把文件放置在工程目录下面,然后再在 Qt Creator 中添加。一 方面便于统一管理工程文件,二来可以提高 Qt 应用程序的效率。

下面再介绍添加新文件的方法。

依次点击【File】→【New...】→【C++】→【C++ Source File】,如图 6-14 所示, 我们这里是要添加一个 C++实现文件,点击【OK】按钮,进入下一步的设置。

图 6-14 新建一个 C++实现文件

在接下来的如图 6-15 所示界面中,正确的输入文件名字,这里是 helloqt.cpp,并选 择工程的目录,然后点击 Next 按钮进入下一步。

图 6-15 输入文件名

接下来,如图 6-16 所示,选择默认设置,把文件加入到 helloqt.pro 工程中,点击Finish 按钮。

图 6-16 项目信息

这时,我们只是在工程里面加入了一个空的 C++实现文件,还需要添加内容。把 helloqt.cpp 源代码加入到如图 6-17 所示的屏幕右面的代码编辑区内。

图 6-17 新文件加入后的样子

好了,编辑文件和设置工程的工作业已结束。接下来,就要开始编译源程序了,首先 运行 qmake。依次点击主菜单的【Build】→【Run qmake】,或者通过鼠标右键的上下文菜单来实现。

那么怎样才能知道 qmake 运行成功与否呢?Qt Creator 为我们提供了一个直观的查看 方式,当你运行 qmake 或者是 Build、Run 时,在 Qt Creator 的左下角会显示一个如图 6- 18 所示的运行状态进度条显示按钮,如果编译成功,它就会显示为满格的绿色;如果运行 不成功,或中途遇到 bug,它就会显示为不满格的红色,并且会提示 bug 和 warning 的数 量。

图 6-18 运行状态显示按钮

在这个进度条按钮上点击一下,就会显示出具体的状态信息,如图 6-19 所示,这个 Output 窗口显示了命令运行的过程,最后一句 ”Exited with code 0”表示成功。

图 6-19 运行 qmake 成功

接下来编译程序,依次点击主菜单的【Build】→【Build All Ctrl+Shift+B】,或者 通过鼠标右键的上下文菜单来实现,效果如图 6-20 所示。

图 6-20 编译(build)成功

依次点击主菜单的【Build】→【Run Ctrl+R】,或者通过鼠标右键的上下文菜单来实 现,程序运行的效果与图 6-1 相同。

第 2 种方法的使用大致就是这样。不管是多么复杂的程序,使用它的流程都是与此类 似的。

6.2.5 第 3 种方法

这种方法也有两种常见的做法,一种是在单独启动的 Qt Designer 中设计程序界面, 制作完成后保存成.ui 文件(一种基于 XML 的文件格式),然后再在 IDE 中把它集成进来;

另外一种是直接在 IDE 中使用 Qt Designer,由于我们使用的 IDE 大都将 Qt Designer 的主要功能集成了进来,所以这两种做法其实区别不大,就看大家的喜好了。

下面仍以 Qt Creator 为例,使用这种方法时,一般遵循如下步骤:

  • 创建窗体并在窗体中放置各种窗口部件
  • 设置窗口部件的属性
  • 对窗体进行布局设计
  • 设置各个窗口部件的 Tab 顺序
  • 创建信号和槽
  • 连接信号和槽
  • 编写代码(如果需要的话)
  • 编译、链接、运行程序 1.建立新工程

依次点击【File】→【New...】→【Projects】→【Qt4 Gui Application】,如图 6- 14 所示,点击【OK】按钮进入下一步设置。

图 6-21 建立新工程

接下来仍旧是设置项目的名称和目录位置,正确设置即可,我们这里仍旧是 helloqt, 如图 6-22 所示,点击【Next】按钮进入下一步。

图 6-22 设置项目的名称和目录位置

接下来需要设置你的应用程序想要包含的 Qt 模块,当你选择了某个模块后,它的头文 件就会在程序中被自动包含了。如图 6-23 所示,其中 QtCore Module 和 QtGui Module 是 必需的,缺省已经选择了。我们这个程序并不需要包含其他的功能,选择缺省设置,点击【Next】按钮进入下一步。

图 6-23 选择需要的 Qt 模块

下面我们需要设置应用程序的类型,这里是通过选择你建立的类的基类来体现的,共 有 3 种选择:QMainWindow、QWidget、QDialog。也就是说,我们的应用程序的骨干类是子 类化这 3 种类其中的一种。这里我们以选择基类为 QWidget,其它选项选择缺省值,如图6-24 所示,点击【Next】按钮进入下一步。注意这里需要将 【Generate form】选项选上, 否则将不会产生.ui 文件,这就和第 2 种方法是一样的了。

图 6-24 设置应用程序的类型

接下来展示的是要建立的工程的基本信息。我们的工程由主要由 5 个文件组成: main.cpp、widget.h、widget.cpp、widget.ui 和 helloqt.pro。其中 main.cpp 是主程序 文件,其中主要包含了 main()函数,前面我们已经讲到,它是应用程序的入口; widget.ui 是程序界面文件,它是基于 xml 格式的,它描述了界面的布局信息; widget.h 和 widget.cpp 是基于 widget.ui 产生的界面实体类;helloqt.pro 是工程文件,其中包含了 工程的基本信息,它能够被 qmake 所识别。点击【Finish】按钮,就完成了工程的设置。

图 6-25 生成的工程信息

图 6-26 生成的工程概览

生成的工程如图 6-26 所示,如果想查看或修改某个文件的内容,在该文件上双击鼠标 左键即可在右面的代码浏览和编辑区内实现。

2.创建窗口部件并设置属性

用鼠标左键双击 widget.ui 文件,Qt Creator 将把 Qt Designer 打开并集成到框架 内,如图 6-27 所示,是不是很熟悉,与我们在第 5 章介绍的单独启动的 Qt Designer 并没 有什么不一样。

图 6-27 集成 Qt Designer 的 Qt Creator 设置 Widget 的 WindowTitle 属性为:Hello Qt!。在窗体上放置一个 Push Button 窗 体部件,并把它的 text 属性设置为:Hello Qt!。然后手动调整一下 Widget 和 Button 的 大小,不必太费力气,只要不是太难看就可。关于设置属性的方法在第 5 章中已经有详细的讲述,这里不再赘述。最后设置完成的界面如图 6-28 所示。

图 6-28 初步设置好的界面

3.设计布局和 Tab 顺序

由于程序的界面元素比较少,我们选择水平布局,再设置 Tab 顺序,完成后的界面如 图 6-29 所示。

图 6-29 设置布局和 Tab 顺序

4.创建并连接信号与槽

按照第 5 章介绍的方法,按下 F4 键,拖动鼠标左键,选择 pushButton 的 clicked()信 号,以及 Widget 的 close()槽,并连接它们,完成后的效果如图 6-30 所示。

图 6-30 创建并连接信号和槽

5.编译运行程序

依次执行 qmake、Build(或 Build All)、Run,程序运行后的效果如图 6-31 所示。

图 6-31 程序运行效果

估计读者朋友也看出来了,这个程序运行的效果与前面的不完全一样。这也正是我想 说明的,Qt Designer 并不是“为所欲为”的,比如这里我们就无法在其中设计出与第 1 种 手写代码完全一致的界面来,除非我们对其产生的代码再进行手动修改。

实际上,在进行工程开发时,尤其是面对复杂的大型应用程序时,程序员完全采用手 写代码的时候很少见,而完全使用 Qt Designer 设计界面的情形也不多,更多情况下往往 是将两者结合起来使用。但无论怎样,第 1 种方法都是最基本的,只有对 Qt 的基本原理很 清楚,对 qmake 的基本语法掌握的很熟练,才能够游刃有余的开发 Qt 应用程序。