Qt UI界面美化教程1：【“飛揚青雲” Qt精美控件】使用教程1

前言

相信很多小夥伴在使用Qt Widget的過程中都會遇到一個問題，開發出來的界面，醜！醜！醜！當然Qt做界面美化可以用到QSS，需要對前端知識有一定了解，後續本套教程將會做講解。

本篇文章，我們直接站在巨人（大佬飛揚青雲）的肩膀上，使用他開發好的163款自定義控件，請大家一定支持他，去給他小心心，他的個人主頁：

碼雲：https://gitee.com/feiyangqingyun
github：https://github.com/feiyangqingyun
CSDN：https://me.csdn.net/feiyangqingyun

本篇文章只講述如何在 QtDesigner 安裝這些控件。

控件預覽

1. 控件下載

下載地址：https://github.com/feiyangqingyun/qucsdk
進入地址，下載到本地：

進行解壓：

內容預覽：

現在控件SDK我們下載好了，我們怎麼使用呢？來，我們一步一步來：

2. sdkdemo演示：

2.2 工程預覽：

readme.txt:

INCLUDEPATH += $$PWD/sdk

CONFIG(debug, debug|release){
LIBS += -L$$PWD/sdk/ -lqucd
} else {
LIBS += -L$$PWD/sdk/ -lquc
}

2.2 sdkdemo演示

用Qt打開 sdkdemo.pro

1. 選擇編譯器爲 “MSVC2017_32bit”:
   
2. 直接編譯“Ctrl+B”，會報錯，是正常的，因爲我們是用的MSVC方式進行編譯
   
3. 打開工程sdk目錄：
   
4. 複製相關文件到路徑下sdk目錄下 （注意我們此時使用MSVC2017_32bit編譯的）：
   
   
   
5. 再次編譯工程，並運行，你會發現成功構建並運行了：
6. 我們再打開widget.ui試試：
   

3. 爲QtDesigner安裝控件

這裏要注意，你的Qt安裝了多少個版本的編譯器，就有多少個QtDesigner：

3.1 我們先爲MSVC2017_32bit 版本的 qtdesigner 添加控件：

1. 直接打開 “Designer 5.14.2 (MSVC 2017 32-bit)” 看看效果：
   
2. 來到 “Designer 5.14.2 (MSVC 2017 32-bit)” 文件位置：
   
   
3. 返回到上一級目錄：
   
4. 來到路徑 “msvc2017\plugins\designer”下：
   
5. 複製控件到指定路徑下：
   
6. 再次打開設計器，控件已經添加進來了。
   
7. 使用控件進行設計：
   

3.2 再次打開sdkdemo工程ui文件，發現設計器裏還是沒有？別怕，請看

1.再次打開 sdkdemo.pro，然後雙擊ui文件：

2.原來是此 designer （從 qt creator 打開ui文件）非彼 designer（直接用 “Designer 5.14.2 (MSVC 2017 32-bit)” 打開ui文件）

3.3 QtDesigner 各版本路徑對比：

QT Creator打開的designer路徑：

D:\Program_Software\Qt5.14.2\Tools\QtCreator\bin\plugins\designer

直接用圖標打開的designer路徑：

D:\Program_Software\Qt5.14.2\5.14.2\msvc2017\plugins\designer

3.4 複製控件到QtCreator使用的designer路徑下：

重新打開工程，雙擊 ui 文件：



如果此處沒有出現，請重啓電腦試試。

3.5 爲其他版本的 qtdesigner 添加控件：

• MSVC2017_64
  
• MSVC2015_64
  
• MINGW730_64
  
• MINGW730_32
  

其它版本的控件添加方法一致：