从零开始学习Qt GUI编程

从零开始学习Qt GUI编程

作者	将狼才鲸
创建日期	2021-11-23

• 注：所有的代码都是参考的网上的资料，有贴上源地址
• 编译环境1（002_GuiDisplay/下001~012cases期间）：
  Win10 + Qt6.2.1(MSVC 2019 64-bit) + Qt Creator5.0.3
• 编译环境2（004_MultiMedia_VideoAudio/下002~003cases期间）：
  Win10 + Qt5.15.2(MSVC 2019 64-bit) + Qt Creator5.0.3
• 编译环境3（004_MultiMedia_VideoAudio/下001、004~00xcases期间，005_Qt_with_C_language/及以后所有）：
  Win10 + Qt6.2.3(MSVC 2019 64-bit) + Qt Creator7.0.0

---

• Gitee源码路径：才鲸 / Qt GUI从简单到复杂
• CSDN文章展示地址：从零开始学习Qt GUI编程
• Bilibili视频地址（待完成）：才鲸嵌入式

一、目录结构

$ tree
.
|-- backup							// 待删的一些旧文件
|-- projects						// 已弃用，对同一份代码有makefile、qt、visual studio三个工程
|   |-- 001_HelloWorld_makefile
|   |-- 001_HelloWorld_qt
|   `-- 001_HelloWorld_vs
|-- readme.md
`-- source							// 源码
    |-- 001_HelloWorld				/* Hello world */
    |   `-- hello_world.c
    |-- 002_GuiDisplay				// 演示GUI
    |   |-- 001_Window				/* 主窗口 + HelloWorld */
    |   |   |-- 001_Window.pro		// Qt工程文件
    |   |   |-- documents			// 该Demo存放文档路径
    |   |   |   |-- 001_Window.md	// 该Demo说明文档
    |   |   |   `-- 001_Window.png	// 该Demo演示效果的图片
    |   |   |-- main.cpp			// 主程序，程序入口
    |   |   |-- mainwindow.cpp		// 主窗口显示逻辑
    |   |   |-- mainwindow.h		// 主窗口头文件
    |   |   `-- mainwindow.ui		// 主窗口布局
    |   |-- 002_Dialog				/* 对话框 */
    |   |-- 003_LoginDialog			/* 登录功能 */
    |   |-- 004_menu_logo			/* 添加菜单栏和图标 */
    |   |-- 005_icon_and_layout		/* 完整菜单栏和居中动态布局 */
    |   |-- 006_text_file_edit		/* 记事本编辑功能 */
    |   |-- 007_text_find			/* 文本查找功能 */
    |   |-- 008_keyboard_mouse		/* 键盘和鼠标功能 */
    |   |-- 009_2D_painter			/* 2D绘图 */
    |   |-- 010_image				/* 图片绘制 */
    |   |-- 011_3D_painter          /* 3D三维绘制 */
    |   |-- 012_media_play			/* Qt老版本的视频播放 */
    |   |   xxx_xxx
    |   |   ……
    |   `-- documents
    |       `-- GuiDisplay.md
    |-- 003_QtExamples_Qt-6.2.3		// Qt官方的各种经典示例
    |   |-- 001_xxx
    |   `-- documents
    |       `-- QtExamples_Qt-6.2.3.md
    |-- 004_MultiMedia_VideoAudio	// 演示如何使用音视频播放与录制
    |   |-- 001_qt6.2.3_multimedia  /* Qt6.2.3提供的完整播放器代码 */
    |   |-- 002_pcm_audio_play      /* PCM音频播放 */
    |   |-- 003_yuv_video_play      /* YUV视频播放 */
    |   |-- 004_pcm_input_save_file /* 从麦克风录制pcm文件 */
    |   |-- 005_yuv_input_save_file /* 从摄像头录制yuv文件 */
    |   `-- documents
    |       `-- MultiMedia_VideoAudio.md
    |-- 005_Qt_with_C_language		/* C++与C混合编程 */
    |-- 006_AudioVideo_Codec   		/* Qt中ffmpeg音视频编解码 */
    `-- 007_Embeded_Player			/* 自行实现音视频编解码与播放器（嵌入式仿真用） */
        `-- documents

二、Qt介绍（针对没接触过Qt的人）

• Qt概念、安装、更新、使用的介绍详情见 子文档 《01_Qt介绍、安装、更新、框架.md》

• Qt框架、架构、模块的简述详见 子文档 《02_Qt框架、架构、模块.md》

二、GUI Demo介绍

• qt_gui_simple2complex\source\002_GuiDisplay\下的GUI部分：

001_Window：创建一个主窗口

步骤：
第1篇 Qt5基础（一）Qt开发环境的搭建和hello world
效果：

---

002_Dialog：在主窗口之外创建一个对话框

步骤：
第2篇 Qt5基础（二）编写Qt多窗口程序
效果：

---

003_LoginDialog：登录功能

正确的用户名：demo，正确的密码：demo123456
步骤：
第3篇 Qt5基础（三）Qt登录对话框
效果：

004_menu_logo：添加菜单栏和图标

• 步骤：
  第4篇 Qt5基础（四）添加菜单图标（使用Qt资源文件 ）
• 效果：
  

---

005_icon_and_layout：完整菜单栏和居中动态布局

• 步骤：
  第5篇 Qt5基础（五）Qt布局管理器
• 效果：
  

---

006_text_file_edit：记事本编辑功能

• 步骤：
  第6篇 Qt5基础（六）实现Qt文本编辑功能
  新建的QT项目没有menubar、statusbar或者toolbar
• 效果：
  

---

007_text_find：文本查找功能

• 步骤：
  第7篇 Qt5基础（七）实现Qt文本查找功能
• 效果：
  

---

008_keyboard_mouse.md：键盘和鼠标功能

• 步骤：
  第9篇 Qt5基础（九）Qt键盘、鼠标事件的处理
• 效果：
  

---

009_2D_painter.md：2D绘图

• 步骤：
  第11篇 Qt5之2D绘图（一）绘制简单图形
• 效果：
  

---

010_image.md：图片绘制

• 步骤：
  第15篇 Qt5之2D绘图（五）绘制图片
• 效果：
  

---

011_3D_painter：3D绘制

• 资料：
  Qt OPenGL 入门教程之五 基于QOpenGLWidget 实现3D效果

• 效果
  

---

012_media_play：视频播放

• 步骤：
  Qt中嵌入视频并循环播放方法
• 效果：
  

---

三、多媒体Demo介绍

• qt_gui_simple2complex\source\004_MultiMedia_VideoAudio\下的多媒体部分：

001_qt6.2.3_multimedia：音视频多媒体播放

• 步骤：
  Qt6.2版本中已经有了播放器的Demo，亲测可用。先下载Qt并安装Qt6.2.3，或者更新到Qt6.2.3，直接在欢迎页找到Media Player Example的示例，编译并运行，亲测可用，这是一个完整的播放器（商用标准）。

• 效果：
  

• 注意事项：
  本工程更新了Qt软件，Qt使用了Qt6.2.3编译，IDE使用Qt creator 7.0.0

• Qt6.2.3安装后的官方源码路径：
  Qt\Examples\Qt-6.2.3\multimediawidgets\player
  其中还有两个更简单的视频播放器示例：
  Qt\Examples\Qt-6.2.3\multimediawidgets\videographicsitem
  Qt\Examples\Qt-6.2.3\multimediawidgets\videowidget
  Qt\Examples\Qt-6.2.3\multimedia\目录下很多音视频编解码相关的示例。

• 参考网址：
  Media Player Example 官方示例说明
  Qt 6中的Qt Multimedia模块
  Qt Multimedia in Qt 6 官方multimedia模块介绍
  QT开发总结（22）——多媒体 更详细的介绍
  QT AV 播放器 另一个使用ffmpeg的播放器
  MorningLight / QtAV QtAV源码
  QT软件开发: 基于QT设计的完整版视频播放器、多媒体播放器(mdk-sdk) QtAV的更详细介绍

---

002_pcm_audio_play：PCM音频播放

• 步骤：
  Qt播放PCM音频（裸流）文件的两种方法
  QT 用QAudio语音库实现音频信号的采集 以及发送到另一台电脑 播放
  error: no member named ‘setCodec’ in ‘TestNamespace::QAudioFormat’

• 效果：
  

• 注意事项：
  只能用Qt5.15.2编译，Qt6.2.1、 Qt6.1.3 和 Qt6.0.4都有multimedia模块的bug

---

003_yuv_video_play：YUV视频播放

• 步骤：
  qt采用opengl显示yuv视频数据

• 效果：
  

• 注意事项：
  只能用Qt5.15.2编译，Qt6.2.1、 Qt6.1.3 和 Qt6.0.4都有multimedia模块的bug

---

004_pcm_input_save_file：从麦克风保存PCM音频文件

• 步骤：
  详见源码中文档和注释

• 注意事项：
  使用Qt6.2.3编译，实现方式和Qt5完全不同

---

005_yuv_input_save_file：从摄像头保存YUV视频文件

• 步骤：
  详见源码中文档和注释

• 注意事项：
  使用Qt6.2.3编译，实现方式和Qt5完全不同

---

四、Qt官方Demo介绍

• qt_gui_simple2complex\source\003_QtExamples_Qt-6.2.3\下的Demo部分：

• Qt官方Demo的整体介绍详见 子文档 《QtExamples_Qt-6.2.3.md》

---

001_animation_动画_缓冲曲线.gif

---

002_Screenshot_截屏.png

---

003_Systray_修改系统托盘.gif

---

004_ClassWizart_翻页.gif

---

005_Extension_扩展列表.gif

---

006_FindFiles_打开文件夹_查找文件.gif

---

007_LicenseWizard_注册向导.gif

---

008_StandardDialogs_常用对话框.gif

---

009_TabDialog_列表对话框.gif

---

010_TrivialWizard_简单向导.gif

---

011_DraggableIcons_拖动图标.gif

---

012_DraggableText_拖动文本.gif

---

013_DropSite.png

---

014_FridgeMagnets_拖动贴靠.gif

---

015_Puzzle_拼图游戏.gif

---

016_BlurPicker_模糊选择器.gif

---

017_FadeMessage_界面渐变.gif

---

018_Gallery_综合界面和主题.gif

---

019_ImageGestures_打开图片.gif

---

---

• 前面已列出的官方用例还不到1/5，Qt\Examples\Qt-6.2.3\下的Demo还有非常多， 建议先了解有哪些类型的Demo，需要用到相关功能的时候先去找官方示例，后续的示例效果图省略。

• 官方所有示例的介绍有文字简介和示意图地址（英文版，可以用浏览器翻译成中文查阅，先看Qt Widgets章节，主页只有文字介绍，点开具体示例可以看到演示图片和使用说明）：
  All Qt Examples

• 其它的演示效果图参考网址：
  Qt Examples Qt实例汇总
  Qt Examples

---

五、Qt C++与C语言混合编程

• qt_gui_simple2complex\source\005_Qt_with_C_language\下的Demo部分：
• 主要用于嵌入式的仿真，各种基础模块都自行实现。

---

六、Qt ffmpeg音视频编解码

• qt_gui_simple2complex\source\006_AudioVideo_Codec\下的Demo部分：
• 用于替代硬件音视频编解码器的仿真。

---

七、用于嵌入式仿真用的音视频播放器

• qt_gui_simple2complex\source\007_Embeded_Player\下的Demo部分：
• 只使用Qt的pcm、yuv输入输出和GUI界面显示，音视频编解码库使用ffmpeg，其它封装解封装、音视频同步、播放器API部分都使用C语言自行实现，非常容易就移植到有硬件视频编解码器、硬件音频编解码器、display显示模块的嵌入式开发板。

---