专门给小公司做网站如何在手机上建立自己的网站

1. Qt 背景介绍

1.1 什么是 Qt

（1）Qt 是⼀个 跨平台的 C++ 图形用户界面应用程序框架 。它为应用程序开发者提供了建立艺术级图形界面所需的所有功能。它是完全面向对象的，很容易扩展。Qt 为开发者提供了⼀种基于组件的开发模式，开发者可以通过简单的拖拽和组合来实现复杂的应用程序，同时也可以使用 C++ 语言进行高级开发.

（2）图形用户界面 ：指采用图形方式显示的计算机操作用户界面，是计算机与其使用者之间的对话接口，是计算机系统的重要组成部分。如下分别是：Android 首机图形用户界面 和 IOS 手机图形用户界面。

1.2 Qt 的发展史

1. 1991 年 Qt 最早由奇趣科技开发；
2. 1996 年 进如商业领域，它也是目前流行的 Linux 桌面环境 KDE 的基础；
3. 2008 年 奇趣科技被诺基亚公司收购，Qt 称为诺基亚旗下的编程语言；
4. 2012 年 Qt 又被 Digia 公司收购；
5. 2014 年 4 月跨平台的集成开发环境 Qt Creator3.1.0 发布，同年 5 月 20 日发布了 Qt 5.3 正式版，至此 Qt 实现了对 IOS、Android、Embedded 等各平台的全面支持。

1.3 Qt 支持的平台

• Windows ‒ XP、Vista、Win7、Win8、Win2008、Win10 。
• Unix/X11 ‒ Linux、Sun Solaris、HP-UX、Compaq Tru64 UNIX、IBM AIX、SGI IRIX、FreeBSD、BSD/OS、和其他很多 X11 平台 。
• Macintosh ‒ Mac OS X 。
• Embedded ‒ 有帧缓冲⽀持的嵌⼊式 Linux 平台，Windows CE 。
• Android 。

1.4 Qt 版本

（1）目前最新的版本是 Qt 6版本虽然发布了，但是相对来说 Qt 6 和 Qt 5 之间的核心功能区别不大。并且企业中也仍然有大量的项目在使用 Qt 5。所以我们目前主要使用Qt 5版本。

（2）另外 Qt 在发布的时候还提供了两种许可证。

• 商业许可：开发者以商业目的使用Qt框架进行开发和发布软件的许可，开发者需要购买商业许可并按照相关规定使用Qt框架。商业许可提供了更多的功能和服务，适合于商业软件开发。
• 开源许可：开发者以非商业目的使用Qt框架进行开发和发布软件的许可，开发者可以免费使用Qt框架，但需要遵守开源许可协议的要求，如在软件中包含Qt许可协议的声明等。

1.5 Qt 的优点

• 跨平台，几乎支持所有的平台；
• 接口简单，容易上手，学习 QT 框架对学习其他框架有参考意义。
• 一定程度上简化了内存回收机制；
• 开发效率高，能够快速的构建应用程序。
• 有很好的社区氛围，市场份额在缓慢上升。
• 可以进行嵌入式开发。

1.6 Qt 的应用场景

（1）桌面应用程序：

• Qt 能够创建各种类型的桌面应用程序，包括文件管理器、媒体播放器、绘图程序等。Qt 应用程序支持多种操作系统，可以运行在 Windows、Linux、macOS 等桌面操作系统上。

（2）移动应用程序：

• Qt 支持 Android 和 IOS 移动操作系统，为应用程序提供了强大的跨平台能力。可以使用 Qt 构建各种移动应用程序，例如社交应用、游戏、娱乐等。

（3）嵌入式系统：

• Qt 在嵌入式领域应用非常广泛，它可以构建面向各种设备的图形应用程序，在机顶盒、车载娱乐系统、安防监控设备等领域具有广泛的应用。

1.7 Qt 的成功案例

（1）Linux 桌面环境 KDE ：

（2）WPS Office 办公软件：

（3）Skype 网络电话：

• Skype是⼀款即时通讯软件，其具备 IM 所需的功能，比如视频聊天、多人语音会议、多人聊天、传送文件、文字聊天等功能。它可以高清晰与其他用户语音对话，也可以拨打国内国际电话，无论固定电话、手机均可直接拨打，并且可以实现呼叫转移、短信发送等功能。

（4）Google Earth 谷歌地图：

（5）VLC 多媒体播放器：

（6）VirtualBox 虚拟机软件（VirtualBox号称是最强的免费虚拟机软件）：

1.8 Qt 的发展前景及就业分析

（1）Qt 是一个强大且广泛应用于跨平台软件开发的框架。它提供了丰富的工具和库，可用于开发高质量、高效率的图形用户界面（GUI）应用程序，并且可以在 Windows、Linux、macOS 等多种操作系统上运行。随着行业的发展，Qt 的重要性也逐渐体现出来。下面从行业发展方向、就业方面的发展前景以及就业薪资分析 Qt 的发展前景。

（2）行业发展方向：

• 物联网（IoT）和嵌入式系统的发展：在当下的嵌入式和物联网行业中，Qt 的作用逐渐得到了体现，因为它可以用来开发具有 GUI 界面的嵌入式应用程序，这对于智能家居、汽车以及医疗设备等领域来说，具有非常重要的作用。
• 自动驾驶和智能交通领域：现在很多的汽车都引入了自动驾驶的技术，而 Qt 在其中也有着广泛的应用，它可以开发车载嵌入式系统和用户界面程序。随着未来自动驾驶技术的发展，Qt 在这方面的需求也会不断地增多。
• 游戏开发：Qt 有一些非常重要的功能模块，例如 Qt 3D Studio，可以应用于游戏开发。未来游戏行业的持续发展，Qt 在游戏行业的应用将会越来越多。

（3）就业方面的发展前景：

• 广泛的就业机会：Qt 在各个行业的应用逐渐广泛起来，对于掌握 Qt 开发能力的人员需求也在不断增加。因此在就业方面，相对于其他行业来说，Qt 就业面更广，选择性更多。
• 高薪水和职业发展机会：Qt 作为一项专业技能，掌握此项技术的开发者获得的薪资报酬也是非常可观的，同时具有更多的职业发展机会。

（3）就业薪资：

2. 搭建 Qt 开发环境

（1）Qt 支持多种开发工具，其中比较常用的开发工具有：Qt Creator、Visual Studio、Eclipse.

2.1 Qt 的开发工具概述

（1）Qt Creator：

• Qt Creator 是一个轻量级的跨平台集成开发环境（IDE），专为使用 Qt 框架进行应用程序开发而设计。
• 它是一个功能强大、易于使用、快速且高效的工具，被广泛用于编写各种类型的应用程序，如桌面应用程序、移动应用程序和嵌入式系统等。
• Qt Creator 提供了一个可视化的界面设计器和代码编辑器，可以帮助开发者更快捷地创建复杂的用户界面和处理各种事件。
• 它还包含了调试工具、版本控制工具、自动完成和智能提示等功能，以及支持多语言和跨平台的开发环境。

（2）Qt Creator 的主要特点包括：

• 紧密集成的 Qt 框架：Qt Creator 专门为 Qt 开发而设计，因此它与 Qt 框架集成得非常紧密，使开发者可以更容易地管理和部署他们的应用程序。
• 强大的编辑器：Qt Creator 具有一些先进的编辑器功能，如语法高亮、代码折叠、智能提示、自动完成和代码重构。
• 集成的调试器：Qt Creator 内置了调试器，允许开发人员在代码中设置断点以及检查变量、堆栈和调用树等信息。
• 高效的构建系统：Qt Creator 提供了一个高效的构建系统，可以自动构建和部署应用程序，同时支持使用不同的编译器和平台。
• 可视化界面设计器：Qt Creator 具有一个可视化界面设计器，它允许开发人员在没有编写代码的情况下创建复杂的用户界面。
• 多语言支持：Qt Creator 支持多种编程语言，包括 C++、QML、JavaScript 等。

（3）总而言之，Qt Creator 是一个功能齐全、易于使用且高效的跨平台 IDE，适用于各种类型的应用程序开发，特别是那些使用 Qt 框架的开发者。我们后续都是使用Qt Creator来讲解。

（4）Visual Studio：

• Visual Studio 是由微软公司开发的集成开发环境（IDE）。它可以用来开发多种类型的应用程序，包括 Windows 桌面应用程序、Web 应用程序、移动应用程序、游戏等。Visual Studio 提供了丰富的开发工具和功能，包括代码编辑器、调试器、自动完成、代码重构、版本控制等等。它支持多种编程语言，如：C++、C#、Visual Basic、F#、Python 等。Visual Studio 还可以与其他开发工具和服务集成，如 Azure 云服务、GitHub、Jenkins 等。

（5）Visual Studio 具有以下一些主要特点：

• 多语言支持：Visual Studio 支持多种编程语言，包括 C++、C#、Visual Basic、F#、Python、JavaScript 等；
• 丰富的工具集：VS 提供了各种开发工具，包括代码编辑器、调试器、代码分析工具等，以提高开发人员的效率；
• 可视化设计：VS 提供了可视化的设计工具，如窗体设计器、WPF 设计器等，使开发人员可以直观地设计用户界面；
• 跨平台开发：VS 支持跨平台开发，可以开发适用于 Windows、Linux 和 macOS 等多个平台的应用程序；
• 集成的调试器：VS 集成了强大的调试器，可以进行代码的单步调试、断点调试等操作来帮助开发人员查找和修复错误；
• 丰富的扩展性：VS 可以通过安装扩展来扩展其功能，开发人员可以根据自己的需求选择并安装适合的扩展。

（6）Eclipse：

• Eclipse 是著名的跨平台的自由集成开发环境（IDE）。最初主要用来 Java 语言开发，但是目前亦有人通过插件使其作为其他计算机语言比如 C++ 和 Python 的开发工具。Eclipse 的本身只是一个框架平台，但是众多插件的支持使得 Eclipse 拥有其他功能相对固定的 IDE 软件很难具有的灵活性。许多软件开发商以 Eclipse 为框架开发自己的 IDE。Qt 框架可以与 Eclipse 集成，使开发者可以使用 Eclipse 的强大功能来开发 Qt 应用程序。

2.2 Qt SDK 的下载和安装

2.2.1 Qt SDK 的下载

（1）Qt 下载官网：http://download.qt.io/archive/qt/

（2）国内清华源: https://mirrors.tuna.tsinghua.edu.cn/qt/archive/qt/。进入官网，按如下图示进行相应的系统版本下载即可。

1. 打开官网链接，进入如下图示界面；

2. 选择需要下载的版本；（我们以5.14版本为例，所选具体版本为：5.14.2）

3. 选择需要下载的版本；

4. 选择Windows桌面应用程序；

2.2.2 Qt SDK 的安装

（1）找到下载的文件并双击；注意：在双击之前先断网，否则需要我们注册 Qt 账号登录后才能进入下一步安装；

（2）双击之后进入如下界面：

（3）选择安装路径时不能出现中文路径，否则即使安装上也无法使用；

（4）选择安装组件；这里我们安装的是 Qt Creator。如果电脑磁盘空间允许，建议全选以便后续使用，如果空间不允许，请看第5步；

（5）选择部分组件；说明：其他未安装的组件在使用时可以另行添加；

（6）同意安装协议；

（7）下⼀步；

（8）点击 “安装” 进入安装界面；

（9）安装界面如下：

（10）点击 “完成” 按钮完成安装；

2.3 验证 Qt SDK 安装是否成功

（1）双击打开 Qt Creator 工具，并进入到 “欢迎模式” 下的 “示例” 界面；

（2）在 “示例” 中任选其中一个，单击打开该示例。在单击之后会弹出⼀个窗口，关闭即可；

（3）如果能构建并运行，说明安装无误。运行结果如下图：

2.4 Qt 环境变量配置

（1）找到Qt的安装路径，复制 “bin” 路径；

（2）“此电脑” ------> 鼠标右键， “属性” ------> “高级系统设置” ------> “环境变量”

（3）“新建” ------> 填⼊ “bin” 路径 ------> “确定” ;

注意：在关掉所有窗口时，⼀定要点击 “确定” ，否则上述配置无效。

（4）为什么要设置环境变量？？

• 环境变量是在操作系统中⼀个具有特定名字的对象，它包含了⼀个或者多个应用程序将要使用到的信息。
• 例如Windows 和 DOS 操作系统中的 path 环境变量，当要求系统运行⼀个程序而没有告诉它程序所在的完整路径时，系统除了在当前目录下面寻找此程序外，还会到 path 中指定的路径去找。
• 在 Windows 上设置 Qt 的环境变量是为了能够在命令行或其他应用程序中直接访问 Qt 相关的命令和工具。

3. 认识 Qt Creator

3.1 Qt Creator 概览

（1）从 开始菜单 或者 快捷方式 打开 Qt Creator 集成开发环境，启动之后看到类似下面的界面：

• ①：菜单栏。菜单栏⼀共有 8 个菜单选项，包含了常用的功能菜单：

选项	功能
文件	包含了新建、打开、关闭项目和文件、打印和退出等基本功能
编辑	包含了撤销、剪切、复制、查找和选择编码等功能
构建	包含构建和运行项目等相关功能。
调试	包含调试运行项目等相关功能。
Analyze	包含 QML 分析器、Valgrind 内存和功能分析器等相关功能。
工具	提供了快速定位菜单、外部工具菜单等。这里的选项菜单中包含了 Qt Creator 各个方面的设置选项：环境设置、文本编辑器设置、帮助设置、构建和运行设置、调试器设置和版本控制设置等。
控件	包含了设置窗口布局的⼀些菜单，如全屏显示和隐藏边栏功能等。
帮助	包含 Qt 帮助、Qt Creator 版本信息、报告bug和插件管理等菜单。

• ②：模式选择；

模式	功能
欢迎模式	主要提供了一些功能的快捷入口，如打开帮助教程、打开示例程序、打开项目、新建项目、快速打开以前的项目和会话、联网查看 Qt 官方论坛和博客等。示例页面显示了 Qt 自带的大量示例程序，并提供了搜索栏从而实现快速查找；教程页面提供了一些视频教程资源，但内容为英文。
编辑模式	主要用来查看和编辑程序代码，管理项目文件。Qt Creator 中的编辑器具有关键字特殊颜色显示、代码自动补全、声明定义间快捷切换、函数原型提示、F1 键快速打开相关帮助和全项目中进行查找等功能。也可以在 “工具 -> 选项” 菜单中对编辑器进行设置。
设计模式	整合了 Qt Designer 的功能。可以设计图形界面，进行部件属性设置、信号和槽设置、布局设置等操作。
调试模式	支持设置断点、单步调试和远程调试等功能，包含局部变量和监视器、断点、线程以及快照等查看窗口。
项目模式	包含对特定项目的构建设置、运行设置、编辑器设置、代码风格设置和依赖关系等页面。构建设置中可以对项目的版本、使用的 Qt 版本和编译步骤进行设置；编辑器设置中可以设置文件的默认编码；在代码风格设置中可以设置自己的代码风格。
帮助模式	在帮助模式中将 Qt 助手整合了进来，包含目录、索引、查找和书签等几个导航模式，可以在帮助中查看 Qt 和 Qt Creator 的各方面信息。

• ③：构建套件选择器。构建套件选择器包含了目标选择器（Target selector）、运行按钮（Run）、调试按钮（Debug）和构建按钮（Building）四个图标。

构建套件选择器	功能
目标选择器	目标选择器用来选择要构建哪个项目、使用哪个 Qt 库、这对于多个 Qt 库的项目很有用。还可以选择编译项目的 debug 版本或是 release 版本。
运行按钮	运行按钮可以实现项目的构建和运行；
调试按钮	运行按钮可以实现项目的调试；
构建按钮	构建按钮完成项目的构建。

• ④：欢迎模式下的窗口工作方式。

工作方式	功能
Project	用来新建工程、打开工程
示例	Qt 官方的⼀些示例
教程	Qt 官方教程

• ⑤：定位器。使用定位器来快速定位项目、文件、类、方法、帮助文档以及文件系统。可以使用过滤器来更加准确地定位要查找的结果。
• ⑥：输出窗格。输出窗格包含了问题、搜索结果（Search Results）、应用程序输出、编译输出、Debugger Console、概要信息、测试结果（Test Results）7个选项，它们分别对应一个输出窗口，响应的快捷键依次是 Alt+数字1~7。

输出窗口	功能
问题	问题窗口显示程序编译时的错误和警告信息；
Search Results	搜索结果窗口显示执行了搜索操作后的结果信息；
应⽤程序输出	应用程序窗口显示应用程序运行过程中输出的所有信息；
编译输出	编译输出窗口显示程序编译过程输出的相关信息；

• ⑦：会话记录；可以对会话进行管理，包括 Clone。如果没打开工程，则显示的是最后⼀次打开的（会话）工程，否则，显示当前的会话（工程）。
• ⑧：新建项目；
• ⑨：打开已有项目；

3.2 使用 Qt Creator 新建项目

3.2.1 新建项目

（1）打开 Qt Creator ，在菜单栏中选中： “文件” --------> “新建文件或项目” ；或者使用快捷键：Ctrl + n；或者直接点击：“new”；

（2）在欢迎模式下，直接点击 New，如下图示：

3.2.2 选择项目模板

（1）弹出如下对话框：

（2）新建项目对话框里有五类项目模板：

项目模板	说明
Application	Qt 应用程序，包括普通窗体程序和 QtQuick 程序。
Library	可以创建动态库、静态库以及 Qt Quick 扩展插件、QtCreator 自身插件。
其他项目	可以创建单元测试项目、Qt4 设计师自定义控件、子目录项目等。
Non-Qt-Project	非 Qt 项目。可以创建纯 C 或纯 C++ 项目。
Import Project	导入项目。从版本控制系统管理的软件项目导入旧的项目。

（3）常用的只有第一类 Application，选择它，在右侧会看到 Qt 应用程序的五个子模板：

• Qt Widgets Application：普通窗体模板，传统基于部件的窗体界面程序。
• Qt Console Application：Qt 控制台应用程序。因为 Qt 主要用于图形界面设计，这个控制台项目模板基本不用。
• Qt for Python：在 Python 下用 LGPL 的许可来开发闭源 Qt 软件。
• Qt Quick Application：Qt 提供的一种高级用户界面技术，使用它可以方便快速地为移动以及嵌入式设备开发流畅美观的用户界面。Qt Quick 模块是开发 QML 应用的标准库，提供了使用 QML 创建用户界面所需的一切，包括可视化、交互、动画、模型、视图、粒子效果以及着色效果等。
• 选择不同的项目模板，Qt Creator 就会在后续项目创建好了之后生成不同的基础代码。

3.2.3 选择项目路径

（1）给Qt项目命名及选择保存项目的路径；

3.2.4 选择构建系统

（1）选择 Qt 项目的构建系统，使用默认的 “qmake” 即可。

（2）Qt 中的构建工具有三种可供选择，分别是：qmake、CMake、Qbs，下面依次介绍。

• qmake：qmake 是一个构建工具（build tool），用于自动生成 makefile 文件。qmake 支持跨平台构建。qmake 编辑的是一个后缀名为 .pro 的文件。
• CMake：CMake 是一个跨平台的构建工具。CMake 本身不是一个编译器，其实就是生成一个让编译器能读懂编译流程的文件工具。让 CMake 自动生成构建系统，例如 Makefile 和 Visual Studio 项目文件。CMake 是一个第三方工具，有自己的文档。
• Qbs：Qbs（Qt Build Suite：Qt 构建套件）同 qmake、CMake 一样都是构建工具。Qbs 号称是新一代的构建工具，比 qmake 编译速度更快。Qbs 没有绑定 Qt 版本，它从项目文件的高级项目描述中生成一个正确的依赖表。而传统的 MakeFile 生成工具如 qmake 和 CMake，其在生成 MakeFile 文件后将实际的命令交给 Make 工具去执行。
• Qt 官方声明，因市场原因，弃用 Qbs。对于 Qt 用户来说，qmake 是当前使用最广泛的构建工具，CMake 其次。

3.2.5 填写类信息设置界面

（1）选择如下：

（2）对于基类的选择，目前有三种基类：

基类	说明
QMainWindow	主窗口类，一般用于较为复杂的应用程序，除了中央客户区界面，还包括菜单栏、工具栏、状态栏以及多个可停靠的工具对话框等
QWidget	最简单、最基本的窗体程序，里面可以放置多个控件实现程序功能
QDialog	基于对话框的程序，对话框一般用于弹窗，也可以用于主界面显示。对话框是从QWidget继承而来的，并丰富了⼀些功能，如模态显示和返回值等

（3）上述三个类之间的关系如下图：

3.2.6 选择语言和翻译文件

（1）点击 “下⼀步” 进入如下界面： 此处选择的语言是 “汉语”，“英语” 这样的语言. 而不是 “编程语言”。

由于我们暂时不考虑国际化问题，直接下一步即可。

3.2.7 选择 Qt 套件

（1）默认只有第⼀个 “Desktop Qt 5.14.2 MinGW 64-bit”，如果安装配置了多个 Qt 套件，就可以都选上。

• Qt 套件是指 Qt 程序从编译链接到运行环境的全部⼯具和 Qt 类库的集合，对于 MinGW 版本 Qt 程序生成和调试，至少需要 MinGW 中的编译器 g++（自动调用链接器）、g++ 配套的基础库、调试器 gdb 还有使用 MinGW 环境编译而成的 Qt 类库自身。默认情况下，在上面 Kit Selection 里选中全部套件。

3.2.8 选择版本控制系统

（1）点击 “下⼀步” 进入 项目管理界面；在项目管理界面可以设置作为子项目，以及加入版本控制系统管理。这两个功能暂时用不到，都用默认的 < None > ，然后点击 “完成” 。

• 如果想把代码提交到码云或者 github, 可以在此处选择 git 作为版本控制系统

3.2.9 最终效果

（1）通过上述 8 个步骤, 完成了项目的创建。项目创建完成之后，Qt Creator 会直接进入代码编辑模式，可以看到类似下图界面：

3.3 认识 Qt Creator 界面

3.3.1 左边栏

（1）左边栏如下：

• 在编辑模式下，左边竖排的两个窗口叫做 “边栏” 。① 是项目文件管理窗口，② 是打开文件列表窗口。在 QtCreator 菜单 “控件” -------> “Show Left Sidebar”，或者使用快捷键：“Alt + 0” 可以控制边栏的显示和隐藏。
• 边栏里的窗口数目可以增加，边栏子窗口标题栏有⼀排小按钮，最右边的是关闭按钮，倒数第二个是增加分栏按钮，可以添加多个边栏子窗口。

• 边栏子窗口标题栏第⼀个控件是组合框，可以选择该子窗口的功能视图类型，目前可以选择 8 个视图类型：

视图类型	说明
项目	即项目文件管理视图，可以选择项目里的文件进行编辑，包括 .pro 文件也可以手动编辑。
打开文档	当前已经打开的文件列表，文件名右边如果有 * 号，表示该文件被修改了但尚未保存。
书签	右击代码编辑器行号位置，选择 “切换书签”，可以给代码行添加书签，方便跳转到该位置。
文件系统	相当于系统里的文件资源管理器，可以查看项目文件夹在磁盘里的实际文件列表。
类视图	可以查看项目里包含的类及相应源代码文件里的成员函数、成员变量。
Git Branches	查看当前分支。
大纲	编辑器所显示的当前文件的大纲列表，如名字空间、类名、成员函数、成员变量等。
Tests 测试	测试相关功能。
类型层次	当前项目包含的类及其基类、派生类列表。
Include Hierarchy	包含视图，显示项目里的 .h、.cpp 以及 Qt 类库头文件之间的包含关系。

3.3.2 代码编辑区

（1）代码区如下：

（2）Qt Creator 编辑器界面功能说明：

• ① 和 ②：导航按钮 “返回” 和 “前进”，与网页浏览器的前进和后退按钮类似，可以在之前浏览的多个代码文件或一个代码文件里多个位置之间快速切换。
• ③：标识当前显示的文件是只读还是可写（一般为可写）。
• ④：文件类型图标，显示当前文件的类型。此控件是一个菜单按钮，点击可弹出丰富的文件处理功能菜单。
• ⑤：打开的文件名，可在多个打开的文件之间切换，与边栏的 “打开文档” 视图对应。
• ⑥：关闭当前显示的文档。
• ⑦：为当前显示的文件添加额外的 C++ 预处理指令（一般用不到）。
• ⑧：选择符号，可在当前显示的文件中快速切换函数、类、成员变量等，与边栏的 “大纲” 视图对应。
• ⑨：编辑区光标的行号和列号。
• ⑩：代码编辑区分栏，可增加多个编辑器窗口，显示多个打开的文档或较大源码文件的多个位置。

（3）行首区：

• 显示代码行号、调试断点标志和代码书签标志。
• 右击行首区可弹出右键菜单，支持切换书签、编辑书签、设置或取消断点。
• 同一行可同时设置断点和书签（二者互不冲突）。单击行号前的浅灰色空白区可直接设置断点（再次单击取消断点），或使用快捷键 F9。
• 书签可通过右键菜单或快捷键 Ctrl+M 设置或取消。

（4）编辑区：编写代码的核心区域。

3.3.3 UI设计界面

（1）双击 widget.ui 文件，Qt Creator 会子动进入设计模式，可以对图形界面进行可视化编辑：

（2）Qt Creator 设计模式界面组件说明：

• ①：组件选择窗口。组件选择窗口分为多个组，如 Layouts、Buttons、Display Widgets 等，界面设计的常见组件都可以在组件选择窗口中找到。

• ②：UI 设计窗口。如果要将某个组件放置到该窗口上，从组件选择窗口中拖放一个组件到窗体上即可。

• ③：动作编辑窗口。动作编辑窗口包括 Action Editor 以及 Signals 和 Slots 编辑器。

  • Action Editor 主要用于新建 Action，并通过拖拽动作将新建的 Action 添加到菜单栏和工具栏上；
  • Signals 和 Slots 编辑器 用于可视化地进行信号与槽的关联。

• ④：对象浏览窗口。用树状视图显示窗体上各组件之间的布局包含关系，视图有两列，分别显示每个组件的对象名称（ObjectName）和类名称。

• ⑤：属性设置窗口。显示某个选中的组件或窗体的各种属性及其取值，可以在属性设置窗口中修改这些属性的值。

3.3.4 构建区

（1）左下角一共有四个按钮，下面分别介绍一下：

• 第一个按钮是选择构建项目使用的 Qt 套件和构建目标程序的类型（Debug 或 Release）。 对于第⼀个按钮，默认的是Debug，构建的是 Debug 类型的目标程序。如果需要构建 Release 版目标程序，点开左下角第⼀个按钮：

• 这里有三种构建模式：

模式	说明
Debug	以 “-g” 模式编译，带着符号信息，优点是便于调试
Profile	profile 则是在 “Debug” 和 “Release” 之间取⼀个平衡，兼顾性能和调试，可以类似的看做是性能更优又方便调试的版本。
Release	“Release” 是经过优化之后，性能比 “Debug” 更上⼀个档次

• 上图是针对项目只用到单⼀ Qt 套件的，如果之前配置了多个 Qt 套件，看到的类似下图：

（2）如果项目配置了多个可用的 Qt 套件，点开左下角第⼀个按钮后，会看到各个套件以及构建类型，如果要切换 Qt 套件或构建类型，直接选中相应条目，然后点击运行按钮就行了。如果构建和运行时没出错，就会显示出构建好的目标程序界面。

• 第⼆个是运行按钮，快捷键是 Ctrl+R，如果还没构建项目或刚修改了代码，直接点击运行的话，QtCreator 会自动构建生成新的目标程序并运行。
• 第三个是调试按钮，快捷键是 F5。调试程序之前，QtCreator 会自动构建生成最新的目标程序，并进入调试模式。
• 第四个是构建按钮，快捷键是 Ctrl+B，只构建最新的目标程序，但不运行。

4. Qt Hello World 程序

4.1 使用 “按钮” 实现

4.1.1 纯代码方式实现

（1）代码如下：

（2）实现效果如下图：

4.1.2 可视化操作实现

（1）双击：" widget.ui " 文件；

（2）拖拽控件至 ui 界⾯窗口并修改内容；

（3）构建并运行，效果如下所示：

4.2 使用 “标签” 实现

4.2.1 纯代码方式实现

（1）代码如下：

（2）实现效果：

4.2.2 可视化操作实现

（1）双击：" widget.ui " 文件；

（2）拖拽 “标签” 至 UI 设计界面中，并双击修改标签内容；

（3）实现效果如下图所示：

5. 项目文件解析

5.1 .pro 文件解析

（1）工程新建好之后，在工程目录列表中有⼀个后缀为 “.pro” 的文件， “.pro” 文件就是工程文件 (project) ，它是 qmake 自动生成的用于生产 makefile 的配置文件。如图所示：

（2）双击进入该文件，该文件的核心内容如下：

QT  += core gui          // Qt 包含的模块 
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets      //⼤于 Qt4 版本才包含 widget 模块 
TARGET = QtFirst             //应⽤程序名⽣成的 .exe 程序名称 
TEMPLATE = app             //模板类型，应⽤程序模板 
SOURCES += main.cpp\        //源⽂件 
widget.cpp                          //源⽂件 
HEADERS += widget.h      //头⽂件 

（3）“.pro” 文件的写法如下：

1. 注释：从 “#” 开始，到这一行结束。
2. QT += core gui // Qt 包含的模块 Qt5 包含的模块如下图所：

3. greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

   • 这条语句的含义是：如果 QT_MAJOR_VERSION 大于 4（即当前使用的 Qt5 及更高版本），需要增加 widgets 模块。如果项目仅需支持 Qt5，也可以直接添加 QT += widgets。不过为了保持代码兼容性，最好按照 QtCreator 生成的语句编写。

4. 指定生成的应用程序名：TARGET = QtDemo

5. TEMPLATE = app。 模板。告诉 qmake 为这个应用程序生成哪种 makefile。以下是可供选择的模板：

   • app：建立一个应用程序的 makefile（默认值，若未指定模板则使用此选项）。
   • lib：建立一个库的 makefile。
   • vcapp：建立一个应用程序的 VisualStudio 项目文件。
   • vclib：建立一个库的 VisualStudio 项目文件。
   • subdirs：特殊模板，可创建能够进入特定目录并为该目录调用 make 的 makefile。

6. 工程中包含的源文件：SOURCES += main.cpp widget.cpp

7. 工程中包含的头文件：HEADERS += widget.h

8. 工程中包含的资源文件：RESOURCES += painter.qrc

9. 工程中包含的 “ui” 设计文件：FORMS += widget.ui

10. 配置信息：

    • CONFIG += c++11 // 使用 C++11 特性
    • CONFIG 用于告诉 qmake 应用程序的配置信息。

5.2 widget.h 文件解析

（1）在Qt中，如果要使用信号与槽（signal 和 slot）的机制 就必须加入Q_OBJECT 宏；

• Ui::Widget *ui; 这个指针是用前面声明的 namespace Ui 里的 Widget 类定义的，所以指针 ui 是指向可视化设计的界面，后面要访问界面上的组件，都需要通过这个指针 ui 去访问。

5.3 main.cpp 文件解析

（1）使用 Qt Creator 新建任意工程之后，main.cpp 文件中都会自动生成如下代码：

（2）解释：

1. Qt 系统提供的标准类名与头文件：声明头文件没有 .h 后缀。

2. 每个 Qt 类对应一个头文件，类名即为头文件名。

3. QApplication 应用程序类：

   • QApplication a; // a 为应用程序对象，有且仅有一个。
     • QApplication 管理图形用户界面应用程序的控制流和主要设置。
     • QApplication 是 Qt 后台管理的核心，包含主事件循环，负责处理和调度来自窗口系统及其他资源的所有事件。它还处理应用程序的初始化与结束，并提供对话管理。
     • 任何使用 Qt 的图形用户界面应用程序，无论当前是否有窗口（0、1、2 或更多），都必须且只能有一个 QApplication 对象。

4. myWidget w; // 实例化窗口对象

5. w.show(); // 调用 show 函数显示窗口

6. a.exec(); // 程序进入消息循环，等待用户输入响应

   • exec() 将程序控制权交给 Qt，由 Qt 处理事件。
   • 当应用程序退出时，exec() 返回一个值。
   • 在 exec() 中，Qt 接收并处理用户和系统事件，并将其传递给适当的窗口部件。

5.4 widget.cpp 文件解析

（1）widget.cpp 文件是类 Widget 的实现代码，所有在窗体上要实现的功能添加在此文件中；

5.5 widget.ui 文件解析

（1）widget.ui 是窗体界面定义文件，是⼀个 XML 文件，定义了窗口上的所有组件的属性设置、布局，及其信号与槽函数的关联等。用 UI 设计器可视化设计的界面都由 Qt 自动解析，并以 XML 文件的形式保存下来。在设计界面时，只需在 UI 设计器里进行可视化设计即可，而不用管 widget.ui 文件是怎么生成的。

6. Qt 编程注意事项

6.1 Qt 中的命名规范

• 类名：首字母大写，单词和单词之间首字母大写；
• 函数名及变量名：首字母小写，单词和单词之间首字母大写；
• Qt 偏好驼峰命名法。这⼀点不像之前偏好蛇形命名。

6.2 Qt Creator 中的快捷键

• 注释：ctrl + /
• 运行：ctrl + R
• 编译：ctrl + B
• 字体缩放：ctrl + 鼠标滑轮
• 查找：ctrl + F
• 整行移动：ctrl + shift + ⬆/⬇
• 帮助文档：F1
• 自动对齐：ctrl + i；
• 同名之间的 .h 和 .cpp 的切换：F4
• 生成函数声明的对应定义: alt + enter

6.3 使用帮助文档

（1）打开帮助文档有三种方式。实际编程中使用哪种都可以。

1. 光标放到要查询的类名/方法名上，直接按 F1
2. Qt Creator 左侧边栏中直接用鼠标单击 “帮助” 按钮：

• 点击 “帮助” 之后，出现如下图示界面：

3. 找到 Qt Creator 的安装路径，在 “bin” 文件夹下找到 assistant.exe，双击打开；

（2）使用示例：

1. 新建项目，在新建的项目中使用 Qt 中的 “QpushButton” 控件。
2. 打开帮助手册，在 “索引” 里面输入 “QpushButton”；

• 不要使用中文文档! 阅读英文文档是每个程序员必备的专业技能。必须要练，不能退缩。Qt 的文档从通俗易懂的角度来说, 是技术类文档中非常出类拔萃的. 只要大家稍微有点耐心，基本都能读懂个八九不离十。

6.4 认识对象模型（对象树）

（1）在 Qt 中创建对象时，通常会提供一个 Parent 对象指针，其作用如下：

• QObject 以对象树的形式组织。
  • 当创建 QObject 对象时，其构造函数接收一个 QObject 指针作为参数（即 parent，父对象指针）。
  • 此机制意味着：创建的 QObject 对象会自动添加到父对象的 children() 列表中。
  • 父对象析构时，其 children() 列表中的所有子对象也会被析构（注意：此处的“父对象”是对象树中的父子关系，而非继承意义上的父类）。
  • 这种机制在在 GUI 设计中，一个按钮（QPushButton）可能包含一个快捷键对象（QShortcut）作为子对象。删除按钮时，快捷键也会被自动删除，这是合理的内存管理方式。

（2）QWidget 是所有屏幕可见组件的父类：

• QWidget 继承自 QObject，因此同样遵循对象树规则。⼀个孩子自动地成为父组件的⼀个子组件。因此，它会显示在父组件的坐标系统中，被父组件的边界剪裁。例如，当用户关闭⼀个对话框的时候，应用程序将其删除，那么，我们希望属于这个对话框的按钮、图标等应该⼀起被删除。事实就是如此，因为这些都是对话框的子组件。
• 当然我们可以手动删除子对象时，它会自动从其父对象的 children() 列表中移除。例如，删除工具栏（QToolBar）后，主窗口会自动调整显示并更新子对象列表。

（3）Qt 引入对象树的概念，在一定程度上解决了内存问题：

• 当⼀个 QObject 对象在堆上创建的时候，Qt 会同时为其创建⼀个对象树。不过，对象树中对象的顺序是没有定义的。这意味着，销毁这些对象的顺序也是未定义的。
• 任何对象树中的 QObject 对象 delete 的时候，如果这个对象有 parent，则自动将其从 parent 的 children() 列表中删除；如果有孩子，则自动 delete 每⼀个孩子。Qt 保证没有 QObject 会被 delete 两次，这是由析构顺序决定的。

（4）如果 QObject 在栈上创建，Qt 保持同样的行为。正常情况下，这也不会发生什么问题。来看下面的代码片段：

（5）作为父组件的 window 和作为子组件的 quit 都是 QObject 的子类（事实上，它们都是QWidget的子类，而QWidget 是 QObject 的子类）。这段代码是正确的，quit 的析构函数不会被调用两次，因为标准 C++ 要求，局部对象的析构顺序应该按照其创建顺序的相反过程。因此，这段代码在超出作用域时，会先调用 quit 的析构函数，将其从父对象 window 的子对象列表中删除，然后才会再调用 window 的析构函数。但是，如果我们使用下面的代码：

（6）情况又有所不同，析构顺序就有了问题。我们看到，在上面的代码中，作为父对象的 window 会首先被析构，因为它是最后⼀个创建的对象。在析构过程中，它会调用子对象列表中每⼀个对象的析构函数，也就是说， quit 此时就被析构了。然后，代码继续执行，在 window 析构之后，quit 也会被析构，因为 quit 也是⼀个局部变量，在超出作用域的时候当然也需要析构。但是，这时候已经是第⼆次调用 quit 的析构函数了，C++ 不允许调用两次析构函数，因此，程序崩溃了。

• 由此我们看到，Qt 的对象树机制虽然在⼀定程度上解决了内存问题，但是也引入了⼀些值得注意的事情。这些细节在今后的开发过程中很可能时不时跳出来烦扰⼀下，所以，我们最好从开始就养成良好习惯。
• 在 Qt 中，尽量在构造的时候就指定 parent 对象，并且大胆在堆上创建。

（7）Qt对象树如图：

（8）代码示例：

1. 创建⼀个新工程并编译运行，生成如下窗口；

2. 选中工程名，鼠标右键 -------> “add new…”（或 “添加新文件” ）

3. 选择 “choose…”，弹出如下界面；

4. 点击 “下⼀步”，弹出如下对话框；

5. 点击 “完成” 之后，手动创建类的头文件以及源文件会自动添加到目标工程中；

6. 修改头文件；

7. 编写源文件；

8. 编译并运行；

9. 当关闭弹出的对话框时，就会自动调用按钮的析构函数；

10. 观察析构函数的执行顺序；

11. 执行结果：

12. 执行结果分析：
    • 对象树确保的是先释放子节点的内存, 后释放父节点的内存.
    • 而析构函数的调用顺序则不⼀定遵守上述要求。因此看到子节点的析构执行顺序反而在父节点析构顺序之后。
    • 注意：调用析构函数和释放内存并非是同⼀件事情。

6.5 Qt 窗口坐标体系

（1）坐标体系：以左上角为原点（0,0），X向右增加，Y向下增加。

（2）对于嵌套窗口，其坐标是相对于父窗口来说的。

• 示例：使用Qt中的坐标系设置控件的位置；

• 运行结果如下图示：