在PyQt5中，制作程序UI界面，一般可以通過UI制作工具和純代碼編寫兩種方式來實現。

請點擊右上角“關注”按鈕關注我們喲：跟着木辛老師學習Python編程知識，變身快樂的編程達人吧~

同學們好呀！今天，木辛老師将會帶着大家開始學習Qt Designer這個工具的使用。

Qt Designer是什麼

Qt Designer，是一個強大、靈活的可視化GUI設計工具，可以幫助我們提高開發PyQt程序的效率。

Qt Designer是專門用來制作PyQt程序中UI界面的工具，它生産的UI界面以.ui後綴結尾。

這個.ui文件使用起來也很簡單，咱們通過命令的方式即可以将.ui轉換成.py格式的文件，并被其他的Python文件引用。

當然，在我們的課程裡，我們會借助PyCharm這個強大的開發環境，實現自動轉換的功能。

Qt Designer符合MVC（模型-視圖-控制器）設計模式，做到了顯示邏輯和業務邏輯分離的目的。

它的特點大緻有如下幾條：

1. 使用簡單，通過拖拽和點擊就可以完成複雜的界面，還可以随時預覽效果
2. 轉換方便，通過pyuic5将Qt Designer生成的用戶界面文件.ui轉換為.py文件，然後将.py文件引入到自定義Python代碼中。

Qt Designer默認安裝路徑在：/Users/my_home/Qt5.12.0/5.12.0/clang_64/bin/ ，雙擊Designer即可以打開

打開Qt Designer

我們通過PyCharm的擴展工具的方式啟動Qt Designer。

所以呢，我們需要先使用PyCharm安裝一個擴展插件：

打開PyCharm（還沒有安裝PyCharm的小夥伴可以閱讀木辛老師之前的文章學習：《Python小課堂之木辛老師特别講解：安裝和配置開發工具之PyCharm》）

使用快捷鍵：Command ，打開PyCharm的屬性設置頁面；在搜索框中輸入：External Tools

點擊“External Tools” 打開擴展插件工具，并點擊下方的“ ”添加

按照圖示，填寫對應的值。

特别提示：

1. Name 和 Description 可以填寫任意字符串，隻有能明白意思即可
2. 在Tool Settings中，Program這裡就填寫咱們之前确定的Designer.app的絕對路徑
3. 而Working directory 則填寫你本地的Qt的路徑：/Users/my_home/Qt5.12.0/5.12.0/clang_64/bin
4. 其他選項保持默認
5. 點擊“OK”按鈕保持設置即可

此時，咱們在項目的任意文件右鍵點擊，選擇“External Tools”的子菜單“Qt Designer”選項，即可以打開Designer.app了。

請記住，這裡的“Qt Designer”是你剛才設置的時候填寫的Name字段的值喲！

現在，咱們成功的打開了Qt Designer

新建主窗口

當我們打開Qt Designer之後，首先彈出來的是新建窗體頁面

如上圖所示，這個頁面主要是讓咱們選擇使用那個模闆創建頁面。一般情況下，最常用的就是Widget（通用窗口）和Main Window（主窗口）。

我們先選擇“Main Window”體驗一下吧。

選擇Main Window，創建一個主窗口

這個主窗口默認的尺寸是800x600格式的，我們可以通過區域4的屬性編輯器對窗口的屬性進行設置。

區域組成

1. 區域1 是Designer的工具箱部分，其中提供了很多空間，比如列表、輸入框、單選框等等。我們在使用的時候，可以直接用鼠标将對應控件拖拽到主窗口中。
2. 區域2就是我們之前提到的主窗口，這個是整個軟件UI設計的主戰場
3. 區域3是對象查看器，在這裡可以查看主窗口中放置的所有對象的列表
4. 區域4中可以對主窗口的屬性進行編輯，比如可以設置窗口的長或者是寬的值

在這裡，我們稍微多少一句，介紹下屬性編輯器中部分常用屬性的含義

1. objectName 控件對象的名稱，程序中通過這個字段找到對應控件
2. geomerty 相對坐标系，這個值控制着控件所在其父控件的位置
3. sizePolicy 控件大小策略
4. minimumSize 控件的最小高度、寬度
5. maximumSize 控件的最大寬度、高度（在這裡木辛老師想給大家留一個思考題：如何固定窗口或者控件的大小？）
6. font 字體
7. cursor 光标
8. windowTitle 窗口标題
9. windowIcon/icon 窗口圖标/控件圖标
10. iconSize 圖标大小
11. toolTip 提示信息
12. statusTip 任務欄提示信息
13. text 控件文本
14. shortcut 快捷鍵

我們将剛才創建的主窗口保存，姑且就叫它pyqt_demo_01吧。Designer會自動給他加入後綴.ui。

查看UI文件

我們找到保存的文件，并用文本編輯器打開，可以看到這個.ui文件的内容是按照XML（可擴展标記語言）格式編寫的。

我們剛才悄悄的在主窗口中放置了一個pushbutton控件，它在主窗口中的位置是：（280，110），尺寸為114x32 px。

那我們可以看到在UI文件中确實存在描述這個button的邏輯

到此為止，我們已經認識了如何通過PyCharm打開Qt Designer工具，并進行窗口的創建和控件的布局了。

好了，今天的課程就先到這裡吧，我們明天會繼續跟着Qt Designer工具的步伐深入了解PyQt的開發，請大家一定要持續關注喲！

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部