Qt 快速入门指南

  • 后台启动方法: /opt/Qt5.12.9/Tools/QtCreator/bin/qtcreator.sh &

一、Qt介绍

1.1、Qt是什么

Qt 是一个跨平台的 C++开发库。主要用来开发图形用户界面(Graphical User Interface,简称 GUI)程序

Qt 虽然经常被当做一个 GUI 库,用来开发图形界面应用程序,但这并不是 Qt 的全部;Qt 除了可以绘制漂亮的界面(包括控件、布局、交互),还包含很多其它功能,比如多线程、访问数据库、图像处理、音频视频处理、网络通信、文件操作等,这些 Qt 都已经内置了。

Qt 还存在 Python、 Ruby、 Perl 等脚本语言的绑定, 也就是说可以使用脚本语言开发基于 Qt 的程序。开源社区就是这样,好东西就会被派生扩展,到处使用,越来越壮大。

Qt 支持的操作系统有很多,例如通用操作系统 Windows、 Linux、 Unix,智能手机系统Android、 iOS、 WinPhone, 嵌入式系统 QNX、 VxWorks 等等。

简单的来说, Qt 可以做很多东西,好比如 Windows 下的软件也有很多是 Qt 开发的,这里我很喜欢它的一个特性就是跨平台使用,“跨平台”代表一份代码可以无需任何修改或者小修改就可以在其他平台上运行

笔者不再介绍 Qt 的发展史了,这些网上可以查到。写太多感觉也没有什么用,反正 Qt 就是您做界面需要选择的一个好工具!

1.2、Qt 能做什么

Qt 能做什么?理论上来说,您能想到的 App, Qt 它都基本能做。 像 WPS 这种大型的桌面应用, Maya(3D 建模), 一些游戏的内核都可以使用 Qt 来实现。 甚至您能快速使用 Qt 来开发一款像酷狗,网易云音乐这样的音乐播放器。 在嵌入式里,使用 Qt 来开发界面已经是无可替代的一种趋势。 工控界面最常用,一些移动端的界面也开始使用 Qt。像点菜机,温度采集数据显示,汽车仪表,速度显示界面等。 Qt 能做优美的界面,所以推出了 QML(一种描述性的语言)。每次 Qt 更新都有在 Quick(QML 使用的模块)上优化或者添加功能!

1.3、Qt、C++与 QML

QML 是 Qt C++基础上拓展的。也就是说 Qt C++上所使用界面的类,基本都是可以拓展到QML 上。 如果不能拓展的,也可以直接 QML 与 C++一起使用。 实际上 Qt C++效率更高。 所以 Qt C++为基础入门, QML 可以说是一个加分项。 Qt QML 模块提供QML 语言开发应用程序和库提供了一个框架。 QML 本身不涉及显示部分的内容,所以 Qt Quick模块充当了这部分的作用。至于他们三者的关系,我们就这样简单的了解一下就行了。

在目前来说, Qt C++更成熟, QML 目前也比较成熟了,因为每次更新版本 QML 也有更新。不过在低版本的 Qt(如 Qt5.6 以下), QML 还不够成熟, QML 在高版本的 Qt(如 Qt5.7 以上)更成熟C++依旧是 Qt 的主要编程语言, Qt 5 也并没有忽略它, Qt 5 添加了很多新的 C++ API,而且会持续更新。引入 QML 应该是 Qt 向移动端市场的一个突破,还有 python 和 javascript 都可以在 Qt 里用。

说了 C++又说 QML,但是 Qt 基础教程还是主打 Qt C++, 有了基础学 Qt 里其他的东西就不难!

二、如何选择 Qt 版本

初学者应该要如何选择 Qt 的版本? 2020 年最新的 Qt5 版本是 Qt5.15。可以参考这个网址:https://doc.qt.io/qt-5/qt5-intro.html 来看看各个 Qt 版本的更新说明。

Qt6 已经出了,我们有必要直接上最新版本的 Qt6 吗?不! Qt6 理论上与 Qt5 能兼容,但是许多公司在用 Qt5 甚至 Qt4。学习了 Qt5, Qt6 等稳定版本出来,等市场上用的多,我们用 Qt6 才是最明智的选择,新出的事物往往要有一定的时间去适应!

我们主要是简单对整个 Qt 版本说明一下。首先, Qt 版本的升级肯定是对上一版本进行优化。比如 Qt4 与 Qt5 的的语法区别,Qt5 的信号槽写法与 Qt4的信号槽写法有区别除了 Qt5.10 以上的版本, Qt5.6 与 Qt5.9 是 Qt 长期支持的版本 LTS(Long Term Support,简称 LTS)

但是 2020 年 3 月最近 Qt 官方将 Q5.2~Qt5.8、 Qt5.11 归档到:http://download.qt.io/new_archive/qt/。所以很多小伙伴们想用老版本的 Qt 要到上面这个链接去下载了。毕竟有些时候我们开发板程序处于某个 Qt 版本下开发的,如果要迁移到新版本的 Qt 可能还要考虑到兼容问题!不过变化不会很大的,请放心!

在这里插入图片描述

下面贴出 Qt 官方下载链接:http://download.qt.io/archive/qt/。我们直接进入这个链接可以看到下图。下图和上图加起来才是 Qt 的完整版本。那么多版本任君选择。还可以看到 Qt 版本在不断的更新,更多的功能将会注入到 Qt 这个 GUI 库里,使我们开发变得更简单和有趣! Qt6的时代即将到来!

在这里插入图片描述

三、windows 下安装Qt

在上一小节里,我们已经知道 Qt 的下载地址。在 Windows 按如下方法下载。进入地址,此节只介绍 Windows 下的 Qt 安装。

进入:http://download.qt.io/archive/qt/5.12/5.12.9/, (注意如果找不到下载链接,我们就进行http://download.qt.io 这个顶层目录一个个目录找,因为 Qt 下载链接会变动)。 从 Qt5.12 版本里选择 Qt5.12 的第九个版本。 “.dmg” 是 Mac 系统版本的安装包,此处不作安装讲解。下图为Windows 和 Linux 下的安装包格式。

在这里插入图片描述

下载完成后,找到安装包文件,双击该安装包文件。开始安装。

在这里插入图片描述

弹出开始安装界面,点击 Next。

在这里插入图片描述

登录 Qt 帐号,如果您还没有帐号及密码,请到 https://www.qt.io/ 自行注册一个。

在这里插入图片描述

Qt 安装程序,开源版本的 Qt 遵循 GPLv 2, GPL v3 或者 LGPL v3 协议。勾选同意使用开源版本 Qt,填写公司/个人的名字。

在这里插入图片描述
Qt 的欢迎安装界面

在这里插入图片描述

修改安装目录

在这里插入图片描述

选择需要安装的组件, Windows 选择安装的组件如下。 MSVC 是微软的 VC 编译器,需要安装 VC 相关库才能使用。 MinGW 是指是 Minimalist GNU on Windows 的缩写, 允许您在GNU/Linux 和 Windows 平台生成本地的 Windows 程序而不需要第三方 C 运行时库。 除了安卓选项 arm 等选项, 我们只需要勾选 MinGW 的即可。 Sources 是 Qt 源码, Source 以下的是 Qt的一些模块,可选择安装或者不装。这里我们选择全装。

在这里插入图片描述

选择同意许可协议,再点击下一步。

在这里插入图片描述

点击下一步。

在这里插入图片描述

准备安装 Qt,可以看到我们安装的组件越多占用的安装空间就会越大。接近 10G。
在这里插入图片描述

正在安装 Qt。

在这里插入图片描述

安装完成,勾选启动 Qt Creator,点击完成。

在这里插入图片描述

安装完成打开 Qt Creator 的界面如下。

在这里插入图片描述

四、Linux 下安装Qt

4.1、安装Qt

同样地,进入 http://download.qt.io/archive/qt/5.12/5.12.9/下载页面(注意如果找不到下载链接,我们就进行 http://download.qt.io 这个顶层目录一个个目录找,因为 Qt 下载链接会变动),选择 Linux 的安装包下载。使用迅雷下载再拷贝过去 Ubuntu 虚拟机或者直接复制链接地址到Ubuntu 虚拟机下载。

如 下 图 , 复 制 链 接 下 载 地 址 到 Ubuntu 虚 拟 机 终 端 下 使 用 指 令 wget 下 载 ,

wget http://download.qt.io/archive/qt/5.12/5.12.9/qt-opensource-linux-x64-5.12.9.run

在这里插入图片描述
赋予可执行权限,加上 sudo 权限进入安装,这样会安装在/opt 目录下。

chmod +x qt-opensource-linux-x64-5.12.9.run
sudo ./qt-opensource-linux-x64-5.12.9.run

在这里插入图片描述
执行安装指令后,将会弹出 Qt 的安装界面,这与 Windows 下的 Qt 安装步骤一样,请参阅上一小节,安装选择目录时,默认安装目录即可。安装组件选择如下。

在这里插入图片描述

安装完成,在左下角应用程序中心找到 Qt Creator,点击打开 Qt Creator。

在这里插入图片描述

打开 Qt Creator 的界面如下,安装完成。

在这里插入图片描述

4.2、配置 Qt Creator 输入中文

4.2.1、配置 Ubuntu 中文环境

Ubuntu 的默认安装环境是使用的语言是英文, 很多同学不习惯。现在我们将 Ubuntu 的系统语言设置成中文。 在 Ubuntu 右上角,点击设置图标如下图第①步。

在这里插入图片描述

按如下图设置, 点击(install/Remove Languages …) 安装或者移除语言,在安装语言处选择简体中文,点击 Apply 应用即可。

在这里插入图片描述

在这里插入图片描述
配置完成后,点击重启(或者注销 Ubuntu),重启后,因为我们已经更新了系统的语言,Ubuntu 询问我们需不需要将系统文件夹的名称也改成中文。这里作者选择否,保留旧的名称。保留旧的名称有一定的好处,就是我们进入这些访目录时,直接使用英文,不用切换到中文输入法。 严格来说,最好是统一用英文环境开发了。这里为了初学者或者有强迫中文者,所以我们这里需要配置中文的环境,及后期开发 Qt 需要写中文注释,方便理解与给后人看。

在这里插入图片描述

4.2.2、配置中文输入法

在上面我们已经配置好中文环境,并有拼音输入法 ibus,但 ibus 并不好用, Qt Creator 不支持 ibus 输入中文。 好的生产工具决定好的生产力,下面我们介绍一下 Fcitx 输入法。

Fcitx (Flexible Input Method Framework) ──即小企鹅输入法,它是一个以 GPL 方式发布的输入法平台,可以通过安装引擎支持多种输入法,支持简入繁出,是在 Linux 操作系统中常用的中文输入法。它的优点是:短小精悍、跟程序的兼容性比较好。

Fcitx 内置的输入法支持中文 拼音 和基于字符表的输入(例如五笔),根据语言的不同,有不同的输入法引擎可以选择。

在 Fcitx 支持的拼音输入法中,内置拼音响应速度最快。 Fcitx 同样支持流行的第三方拼音输入法以提供更好的整句输入效果.

  • fcitx-sunpinyin 在输入速度和输入精度之间有较好的平衡。
  • fcitx-libpinyin 算法比 sunpinyin 先进。
  • fcitx-rime, 即著名中文输入法 Rime IME 的 Fcitx 版本。但它不支持 Fcitx 本身的 #特殊符号和 #快速输入功能,自定义设置请参见官方(http://rime.im/)。
  • fcitx-googlepinyin, Google 拼音输入法 for Android.
  • fcitx-sogoupinyin(AUR, ) 搜狗输入法 for linux—支持全拼、简拼、模糊音、云输入、皮肤、中英混输入。 官方网址(http://pinyin.sogou.com/linux/)。
  • fcitx-cloudpinyin 可以提供云拼音输入的支持,支持 Fcitx 下的所有拼音输入法, Fcitx-rime除外。
  • fcitx-chewing 为 Fcitx 添加 chewing (繁体中文注音) 输入引擎支持。依赖 libchewing。
  • fcitx-table-extra adds Cangjie, Zhengma, Boshiamy support。

安装 Fcitx 输入法,下面主要介绍两种输入法(五笔输入法与拼音输入),本次以安装五笔输入法为例。

sudo apt-get install fcitx-table-wubi // 五笔输入法
sudo apt-get install fcitx-sunpinyin // 拼音输入法请装 sunpinyin 或者 fcitx-googlepinyin

再到右上角点击系统设置,找到语言支持,将键盘输入方式系统点击下拉复选框选择为 fcitx,然后点击应用到整个系统,再关闭。 如下图步骤。

在这里插入图片描述

为了确保刚配置的环境生效, 完成以上步骤后重启 Ubuntu 系统。

按如下步骤,在弹出的“输入法配置”对话框中, 如果没有出现五笔字形输入法, 点击左下角的“+”号按钮将五笔字形添加到输入法列表中,再点击第 8 步的“^” 将五笔字型添加至最上方。

在这里插入图片描述
打开 Qt Creator,在左下角“显示应用程序”,找到 Qt Creator 图标单击打开 Qt Creator。

在这里插入图片描述
此时右上角的输入法标志还是英文输入法,无法在④处输入中文,按 Ctrl+Shift 也切换不到中文输入法状态下。

在这里插入图片描述
作者为解决 Linux Qt Creator 不能输入中文的问题,已经编译过 fcitx 插件,已经上传到 Gitee仓库里,大家可以下载直接使用。

如果您没有安装 Git,请先使用下面的指令安装 Git。

sudo apt-get install git

使用下面的指令下载 Qt Creator 插件,本插件支持 Qt5, Qt4 没有测试过。本插件曾经在Qt5.5.1 上测试过,后来升级了 Qt 版本到 Qt5.12.9。 Qt5.5.1 与 Qt5.12.9 这两个 Qt 版本的安装目录插件路径有变动(指版本相差大,安装路径有变动)。从 Gitee 下载的插件适用于 Qt5.12 版本左右版本。如果使用其他版本请自行修改 fcitx-install.sh 脚本里的安装路径!

git clone https://gitee.com/QQ1252699831/fcitx-qt5-1.1.1.git
cd fcitx-qt5-1.1.1

在这里插入图片描述

直接执行脚本安装,原理是拷贝 fcitx-qt5-1.1.1 文件夹下里面的插件到 Qt Creator 的安装目录下。请注意个人安装 的 Qt Creator 路径,一定要与作者安装的路径一样,否则需要自己修改fcitx-install.sh 脚本里的路径!

./fcitx-install.sh

在这里插入图片描述
此时再重新打开 Qt Creator 方可输入中文!如下图。需要按 Ctrl+Space(空格键)激活输入法,再按 Ctrl+Shfit 切换输入法到五笔输入法。

在这里插入图片描述

五、Qt Creator 简单使用

5.1、Qt Creator 界面组成

启动 Qt Creator 后, Qt Creator 的主界面如下图, 默认打开的是欢迎页面。可以看到 Qt Creator里自带很多示例。在 Ubuntu 里,由于 Qt Creator 安装在/opt 目录下,这个目录普通用户是没有权限写的,只能够读。如果要打开示例先点击后选择“复制项目并打开”。作者比较喜欢 Qt Creator界面设计的。十分简洁,还自带示例,不会写也会参考!最重要的是 Qt Creator 里左侧栏的“帮助”按钮,有很多使用说明,总结的非常好,对学习 Qt 的类有很大帮助,如果学习到某个方法或者类不会用,可以打开这个“帮助”来搜索这个类或者方法的用法。 没有任何一本教程能有Qt 帮助文档这么详细了,可惜是英文的,初学者学起来还是会一定难度。 多多参考这个 Qt 帮助文档,因为那里能学到很多,例子说明也特别多,每个方法、类、信号与槽等都有详细的解释。

在这里插入图片描述

单击顶部工具栏的“帮助”菜单,点击“UI Tour”会出现介绍 Qt Creator 各组件的说明。这个大家一定要看看,虽然是英文的说明,但是大体有个了解。这里就不再截图说明了。 后面编写第一个 Qt 程序也会说明整个项目编写及编译运行的流程。界面组成我们只需要了解这么多。

在这里插入图片描述

5.2、Qt Creator 设置

Qt Creator 里的设置比较重要。 在 Qt Creator 的设置里我们可以做些什么呢? 我们一般会设置字体的大小、颜色和背景颜色等这样看起来比较炫,或者比较符合自己的风格。 Qt Creator里也有很多主题,拥有好多种搭配,相信有一种是您喜欢的,如果不喜欢可以自定义里面的字体大小、颜色和背景颜色等。 点击顶部的菜单栏的“工具”》“选项”。

在这里插入图片描述

打开选项后可以看到如下图的界面。

在这里插入图片描述
下面我们主要介绍常用的几项:

  • 1、Kits: 主要显示的是编译工具。我们在 Ubuntu 安装 Qt Creator 时,在安装选项里已经勾选了 Desktop Qt5.12.9 GCC 64bit 这个选项。所以在Kits这个页面就能检测到安装的编译工具。还有 Qt Versions 等项都可以自由查看。 重要的是我们可以在这个 Kits 里配置 ARM 平台的编译工具(后面以某个 ARM 板卡平台为教程时有讲到如何配置),之所以 Qt 能够跨平台,是因为 Qt 有不同平台的编译工具。

  • 2、环境: 在这个项里可以设置不同的主题和语言等。 Qt Creator 默认的主题和系统语言即可。

  • 3、文本编辑器: 可以设置文本编辑器的字体大小、颜色等。还可以设置某些类型的字体颜色,如关键字、字符串和注释等。

  • 4、构建和运行:常用的是设置项目的目录。其他一般不用修改,默认即可。

六、第一个Qt程序

“hello world ”的起源要追溯到 1972 年,贝尔实验室著名研究员 Brian Kernighan 在撰写“B 语言教程与指导(Tutorial Introduction to the Language B)”时初次使用(程序),这是目前已知最早的在计算机著作中将 hello 和 world 一起使用的记录。 第一个程序都是以“hello,world”作为默认的第一个程序,我们延续这种经典的做法吧,感受程序的伟大。 同时可以让我们初步了解 Qt 项目搭建的基础流程。

6.1、新建一个项目

在 Ubuntu18 里打开 Qt Creator,也就是左下角软件中心处点击后,找到 Qt Creator 的图标后点击打开。 单击文件 Qt Creator 的文件,选择新建文件或者项目。注意有快捷键 Ctrl + N。直接在 Qt Creator 激活状态和英文状态的输入法下使用“Ctrl + N”也可以快速打开新建项目。

在这里插入图片描述

弹出的新建项目如下图,这里我们可以看到有很多模板(包括项目模板和文件和类模板)可以使用, 包括 Qt, Qt Quick, Qt for Python, …, C++等等。 作为初学者我们选择第一个Application(Qt)和 Qt Widgets Application, 所谓的模板就是 Qt 为了方便开发程序, 在新建工程时可以让用户基于一种模板来编写程序,包括 cpp 文件, ui 文件都已经快速的创建,而不用用户手动创建这些文件。 这样对用户的开发带来极大的便捷。当然用户可以可以自己手动创建项目,一个一个往里面加也是可以的。但是初学者不建议这么做,我们的目的是先体验一遍项目搭建的流程,等日后有空再自己回头尝试这么做吧!

在这里插入图片描述
如果您的输入法现在处于中文输入法,先按 Ctrl 再按 Space(空格)切换成英文输入法,在名称处输入项目为“01_hello_world”,这里的项目路径为编者个人的家目录路径下的 Qt 目录下,勾选设为默认的项目路径,这样以后做项目实验时都是默认选择这个目录作为项目路径而不用自己手动选择路径了。 选择下一步。

在这里插入图片描述
默认已经是选择 qmake 编译,主要用 qmake 生成 Makefile 用于项目的编译。点击下一步即可。

这里默认选择的基类为 QMainWindow。 在 Base class 一项中我们还可以看到还有 QWidget和 QWialog 这样的基类可以选择。在 C++篇我们已经学习什么叫基类, 简单的来说,我们创建的这个项目是基于 QMainWindow 类去开发的。 默认勾选“Generate form”,意思是生成 ui 窗体文件 mainwindow.ui。 为了学习方便,我们统一默认基类为 QMainWindow,但是注意,在嵌入式里一般不需要标题栏,状态栏等,所以常用的是 QWidget 基类。

  • QMainWindow:主窗口类,主窗口具有主菜单栏、工具栏和状态栏。 类似于一般的应用程序的主窗口。如果您想做个嵌套的窗口程序开发的软件,不妨选择这个 QMainWindow。
  • QWidget:是可视界面类的基类,也就是说 QMainWindow 类也是由 QWidget 继承封装而来。所以 QWidget 要比 QMainWindow 功能少一些。
  • QDialog:对话框类,建立一个对话框界面。比较少使用此项作为基类。 一般以 QMainWindow和 QWidget 作为基类的居多。 注因为 QWidget 不带窗口标题栏等, 嵌入式里最好 QWidget。

在这里插入图片描述
在高版本的 Qt Creator 里,有 Translation 这一项, Qt 提供了一个( .ts) 的文件给您, .ts 是可读的翻译文件,使用简单的 XML 格式。 我们暂时只需要知道这个东西是个可读的翻译文件即可。极少需要使用到。 点击下一步。

在这里插入图片描述
勾选编译器,这个编译器是我们在安装组件时选择的,使用这个编译器可以编译出 Ubuntu版本上跑的可执行程序。 这么一说是不是觉得还能编译出其他平台的可执行程序?没错,假若我们现在有 ARM 平台的 Qt 编译器,那么选择 ARM 平台的 Qt 编译器即可编译出 Qt 在 ARM平台上的可执行文件(这里说的可执行文件类似 window 的 exe 程序文件一样,直接能够运行)。点击下一步。

在这里插入图片描述

到这里, Qt Creator 询问是否使用版本控制,如果您学习过像 Git 这样的版本控制工具,可以选择 Git,将您的项目使用版本控制。默认选择是无版本控制,直接点击完成即可。

在这里插入图片描述
新建的“01_hello_world” 项目如下。

在这里插入图片描述

6.2、项目文件介绍

其中,左侧有上下两个子窗口,上面的窗口显示了项目的文件结构,显示当前的项目为“01_hello_world”,细心的还会发现“01_hello_world”是用粗体黑色标明。说明此项目是活动项目,活动项目的项目根节点都是用粗体字体表示的。如果打开了多个项目,那么我们只需要观察哪个是加粗的项目名就表示当前活动项目。

Qt Creator 和其他 IDE 开发软件一样。都是分组管理项目内的各种源文件,下面是项目内的文件简介。

  • 01_hello_world.pro 是项目管理文件,这个项目管理文件十分重要,当您加入了文件或者删除了文件, Qt Creator 会自动修改这个*.pro 文件。有时候需要打开这个*.pro 文件添加我们的设置项。
  • Header 分组,这个节点下存放的是项目内所有的头文件*.h。
  • Source 分组,这个节点下存放的是项目内的所有 C++源码文件*.cpp。
  • Forms 分组,这个节点下是存放项目内所有界面文件*.ui。 *.ui 文件由 XML 语言描述组成,编译时会生成相应的 cpp 文件,这样交叉编译器就可以编译它了。

6.2.1、项目文件*.pro

01_hello_world.pro 文件如下所示。此 pro 文件在高版本的 Qt 与低版本的 Qt 文件有些区别,且在 Windows 与 Linux 系统下生成的 pro 也有些区别,但是变化不大。

01_hello_world.pro 文件内容

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++11

# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
    main.cpp \
    mainwindow.cpp

HEADERS += \
    mainwindow.h

FORMS += \
    mainwindow.ui

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

第 1 行,添加了Qt 的支持的模块, core 与 gui 库是 Qt 的默认设置。
第 3 行,比较 Qt5 版本,如果是 Qt5 版本, 在 main.cpp 中 application 是在QtWidgets 中的,因此要包含这个库。
第 5 行和第 11 行, 分别配置的是使用 c++11 和添加 QT_DEPRECATED_WARNINGS定义。
第 18 行, SOURCES 下的是源文件。
第 22 行, HEADERS 下是头文件。
第 25 行, FORMS 下是 ui 界面文件。
第 28 行,部署默认的规则。
第 29 行, qnx:判断是不是 qnx 操作系统,赋值 target.path = /temp/$${TARGET}/bin
第 30 行,如果是 unix 系统但不是安卓,赋值 target.path = /opt/$${TARGET}/bin
第 31 行,如果 target.path 为空目录, 赋值 INSTALLS += target。

如果需要修改生成目标的可执行程序名字,可赋值 TARGET = xxx。否则 TARGET 将默认取值为项目的名字。

6.2.2、样式文件*.ui

mainwindow.ui 是一个 xml 类型的文件,它的 xml 内容如下。 这个文件是生成的不能手动编辑。 只能够通过图形界面修改其属性。

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget"/>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>23</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

双击 mainwindow.ui 后可以跳转到设计界面, 如下图。 下面主要介绍主体部分。

在这里插入图片描述

  1. ①是控件栏,有各种各样的控件,上方的 Filter 是过滤器,输入首写字母就可以快速定到我们想要找的控件。
  2. ②显示的是我们的窗口程序了,上面已经带有 MainWindow 对象及其几个子对象, 默认MainWindow 就带有菜单栏和状态栏。
  3. ③是对象栏, ②处用到的对象都在③处显示。
  4. ④是属性栏, 点击③处对象栏的某个对象,就可以在④属性栏里编辑它的属性了。 属性项有很多,包括位置,大小,文字,颜色,字体等等。

6.2.3、头文件*.h

点击左边栏的编辑,回到项目的编辑工作窗口。点击项目下的 Headers 下的 mainwindow.h,mainwindow.h 一般有与之对应的一个 cpp 文件叫 mianwindow.cpp。 其中 mainwindow.h 包含类的声明, mianwindow.cpp 包含类的实现。 这与我们前面学习的 c++是一样的。

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

第 7 行, 定义名称空间 Ui ,里面有一个类 MainWindow ,这个 MainWindow 和第 10 行里的 MainWindow 不是同一个对象。实际上,这个文件里的 MainWindow 类有一个成员*ui 就是指向第 19 行的 Ui::MainWindow 的指针。这都是为了使用.ui 文件设计界面的。

第 12 行, MainWindow 的声明中第一行是 Q_OBJECT,这是一个宏,由 Qt 进行处理,这也是 Qt 针对 C++扩展的地方,所有用到信号的类都要加这个宏。

6.2.4、源文件*.cpp

点击项目下的 Sources 下的 mainwindow.cpp。可以看到它的内容如下。

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}


第 2 行, MainWindow 的实现类中,第 2 行 include 了一个文件 ui_mainwindow.h 这个文件是 Qt 根据.ui 文件自动生成的,也就是说 ui_mainwindow.h 要点击编构建后才生成,我们才能看到这个文件。 构建/编译后可以在 debug/release 的目录找到这个文件。

第 6 行,在 MainWindow 构造函数中用“,”隔开, new 一个 Ui 中的 MainWindow。 这里是一种初始化成员的方法。

第 8 行, ui->setupUi(this);这句话是进行界面初始化,将 this(指的是 MainWindow 类的本身),作为参数传到 setupUi 里, ui 界面文件的对象会以 this 为父对象,所有子对象都将显示在MainWindow 里。 我们要想使用 ui 里的对象,必须将代码写在 ui->setupUi(this)这句话之后,因为 ui->setupUi(this)会先初始化里面的对象,只有初始化里面的对象我们才能使用这个对象。

第 13 行, 析构函数里 delete 掉 ui。 在 Qt 里我们需要在析构函数里 delete 的对象一般是 new创建的并且没有父对象的对象。

小提示: this 在成员函数的开始执行前构造的,在成员的执行结束后清除。

点击项目下的 Sources 下的 main.cpp。可以看到它的内容如下。

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

第 3 行, 包含 QApplication 类的定义。在每一个使用 Qt 的应用程序中都必须使用一个QApplication 对象。 QApplication 管理了各种各样的应用程序的广泛资源,比如默认的字体和光标。

第 5 行, main()函数是程序的入口。几乎在使用 Qt 的所有情况下, main()只需要在把控制转交给 Qt 库之前执行一些初始化,然后 Qt 库通过事件来向程序告知用户的行为。 argc 是命令行变量的数量, argv 是命令行变量的数组。

第 7 行, a 是这个程序的 QApplication。它在这里被创建并且处理这些命令行变量。

第 8 行,创建一个对象 w,这个对象就是 MainWindow。

第 9 行,调用方法 show()。这样程序界面才能显示。

第 10 行, 这里就是 main()把控制转交给 Qt,并且当应用程序退出的时候 exec()就会返回。在 exec()中, Qt 接受并处理用户和系统的事件并且把它们传递给适当的窗口部件。

6.3、修改 ui 文件显示 hello world

双击 mainwindow.ui, 进入“Ui 设计器”页面如下。

在这里插入图片描述
可以看到中间的要设计的主窗体目前是空的,但是窗体上已经有好几个成员了,可以看到右边的对象栏,已经有 3 个对象成员在里面了,只是我们看不出来而已,效果不太明显。

我们要在窗体里显示“Hello World!”,那么需要使用左边的控件栏, 目前左边的控件栏的控件有很多,也分很多类别。这些对于我们初学者来说,暂时不用知道它们是怎么用的。后面教程其中的类别进行说明它们是如何使用的。 现在我们主要是想要显示“Hello World!”。 要明白我们的主要目的,切勿看到左边的控件栏就想一个个的去试,又不知道怎么去用。 这样的学习方式是不对的。 要显示“Hello World!”,那么我们需要用常用的文本显示控件,常用的就是Label 文本控件了,当然 PushButon 按钮类也是可以显示文本的。但是我们不需要按钮的功能,只需要显示文本。 所以用 Label 文本控件就可以了。

如下图,在左边的控件图,找到 Label 控件, Label 控件在“Display Widgets”(翻译为显示小部件)下, 选中 Label 控件,将其拖至②处中间的设计窗体里。 然后在③处选中 label 对象,再在④处 label 对象的属性栏找到 text 文件属性,修改里面的文本为“Hello World!”。这样我们就已经显示“Hello World”在窗口里了。 当然双击中间的 Label 控件也是可以修改其文本属性的,对初学者来说还是按步骤修改,这样学习“Ui 设计器”是如何使用的。 这里我们已经完成显示“Hello World!”的设计了

在这里插入图片描述

6.4、项目编译&调试&运行

完成上面的“Hello World!” 后,我们肯定下一步是想编译运行我们的程序了,看看效果如何!

按如下步骤,先返回编辑页面,再点击②处左下角的绿色三角符号(或者按 Ctrl + R 快捷键编译且运行), 编辑时会输出编译信息,点击③处的编译输出窗口里, 可以看到编译时的编译信息,能看到编译警告、编译错误、编译链接、相关编译器编译过程等。

在这里插入图片描述

在 Ubuntu 下刚装的 Qt Creator,毫无意外,第一次编译时会报“Cannot find -lgL”的错误。由于 Qt5.0 的库默认会链接到 OpenGL,但是在 Ubuntu 机器上没有安装 OpenGL, 所以们需要在 Ubuntu 下安装 OpenGL Library。在 Ubuntu 终端下输入如下指令。

sudo apt-get install libglu1-mesa-dev

安装完成后,我们再点击左下角的绿色三角形试试,可以看到如下结果! 在下图②处已经看到没有报错信息了。 如果还有其他报错,建议回到第一章 C++环境设置里寻找 C++环境配置的相关指令安装好相应的库。可能初学者跳过了 C++就直接到 Qt 这部分了, Qt 也依赖 C++的环境的!

运行的结果如③处,弹出一个窗口,中间就是我们设计的 Hello World!

在这里插入图片描述
如果需要调试,请先关闭上面的“Hello World!”窗口,点击右上角的“x”关闭即可! 再按如下步骤点击, 在程序里右键设置断点,再点击左下角③处的 Debug 绿色三角符号按钮。 不过我们很少使用调试,这种简单的程序完全是可以预知它的运行过程的,如果我们想要知道它的运行过程,是可以使用这个调试的功能去了解 Qt 程序的运行流程的!

在这里插入图片描述

  • 11
    点赞
  • 55
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ReCclay

如果觉得不错,不妨请我喝杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值