# Qt GUI从简单到复杂
**Repository Path**: zpyc/qt_gui_simple2complex
## Basic Information
- **Project Name**: Qt GUI从简单到复杂
- **Description**: 注重于GUI的基础元素，用Qt从最简单的主界面到很复杂的综合页面进行演示。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 27
- **Created**: 2023-02-06
- **Last Updated**: 2023-02-06
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 从零开始学习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从简单到复杂](https://gitee.com/langcai1943/qt_gui_simple2complex)
* CSDN文章展示地址：[从零开始学习Qt GUI编程](https://blog.csdn.net/qq582880551/article/details/121594067)
* Bilibili视频地址（待完成）：[才鲸嵌入式](https://space.bilibili.com/106424039)
## 一、目录结构
```
$ 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](https://gitee.com/langcai1943/qt_gui_simple2complex/blob/develop/documents/01_Qt%E4%BB%8B%E7%BB%8D%E3%80%81%E5%AE%89%E8%A3%85%E3%80%81%E6%9B%B4%E6%96%B0%E3%80%81%E6%A1%86%E6%9E%B6.md)》
* Qt框架、架构、模块的简述详见 **子文档** 《[02_Qt框架、架构、模块.md](https://gitee.com/langcai1943/qt_gui_simple2complex/blob/develop/documents/02_Qt%E6%A1%86%E6%9E%B6%E3%80%81%E6%9E%B6%E6%9E%84%E3%80%81%E6%A8%A1%E5%9D%97.md)》
## 二、GUI Demo介绍
* qt_gui_simple2complex\source\002_GuiDisplay\下的GUI部分：
### 001_Window：创建一个主窗口
步骤：
[第1篇 Qt5基础（一）Qt开发环境的搭建和hello world](https://www.qter.org/portal.php?mod=view&aid=25)
效果：
---
### 002_Dialog：在主窗口之外创建一个对话框
步骤：
[第2篇 Qt5基础（二）编写Qt多窗口程序](https://www.qter.org/portal.php?mod=view&aid=27)
效果：
---
### 003_LoginDialog：登录功能
正确的用户名：demo，正确的密码：demo123456
步骤：
[第3篇 Qt5基础（三）Qt登录对话框](https://www.qter.org/portal.php?mod=view&aid=29)
效果：
---
### 004_menu_logo：添加菜单栏和图标
* 步骤：
[第4篇 Qt5基础（四）添加菜单图标（使用Qt资源文件 ）](https://www.qter.org/portal.php?mod=view&aid=31)
* 效果：
---
### 005_icon_and_layout：完整菜单栏和居中动态布局
* 步骤：
[第5篇 Qt5基础（五）Qt布局管理器](https://www.qter.org/portal.php?mod=view&aid=32)
* 效果：
---
### 006_text_file_edit：记事本编辑功能
* 步骤：
[第6篇 Qt5基础（六）实现Qt文本编辑功能](https://www.qter.org/portal.php?mod=view&aid=33)
[新建的QT项目没有menubar、statusbar或者toolbar](https://blog.csdn.net/weixin_44338712/article/details/105421811)
* 效果：
---
### 007_text_find：文本查找功能
* 步骤：
[第7篇 Qt5基础（七）实现Qt文本查找功能](https://www.qter.org/portal.php?mod=view&aid=34)
* 效果：
---
### 008_keyboard_mouse.md：键盘和鼠标功能
* 步骤：
[第9篇 Qt5基础（九）Qt键盘、鼠标事件的处理](https://www.qter.org/portal.php?mod=view&aid=36)
* 效果：
---
### 009_2D_painter.md：2D绘图
* 步骤：
[第11篇 Qt5之2D绘图（一）绘制简单图形](https://www.qter.org/portal.php?mod=view&aid=38)
* 效果：
---
### 010_image.md：图片绘制
* 步骤：
[第15篇 Qt5之2D绘图（五）绘制图片](https://www.qter.org/portal.php?mod=view&aid=42)
* 效果：
---
### 011_3D_painter：3D绘制
* 资料：
[Qt OPenGL 入门教程之五 基于QOpenGLWidget 实现3D效果](https://blog.csdn.net/p942005405/article/details/103739892)
* 效果
---
### 012_media_play：视频播放
* 步骤：
[Qt中嵌入视频并循环播放方法](https://blog.csdn.net/zhang669154/article/details/78781011)
* 效果：
---
## 三、多媒体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](https://doc.qt.io/qt-6/qtmultimedia-multimediawidgets-player-example.html) 官方示例说明
[Qt 6中的Qt Multimedia模块](https://blog.csdn.net/Qt_China/article/details/120235422)
[Qt Multimedia in Qt 6](https://www.qt.io/blog/qt-multimedia-in-qt-6) 官方multimedia模块介绍
[QT开发总结（22）——多媒体](https://www.freesion.com/article/6297243403/) 更详细的介绍
[QT AV 播放器](https://blog.csdn.net/qq_42590121/article/details/116129535) 另一个使用ffmpeg的播放器
[MorningLight / QtAV](https://gitee.com/MorningLight/QtAV) QtAV源码
[QT软件开发: 基于QT设计的完整版视频播放器、多媒体播放器(mdk-sdk)](https://blog.csdn.net/xiaolong1126626497/article/details/117557963) QtAV的更详细介绍
---
### 002_pcm_audio_play：PCM音频播放
* 步骤：
[Qt播放PCM音频（裸流）文件的两种方法](https://blog.csdn.net/caoshangpa/article/details/51224678)
[QT 用QAudio语音库实现音频信号的采集 以及发送到另一台电脑 播放](https://blog.csdn.net/hanzhen7541/article/details/98794555)
[error: no member named 'setCodec' in 'TestNamespace::QAudioFormat'](https://bugreports.qt.io/browse/QTBUG-94182)
* 效果：
* 注意事项：
只能用Qt5.15.2编译，Qt6.2.1、 Qt6.1.3 和 Qt6.0.4都有multimedia模块的bug
---
### 003_yuv_video_play：YUV视频播放
* 步骤：
[qt采用opengl显示yuv视频数据](https://blog.csdn.net/su_vast/article/details/52214642)
* 效果：
* 注意事项：
使用Qt5.15.2、Qt6.0.4和Qt6.2.3都测试通过
---
### 004_pcm_input_save_file：从麦克风保存PCM音频文件
* 步骤：
详见源码中文档和注释
* 注意事项：
使用Qt6.2.3编译，实现方式和Qt5不同
---
### 005_yuv_input_save_file：从摄像头保存YUV视频文件
* 步骤：
详见源码中文档和注释
* 注意事项：
使用Qt6.2.3编译，实现方式和Qt5不同
---
### 006_qt6-2-3_pcm_play：Qt6.2.3 PCM音频播放
* 步骤：
详见源码中文档和注释
* 注意事项：
使用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](https://gitee.com/langcai1943/qt_gui_simple2complex/blob/develop/source/003_QtExamples_Qt-6.2.3/documents/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](https://doc.qt.io/qt-6/qtexamples.html#qt-widgets)
* 其它的演示效果图参考网址：
[Qt Examples Qt实例汇总](https://www.cnblogs.com/grandyang/p/4278307.html)
[Qt Examples](http://www.wjhsh.net/MakeView660-p-11356638.html)
---
## 五、Qt C++与C语言混合编程
* qt_gui_simple2complex\source\005_Qt_with_C_language\下的Demo部分：
* 主要用于嵌入式的仿真，各种基础模块都自行实现。
* 查看项目说明文档：[qt_gui_simple2complex/ source / 005_Qt_with_C_language](https://gitee.com/langcai1943/qt_gui_simple2complex/tree/develop/source/005_Qt_with_C_language)
---
## 六、Qt ffmpeg音视频编解码
* qt_gui_simple2complex\source\006_AudioVideo_Codec_ffmpeg\下的Demo部分：
* 用于替代硬件音视频编解码器的仿真。
* 查看项目说明文档：[qt_gui_simple2complex/ source / 006_AudioVideo_Codec_ffmpeg](https://gitee.com/langcai1943/qt_gui_simple2complex/tree/develop/source/006_AudioVideo_Codec_ffmpeg)
---
## 七、用于嵌入式仿真用的音视频播放器
* qt_gui_simple2complex\source\007_Embeded_Player\下的Demo部分：
* 只使用Qt的pcm、yuv输入输出和GUI界面显示，音视频编解码库使用ffmpeg，其它封装解封装、音视频同步、播放器API部分都使用C语言自行实现，非常容易就移植到有硬件视频编解码器、硬件音频编解码器、display显示模块的嵌入式开发板。
* 查看项目说明文档：[qt_gui_simple2complex/ source / 007_Embeded_Player](https://gitee.com/langcai1943/qt_gui_simple2complex/tree/develop/source/007_Embeded_Player)
---