从零开始学习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顯示模塊的嵌入式開發板。
總結
以上是生活随笔為你收集整理的从零开始学习Qt GUI编程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【收集】Python 微优化
- 下一篇： Linux的sort命令