
第2章 搭建Qt 5.12开发环境
2.1 搭建Windows下的Qt开发环境
当前,Windows下的Qt开发方式主要有以下两种。
(1)基于MSVC编译器
这种开发方式使用MSVC编译器,这个编译器在安装VC2017时就一同安装了。程序编辑器的选择可以根据开发者自己的喜好。一种是使用VC2017作为程序编辑器,此时需要安装用于VC2017的Qt插件,之后才能调用Qt SDK来进行软件的开发。这是一种简单的方法,我们只需要进行少量的修改甚至不做修改就可以开始软件的开发和调试,这种方式简称为VC+Qt开发方式。另外一种就是选择使用Qt Creator作为程序编辑器,这种开发方式需要另外配置调试器(需要单独安装微软CDB调试器)。CDB是微软的调试器(Debugging Tools for Windows),需要手工下载和安装,这一点比较麻烦。
(2)基于GCC编译器
这种开发方式的优点是不需要安装VC2017,采用和Linux下同样的编译器(Linux下的编译器肯定是GCC)。这种方式简称为Qt Creator+GCC+GDB方式,学过Linux的人都知道(如果没有学过,可以参考笔者的另一本书《Linux C/C++一线开发实践》),GCC和GDB分别是Linux下的编译器和调试器,它们都无法直接在Windows下使用,需要安装一个Linux环境模拟器MinGW(Minimalist GNU on Windows)。这种方式比较小众,通常是Linux狂人喜欢使用的方式。
至于选择上述哪种开发方式,视个人喜好而定。本书大部分章节使用的是VC2017中的MSVC编译器,再搭配Qt Creator程序编辑器,只有在学C++语言时使用的是GCC编译器。另外,练习安装不同开发方式的系统时选择安装在虚拟机中会更好,因为一种开发方式练习完毕,就可以把系统恢复到没有安装这种开发方式之前,再开始另外一种开发方式的安装,也就是说从“干净”的系统环境开始练习新的开发方式。
2.1.1 搭建基于MSVC编译器的开发环境
1. 安装VC2017
VC2017既可以在线安装,也可以离线安装,离线安装时要先下载几十吉字节的安装包。关于VC2017的安装可以参考笔者的另外一本书《Visual C++ 2017从入门到精通》,这里不再赘述。
如果本机不能上网,可以采用离线安装。离线版安装前先要安装.NET 4.6或以上的.NET框架,可以在百度上通过搜索关键字“.net framework 4.6.2”来找到.NET 4.6框架,如图2-1所示。

图2-1
第二个搜索结果就是离线版本.NET,从微软官网上下载安装文件,安装文件的文件名是NDP462-KB3151800-x86-x64-AllOS-ENU。直接双击安装文件进行安装,稍等片刻即可安装完成(见图2-2)。

图2-2
单击“完成”按钮,结束安装。接下来即可开始离线安装离线版的VC2017了。安装VC2017时,有两个步骤,第一步是选中“使用C++的桌面开发”,第二步是选中“对C++的Window XP支持”和“用于x86和x64的Visual C++ MFC”,然后单击“安装”按钮,如图2-3所示。
稍等片刻即可安装完成。安装完VC2017后,下一步是下载和安装Qt 5.12.2(Qt开发包)。

图2-3
2. 下载和安装控制台调试器CDB
CDB(Microsoft Console Debugger)是微软公司Windows SDK套件中的一款命令行调试工具。我们后面会在Qt Creator下调试程序,由于集成开发环境Qt Creator 4.8不自带调试器,因此需要为这个集成开发环境安装和配置调试器,否则无法进行单步调试。
Qt Creator 4.8本身不带有编译器和调试器。Windows平台有两套编译器和调试器可供Qt Creator 4.8使用:一套是MinGW系列,是Windows下最小化的Linux模拟平台,包含编译器GCC和调试器GDB(这两个工具都是Linux下的著名软件);另外一套使用MSVC编译器和CDB调试器(微软旗下的产品,MSVC编译器在安装VC2017后就有了,而CDB要另外下载安装,它是包含在Windows SDK工具套件中的一个小工具)。由于GDB调试功能不如CDB,因此本书使用Qt Creator+MSVC+CDB的组合,当然在使用Qt Creator时才采用这种组合,笔者更倾向于使用VC2017直接开发Qt程序,毕竟VC2017比Qt Creator强大得多。
建议CDB在Qt安装之前就先装好,这样可以让Qt在安装的时候能自动探测到。下面介绍CDB的下载和安装。CDB属于Windows SDK Kits中的一个小工具,因此我们可以下载Windows SDK Kits,然后进行选择安装。Windows SDK Kits的下载地址是:
https://developer.microsoft.com/en-US/windows/downloads/windows-10-sdk
在网页上找到如图2-4所示的内容。
单击链接“DOWNLOAD THE .ISO>”开始下载,下载得到的是一个iso文件,文件名是18362.1.190318-1202.19h1_release_WindowsSDK.iso。然后把这个文件加载到虚拟光驱中,双击虚拟光盘根目录下的WinSDKSetup.exe开始安装。第一个安装界面如图2-5所示。

图2-4

图2-5
使用默认选项,直接单击Next按钮。出现图2-6所示的对话框,勾选第一个复选项即可,其他不必选。

图2-6
然后单击Install按钮开始安装。稍等片刻即可安装完成。
有人可能会说,Qt Creator怎么这么麻烦?其实其他平台也是如此,都需要第三方的编译器和调试器,具体见表2-1。
表2-1 各平台的编译器和调试器

当然,如果不准备单步调试,那么不为Qt Creator 4.8配置调试器也可以进行编译和运行,但是开发大型程序没有调试器就是自寻烦恼。
3. 下载和安装Qt 5.12.2
准备工作完成了,下面可以让Qt正式登场了。在撰写本书时,Qt的最新版本是5.12.2,可以到以下两个地址下载:
· https://download.qt.io/archive/qt/
· http://download.qt-project.org/official_releases/qt/
Qt从5.7版开始支持VC2017,如果项目没有特殊要求,建议使用Qt 5系列进行开发。在VC中开发Qt程序需要安装Qt的VC插件(Qt Add-In),在VC2017之前Qt插件有单独的离线安装包,但在VC2017中Qt插件只能在线安装了,我们可以通过VC2017的主菜单(“工具→扩展和更新”)来进行安装。如果不能联网,又想用较高的VC+Qt版本进行开发,可以选择VC2013和Qt 5.8的组合,这个版本的离线Qt插件安装包还是有的。
不过,Qt的版本更新得比较快,一般的更新形式为新增一些类或停止维护一些类。如果不是为了维护用旧版本编写的程序,或者计算机配置实在较低,笔者建议选用最新版本的Qt进行程序开发。目前的最新Qt版本为5.12.2,后续章节中的示例程序都是在该版本下编译和运行的。当然,示例程序中的大部分代码也可以在Qt稍低的版本上运行。
Qt的一个最大优势是跨平台,它可以在Windows、MacOS和Linux上开发和运行,对于初学者而言,建议一开始在Windows平台上开发,因为方便得多。笔者所使用的操作系统是Windows 7,下载下来的Qt安装文件为qt-opensource-windows-x86-5.12.2.exe。
再次提醒读者,在安装Qt 5.12.2之前,确保已经安装好VC2017。直接双击qt-opensource-windows-x86-5.12.2.exe文件开始安装,显示出欢迎界面,如图2-7所示。
单击Next按钮,出现Qt Account界面,提示要输入Qt账号(可以到官网上去注册),如果没有账号,就单击Skip按钮,继续单击Next按钮,出现“安装文件夹”对话框后,设置好Qt要安装在哪个路径下,这里安装在C:\Qt\Qt5.12.2,如图2-8所示。需要注意的是,安装路径不能有空格或中文。

图2-7

图2-8
Qt 5.12.2安装时会把Qt Creator(开发Qt程序的IDE)也自动安装好,如果要让Qt开发对应的常见文件类型关联到Qt Creator(双击这些文件,即会用Qt Creator打开),那么在图2-8中就要勾选左下角的复选项。继续单击“下一步”按钮,出现“选择组件”对话框。选择要安装的组件,这里选择MSVC 2017 64-bit和Qt Creator 4.8.2 CDB Debugger,如图2-9所示。
接着单击“下一步”按钮,后面几步也是一直单击“下一步”按钮。然后开始正式安装,稍等片刻即可安装完成,如图2-10所示。

图2-9

图2-10
如果勾选Launch Qt Creator,那么该对话框关闭后会启动Qt Creator。保持默认选中状态,然后单击“完成”按钮,此时将启动Qt Creator,如图2-11所示。

图2-11
至此,Qt 5.12.2安装成功。
4. 配置Qt环境变量
在环境变量Path的末尾添加C:\Qt\Qt5.12.2\5.12.2\msVC2017_64\bin,如图2-12所示。

图2-12
前面的几步都是基础步骤,无论是用VC2017开发Qt还是用Qt Creator开发Qt都需要完成这3步曲,“安装CDB调试器”就是为Qt Creator提供调试功能。下面我们分别搭建两种集成开发环境。
5. 在VC2017中开发(VC+Qt)
首先强烈建议大家(尤其是初学者)使用VC2017来开发Qt程序。既然要在VC2017下开发Qt,那么首先就要安装好VC2017,关于VC2017的安装和使用可以参考笔者在清华大学出版社出版的《Visual C++ 2017从入门到精通》,它是学习VC++ 2017开发工具的红宝书。
6. 安装VC2017的Qt插件(离线方式)
要用VC2017开发Qt程序,除了VC2017和Qt本身外,还需要用一个桥梁架在两者之间,这就是VC2017的Qt插件。可以认为它是一个小软件,需要进行安装,分为离线安装和在线安装两种。
离线安装方式适合于不能联网的计算机上,有些企业的计算机是不能联网的,所以只能采用这种安装方式,先从其他地方下载插件包,然后复制到计算机上再进行安装。
以前利用VC开发Qt的时候,官方会针对不同的VC版本发布相应的Qt插件,这次也不例外。这里我们选择2.2.2版本的插件,虽然有更高的版本插件,但建议不要选择太高的版本,因为太高的版本对VC2017的内部版本要求比较高,如果安装的VC2017版本不是很高,则安装会出错(笔者从2.3.2插件开始安装,一路降低版本试错到2.2.2才成功,希望各位不要再走弯路)。官网下载网址为https://download.qt.io/official_releases/vsaddin/2.2.2/。
选择文件qt-vsaddin-msvc2017-2.3.2.vsix下载,下载后直接双击该文件即可开始安装,如图2-13所示。
单击“安装”按钮,稍等片刻即可安装完成,如图2-14所示。

图2-13

图2-14
单击“关闭”按钮,插件安装成功。此时我们启动VC2017,可以在主菜单上看到一个名为“Qt VS Tools”的菜单,如图2-15所示。
为何要安装高版本呢?因为低版本的VC2017(比如内部版本15.3.3)虽然可以装上Qt插件2.2.2的版本,但是如果本机联网,经常会自动升级到2.3.2版本,低版本的VC2017还不支持高版本的Qt插件,导致下次启动VC2017时提示插件加载失败。故而建议大家一开始就使用高版本的VC2017,比如从官网下载离线版的VC2017。注意,不联网的计算机不存在此问题。
7. 安装VC2017的Qt插件(在线方式)
对于很多可以联网的计算机而言,在线安装更为简单,具体步骤如下:
(1)打开VC2017,依次单击主菜单的菜单选项“工具→扩展和更新”,如图2-16所示。

图2-15

图2-16
(2)在新出现的对话框上选择“联机”选项,并搜索关键字“QT”,选择对应的版本,单击“下载”按钮,如图2-17所示。

图2-17
搜索出来的插件版本是2.3.2,这个版本在某些VC2107(内部版本比较低)上安装是不成功的。大家可以试试,如果失败,就先卸载(卸载方法见后文),然后用离线方式(前文有介绍)安装,记得先下载较低版本的插件(比如2.2.2)再安装。
后续的安装步骤与离线安装方式的步骤相同,即关闭VC2017后就会出现安装提示框,如图2-18所示。
单击“修改”按钮开始正式安装。安装完毕后,再次打开VC2017,就会发现主菜单栏上有Qt VS Tools了,如图2-19所示。

图2-18

图2-19
其实离线或在线方式都是先下载,只是在线方式是VC帮我们找出最新版本来下载,而离线方式是我们自己从官网选择合适的版本下载,下载下来之后安装和设置都一样。
8. 配置插件选项
前面我们安装好了VC的Qt插件,现在离使用还差最后一步了,就是告诉插件我们Qt安装的路径。打开VC2017,依次单击主菜单的菜单选项“Qt VS Tools→Qt Options”,在新出现的Qt Options对话框上单击Add按钮,然后在出现的Add New Qt Version对话框中选择msvc2017_64文件夹的路径(我们在前面安装Qt的时候是安装在C盘),如图2-20所示。
至此,Qt插件配置完成,重启VC。
再次建议大家安装高版本的VC2017,比如15.9.11,可以通过“关于”对话框查看版本号,笔者使用的VC2017版本如图2-21所示。

图2-20

图2-21
9. 第一个VC开发的Qt 5.12.2程序
此时重新启动VC2017应该就可以开发Qt程序了,如果启动VC2017之后还是找不到Qt插件,建议删除插件后再次安装。下面我们在VC2017中新建一个Qt项目,以测试环境是否安装正常。
【例2.1】 第一个VC开发Qt图形界面(GUI)程序
(1)启动VC2017,如果安装的是2.2.2版本的Qt插件,则依次单击主菜单的菜单选项“文件→新建→项目”,在“新建项目”对话框的左侧展开Visual C++,选中Qt,然后在右侧选择Qt GUI Application,如图2-22所示。

图2-22
如果安装的是2.3.2版本的Qt插件,则在左侧选中“测试”,然后在右侧选择Qt GUI Application,如图2-23所示。

图2-23
输入名称和位置,单击“确定”按钮,后面一路保持默认设置,都直接单击“下一步”按钮,最后单击“完成”按钮,此时会自动打开代码编辑窗口,并且在解决方案视图中可以看到为我们创建的文件,比如两个cpp文件、一个h文件、一个ui文件,如图2-24所示。
上述3种类型的文件是我们经常要打交道的:cpp和h类型的文件是用来编写代码的;ui类型的文件是用来存放Qt界面元素的,双击该文件,即可打开一个界面设计器,我们可以在其中执行拖放控件、添加菜单等可视化界面设计的操作。双击test.ui文件,会出现Qt的设计师界面,如图2-25所示。

图2-24

图2-25
学过VC或C#的人对这个界面不会陌生,就是用来拖放控件的。左边的Widget Box相当于一个控件工具箱,现在暂时不用去管它。
(2)关掉Qt设计师界面,回到VC上,准备运行程序,依次单击主菜单的菜单选项“调试→开始执行(不调试)”,或直接按Ctrl+F5快捷键,程序运行结果如图2-26所示。

图2-26
至此,我们第一个Qt程序运行成功了。
除了图形界面程序外,控制台程序也是经常会碰到的,下面我们来创建一个控制台程序。
【例2.2】 第一个VC开发的Qt控制台程序
(1)启动VC2017,按Ctrl+Shift+F5快捷键打开“新建项目”对话框。在该对话框的左侧展开Visual C++→Qt,在右侧选择Qt Console Application,然后在下方输入项目名称和路径,如图2-27所示。

图2-27
单击“确定”按钮。后面一路单击Next按钮,最后一步单击Finish按钮。此时一个main.cpp文件就创建好了,里面自动生成了几行代码:

· 注释1:这一行包含了QCoreApplication类的定义。
· 注释2:在每一个使用Qt的应用程序中都必须使用一个QCoreApplication对象。QCoreApplication管理了应用程序各种各样的资源,比如默认的字体和光标。QCoreApplication继承自QObject,而QObject就是Qt中最基本的基类,也就是Qt的根基。
· 注释3:QCoreApplication最重要的函数是exec(),这个函数会开启主事件循环并且进入阻塞状态。
现在我们在return语句前添加一行打印语句:
printf("hello world from qt,谢谢大家");
(2)保存项目,按Ctrl+F5快捷键或依次单击主菜单的菜单选项“调试→开始执行(不调试)”,运行结果如图2-28所示。

图2-28
10. 在VC2017中使用单步调试功能
前面通过两个小例子可以证明VC2017编译和运行Qt程序是正常的。下面我们来验证调试功能。
单步调试功能是软件开发(尤其是大型软件开发)必不可少的,也是专业的开发工具必须提供的功能。使用过VC工具开发Windows程序的人经常会用到单步调试,开发Qt程序也不例外。
在VC2017下单步调试Qt程序的快捷键和单步调试Windows程序是一样的,比如最常用的调试运行快捷键F5、单步(不进函数)快捷键F10和单步(进函数)快捷键F11,如果要在某行代码设置断点,则可使用快捷键F9或者使用鼠标进行设置。这里简单介绍一下单步调试功能,主要是为了验证VC2017对于Qt程序的调试器是否正常。下面我们通过一个控制台程序来验证单步调试。
【例2.3】 通过控制台程序来验证VC2017的单步调试
(1)启动VC2107,新建一个Qt控制台程序,项目名是test。
(2)我们准备定义一个全局函数test,然后在main函数中调用该函数,打开main.cpp,添加如下代码:

我们把光标定位到main函数中的“test();”那一行,然后按F9键,此时该行开头将出现一个小红圈,如图2-29所示。这就意味着,当程序进入调试模式时执行到该行语句之处将暂停。也可以直接用鼠标单击这一行语句所处的位置,小红圈就会出现。这个就是设置断点(程序运行的中断点)的过程。
下面我们按F5键开始调试程序,稍等片刻,可以发现程序运行到断点处就停住了,而且小红圈中间出现了一个箭头,如图2-30所示。

图2-29

图2-30
此时按F11键,开始单步调试,如果碰到函数,就会进入函数(小箭头到test函数的第一行处了),如图2-31所示。
这就说明单步调试正常。下面我们按F10键,可以发现程序继续单步往下运行,单步运行到puts函数的时候,在控制台输出窗口中出现了“hello world”的输出,如图2-32所示。

图2-31

图2-32
注意
快捷键F10也是用于单步调试的,但碰到函数时不会进入函数体内进行单步运行,而是把函数调用语句作为一个单步语句一次执行完,而后继续执行函数调用语句后续的程序语句,英文表示这种调试方式就是Step Over。
如果不再想单步调试,可以按F5键全速执行,直接执行到下一个断点。如果没有下一个断点,则执行到程序结束。
通过这个小例子,我们验证了VC2017单步调试Qt,调试器功能一切正常。
11. 卸载Qt 5.12.2
下面简单提一下VC2017的Qt插件的卸载。为何要学习卸载呢?这是因为安装了较高版本的Qt插件,可能会不成功,需要先卸载高版本的插件,再安装低版本的插件。卸载的方式是启动VC2017,然后依次单击主菜单的菜单选项“工具→扩展和更新”,在“扩展和更新”对话框上找到Qt插件,如图2-33所示。
单击“卸载”按钮,告诉VC2017这个插件不要了,登记一下,然后关闭对话框,再关闭VC2017。关闭VC2017的时候,卸载才真正开始,如图2-34所示。单击“修改”按钮开始卸载。卸载完毕后,再次启动VC2017,可以发现菜单栏上没有Qt VS Tools菜单选项了。
12. 在Qt Creator 4.8.2中开发(Qt Creator+MSVC+CDB)
或许某些人不喜欢用VC ,那么也可以用另外一个官方出品的Qt开发利器Qt Creator。在安装Qt 5.12.2的时候,系统已经自动帮我们安装了Qt Creator 4.8.2,如图2-35所示。

图2-33

图2-34

图2-35
依次单击选项“开始→Qt5.12.2→Qt Creator 4.8.2(Enterprise)”来启动它。打开后主界面如图2-36所示。

图2-36
下面我们用Qt Creator新建一个图形界面程序。
【例2.4】 第一个Qt Creator 4.8.2开发的Qt程序
(1)启动Qt Creator 4.8.2,依次单击主菜单的菜单选项“文件→新建文件或项目”或直接按Ctrl+N快捷键来打开New File or Project对话框,然后在左侧选择Application,在右侧选择Qt Widgets Application。Qt Widgets模块提供了一组UI元素用于创建经典的桌面风格的用户界面,Widgets是小部件的意思,本书统一称为控件,因此Qt Widgets Application称为Qt控件程序,如图2-37所示。

图2-37
然后单击Choose…按钮,在新出现的对话框上设置项目名称和路径,如图2-38所示。

图2-38
这个路径和目录必须预先创建好,否则不让进行下一步操作,这也是Qt Creator有些“弱智”的地方,居然不会自动帮我们创建目录。由此可见VC成为世界第一的IDE不无道理,细节决定成败。继续下一步,在新出现的对话框中显示出Qt开发工具包已经自动探测到了,我们不需要去选择,如图2-39所示。
因为我们在前面安装了VC2017,所以Qt Creator向导让用一个MSVC2017的编译器,注意Qt Creator本身不带编译器,所以新建项目的时候要选择一个。直接单击“下一步”按钮,在出现的对话框中显示类信息,如图2-40所示。

图2-39

图2-40
Qt程序一般是由头文件、cpp源文件和.ui界面文件组成的,前两者大家都熟悉,就是存放代码的文件,ui文件则是用于可视化界面设计的,比如拖放控件等。单击“下一步”按钮,再单击“完成”按钮,向导结束,编辑代码窗口自动出现。
(2)保存项目,准备运行,按快捷键Ctrl+R或依次单击主菜单的菜单选项“构建→运行”,运行结果如图2-41所示。

图2-41
上面的例子比较简单,我们没有做过多解释,主要目的是测试Qt5的开发功能是否工作正常。趁热打铁,下面我们来看一个稍微复杂点的例子,拖一个编辑框控件到主窗口上,并对代码做一些说明。
【例2.5】 带有编辑框的Qt程序
(1)启动Qt Creator 4.8.2,依次单击主菜单的菜单选项“文件→新建文件或项目”或直接按Ctrl+N快捷键来打开New File or Project对话框,然后在左侧选择Application,在右侧选择Qt Widgets Application,如图2-42所示。

图2-42
单击Choose按钮,进入下一步,设置项目名称和路径,如图2-43所示。

图2-43
注意,路径和目录要预先创建好。然后跟随向导进入下一步,直到在“类信息”对话框上输入类名为Notepad,并选择QMainWindow作为基准类,如图2-44所示。

图2-44
然后单击“下一步”按钮,出现汇总对话框,如图2-45所示。

图2-45
在该对话框上可以看到要添加的文件。其中,main.cpp表示本程序的主源代码文件;notepad.cpp表示类Notepad的源代码文件;notepad.h表示类Notepad的头文件;notepad.ui表示UI表单文件,用于可视化界面设计;test.pro是项目文件,存放项目配置信息。最后,单击“完成”按钮来关闭对话框。随后,向导自动帮我们创建这些文件。
(2)我们在“项目”视图双击main.cpp文件以打开该文件,编辑视图内即可看到这个文件的源码了:

· 第2行:所有Qt程序都要包含头文件QApplication。
· 第6行:创建一个QApplication对象。这个对象管理应用程序的资源,这对于运行任何使用Qt Widgets(控件)的Qt程序都是必需的,对于不使用Qt控件的GUI应用程序,可以改用QGuiApplication。
· 第7行:创建记事本对象。Notepad类是向导为我们生成的,相当于一个主窗口,包含控件元素。控件类似VC/C#编程中的控件和窗口,常见的有文本编辑、滚动条、标签和按钮等。控件也可以是其他控件的容器,例如对话框或主应用程序窗口。
· 第8行:这一行在屏幕上显示记事本主窗口。注意,我们的记事本类Notepad继承自QMainWindow,相当于一个容器,上面还可以包含其他几种类型的控件。默认情况下,控件不可见,函数show使控件可见。
· 第10行:这一行使QApplication对象进入其事件循环。当Qt应用程序运行时,会生成事件并将事件发送到应用程序的控件。常见的事件有鼠标按下和键盘按键。
(3)界面设计。向导以xml格式生成用户界面定义notepad.ui,这个文件可以在项目视图里的Forms下看到,如图2-46所示。

图2-46
当我们双击notepad.ui文件时,它会自动在集成Qt设计器中打开,如图2-47所示。左边是工具箱,其中有很多控件,可以把它们拖动到右边的表单(VC中称为对话框)上。当我们构建应用程序时,Qt Creator会启动Qt用户界面编译器(UIC),它读取.ui文件(本项目里就是notepad.ui)并创建相应的C++头文件(ui_notepad.h)。
向导创建的主窗口有自己的布局,我们可以在这个主窗口上添加菜单栏、停靠控件、工具栏和状态栏等。工具栏下方和状态栏上方之间的中心区域通常称为客户端,客户端可以被任何类型的控件占用,我们可以从工具箱里把控件拖到主窗口中。

图2-47
下面我们把控件添加到主窗口中:
双击“项目”视图中的notepad.ui文件,启动Qt界面设计器。
将文本编辑框(Text Edit)控件拖放到表单中。
在工具栏上单击垂直布局(或按快捷键Ctrl+L),如图2-48所示。

图2-48
设置垂直布局后,可以发现文本编辑框充满了整个主窗口的客户区。
按快捷键Ctrl+S来保存我们所做的设计。
notepad.ui其实是一个xml文本文件,如果对notepad.ui好奇,可以看看它的具体内容,我们在项目视图上右击notepad.ui,在弹出的快捷菜单中依次选择“用…打开→普通文本编辑器”菜单选项,此时会在右边的编辑窗口中显示出notepad.ui的内容,很明显它是xml文件,内容如下:

以下这行包含XML声明,指定文档中使用的XML版本和字符编码:
<?xml version="1.0" encoding="utf-8"?>
文件的其余部分定义了记事本控件的UI元素。用户界面文件与记事本类的头文件和源文件一起使用。
(4)理解头文件。我们在Qt Creator中打开notepad.h头文件:

因为Notepad类是本程序的主窗口,且继承自QMainWindow类,所以开头要包含头文件QMainWindow:
#include <QMainWindow>
这里要介绍一下宏Q_OBJECT,只有继承了QObject类的类,才具有信号槽的能力(信号槽在后面的章节会具体讲到,信号就是VC编程中的消息,槽就是消息处理函数)。所以,为了使用信号槽,必须继承QObject类。凡是QObject子类(不管是直接子类还是间接子类),都应该在第一行代码中写上Q_OBJECT。不管是不是使用信号槽,都应该添加这个宏。这个宏的展开将为我们的类提供信号槽机制、国际化机制以及不基于C++ RTTI的反射能力。觉得不需要使用信号槽就不需要添加这个宏是错误的,因为其他很多操作都依赖于这个宏。
下面再来看看关键字explicit,该关键字用来修饰构造函数。在Windows下编写程序的时候基本上没有碰到这个关键字,那么这个关键字是做什么用的呢?关键字explicit可以禁止“单参数构造函数”被用于自动类型转换。光看这一句似乎不太容易明白,下面举个简单的例子。

编译能够通过,执行结果为m_data=2。为什么会这样呢?原来C++通过隐式转换构造了一个临时对象Test(2),将它赋给了t(这里调用了默认的构造函数,而不是重载的“=”,因为这是在对象创建的时候)。如果给构造函数加上关键字explicit,构造函数就变成了explicit Test(int a),再次编译,编译器就会报错。这时只能显式地使用构造函数Test t=Test(2)。
(4)保存项目并运行,然后可以在编辑框中输入一些文本信息,运行结果如图2-49所示。

图2-49
13. 在Qt Creator中使用单步调试功能
前面我们安装了调试器CDB,Qt Creator 4.8.2能自动检测到。我们重新启动Qt Creator 4.8.2,依次单击主菜单的菜单选项“工具→选项”来打开选项对话框,在左边选择Kits,然后在右边“构建套件(Kit)”页面中把滚动条往下拉一些,可以看到调试器旁边已经自动检测到CDB了,如图2-50所示。

图2-50
那到底能不能进行单步调试呢?我们用一个小例子来验证一下。
【例2.6】 通过控制台程序来验证Qt Creator 4.8.2的单步调试
(1)启动Qt Creator 4.8.2,新建一个控制台项目,项目名为test。
(2)我们准备定义一个全局函数test,然后在main函数中调用该函数,打开main.cpp,添加代码如下:

我们把光标定位到main函数中的“test();”那一行,然后按F9键,此时该行开头将出现一个小红圈(设置断点),如图2-51所示。
这就意味着,当程序进入调试模式时将执行到该行处暂停。也可以直接用鼠标设置断点。
下面我们按F5键开始调试程序,稍等片刻,可以发现程序运行到断点处就停住了,而且小红圈中间出现了一个黄色小箭头,如图2-52所示。

图2-51

图2-52
此时按F11键,开始单步调试,如果碰到函数,就会进入函数体内部,可以发现小箭头到test函数内的第一行语句处,如图2-53所示。
这就说明单步调试功能正常。接下来按F10键,会发现程序继续单步往下执行,当单步执行完puts函数时,就会发现在控制台输出窗口中输出了“hello world”,如图2-54所示。

图2-53

图2-54
通过这个小例子,我们验证了Qt Creator 4.8.2单步调试功能。这个过程看似很顺利、很简单,但是只要上述步骤随便错了一个次序就会走进黑暗的胡同。
2.1.2 搭建基于GCC编译器的开发环境
选择这种开发环境就是和VC完全脱钩了,因此要准备一台没有安装VC版本的计算机。双击下载好的安装文件qt-opensource-windows-x86-5.12.2,然后单击“下一步”按钮。安装路径依旧使用默认值,如图2-55所示。
然后单击“下一步”按钮,此时将出现“选择组件”对话框。勾选“Qt 5.12.2”并展开,然后取消对前3个子选项(MSVC开头的)的勾选,如图2-56所示。

图2-55

图2-56
注意,“MiniGW 7.3.0 32-bit”和“MiniGW 7.3.0 64-bit”一定要勾选上,因为这两个组件模拟了Linux程序运行所需的系统环境,使得GCC和GDB可以在其上运行,这两个组件同时还提供了编译器GCC和调试器GDB。
随后就一直单击“下一步”按钮,直到安装完成。安装完毕后,我们来验证一下。
【例2.7】 验证测试Qt Creator+GCC+GDB开发环境
启动Qt Creator,然后新建一个Widgets项目,在选择开发工具的时候会出现两个已经安装的工具(32位和64位两个版本),如图2-57所示。
因为笔者的Windows 7是64位的,所以选择第二个64位的 MinGW。然后单击“下一步”按钮,直到完成。最后按Ctrl+R快捷键运行项目,结果如图2-58所示。

图2-57

图2-58
2.1.3 部署Qt 4.7.4开发环境
刚进入公司的人往往会被安排从事维护老项目的工作,而老项目不少是用老版本的Qt开发的,比如Qt 4.7.4。为了照顾这些老项目,我们介绍一下在Windows下的Qt 4.7.4开发环境。当然,这部分内容不会介绍很多,只是为了让大家快速上手。
1. 下载IDE和开发包
这里我们使用Qt Creator 2.4.1这个IDE来开发Qt 4的程序。总共需要下载两个软件,一个是qt-creator-win-opensource-2.4.1.exe,另外一个是基于MinGW(用于Windows的GNU开发环境)的Qt 4.7.4开发库qt-win-opensource-4.7.4-mingw.exe。这两个软件都可以从官网下载,下载地址为http://download.qt.io/archive/qt/4.7/。
2. 安装Qt Creator
软件下载下来之后,先安装qt-creator-win-opensource-2.4.1.exe,安装过程和普通Windows程序安装过程一样简单。直接双击安装文件启动安装程序,第一步如图2-59所示。
一路单击Next按钮,到了确定安装路径的时候,要注意安装路径不能有空格或中文,如图2-60所示。
稍等片刻即可安装完毕。

图2-59

图2-60
3. 安装qt-win-opensource-4.7.4-mingw.exe
接着安装qt-creator-win-opensource-2.4.1.exe,直接双击启动安装程序,第一步如图2-61所示。
一路单击Next按钮,如图2-62所示。

图2-61

图2-62
继续一路单击Next按钮,到了安装MinGW时,需要确定已经安装的MinGW路径,前面已经安装了MinGW,因此不需要重新安装。这里修改MinGW所在的路径,如图2-63所示。
单击Install按钮,稍等片刻即可安装完成,如图2-64所示。

图2-63

图2-64
单击Finish按钮,Demo例子就开始运行了,如图2-65所示。
至此,Qt 4开发环境安装成功。

图2-65
4. 为Qt Creator关联Qt
启动Qt Creator,依次单击主菜单的菜单选项“工具→选项→构建和运行→Qt版本→手动设置→添加”,而后添加C:\Qt\4.7.4\bin\中的qmake.exe文件即可,如图2-66所示。

图2-66
最后单击“确定”按钮。
5. 第一个Qt 4.7控制台程序
通常把在控制台(命令行窗口)中运行的程序称为Qt控制台应用程序,而拥有图形界面的Qt程序称为Qt quick应用程序。控制台应用程序很简单,相信大家学习C语言的时候已经用得很熟练,这里就不再赘述了。很多C语言书上开头都会有一个“Hello World”程序,它的代码通常是这样的:

下面我们也来编写一个Qt版本的“Hello World”控制台程序,作为第一个Qt 4程序。这个程序很简单,就是在命令行窗口中显示一段文本“Hello World”。
【例2.8】 第一个Qt 4控制台程序
(1)启动Qt Creator 2.4,依次单击主菜单的菜单选项“文件→新建文件或项目”,或直接按快捷键Ctrl+N,弹出“新建”对话框。在该对话框的左侧选择“其他项目”,在右侧选中“Qt4控制台应用”,如图2-67所示。

图2-67
(2)单击“选择”按钮,然后在新出现的对话框中输入项目名称和路径(即项目名称和路径。注意,Qt软件中前后翻译不一致,其实工程就是指项目),如图2-68所示。如前文所述,路径必须是已经存在的路径。

图2-68
单击“下一步”按钮,保持默认设置,如图2-69所示。

图2-69
继续单击“下一步”按钮,在新出现的项目管理对话框中保持默认设置,最后单击“完成”按钮。此时会出现代码编辑窗口,里面已经为我们写好了几行程序代码:

是不是比较熟悉?有main函数,就知道程序的入口点了。
此时程序是可以运行的(按Ctrl+R快捷键),但是没有任何输出。下面我们添加一条打印语句,代码如下:

(3)保存项目并运行(按Ctrl+R快捷键),结果如图2-70所示。
第一个Qt 4控制台程序就完成了。
在进入界面程序开发之前,先介绍一下Qt Quick。它是一种用qml语言开发的库,集成了很多绚丽的UI开发元素,能自动转化为C++语言,非常适用于开发APP和嵌入式设备等要求界面冲击感强的应用。Qt Quick利用一种类似JavaScript的qml语言进行开发,代码看上去就是JSON字符串的应用,对于C++水平不高的人来说是一项福利。
【例2.9】 第一个Qt 4界面程序
新建一个Qt Quick程序,一路保持默认设置,运行结果如图2-71所示。

图2-70

图2-71