从零开始学习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显示模块的嵌入式开发板。