用QT Designer 製作Maya工具UI

來自專欄 TechAnim技術分享

這不是一篇教程，主要是為了介紹一下在maya中使用QT Designer來製作UI（這裡我使用maya 自帶的 Pyside模塊，也可以用PyQt, 區別不大 ），針對人群主要是有python基礎，剛開始接觸maya工具的製作，或者感興趣的朋友，專業的tool programmer 請走開。

QT Designer 是與QT配套的界面設計工具(Qt (software) - Wikipedia)，相比用maya command來製作工具UI，QT Designer 提供了更方便的可視化UI設計方法，可以通過直接的拖拽， 移動，來調整UI界面窗口， 按鍵的大小和位置。

QT Designer 的運行文件可以在這裡找到：

C:Program FilesAutodeskMaya2018indesigner.exe

雙擊打開app

點擊新建Main Window後，會得到一個空白的窗口，這個窗口就工具UI的主界面。

在QT Designer 住界面的左側， 會有一系列已經定義好的widget（button, checkbox, list, layout 等等統稱為widget, 中文翻譯叫「小部件」， 這裡我就不詳細介紹，可以自己探索看看），通過拖拽，可以將任意的widget放到已建空白視窗的任意位置並且調整大小（視頻）

這裡有幾個窗口得說明一下：

Object Inspector，類似maya里的outliner, 這裡清楚的顯示了當前UI文件里的所有widget以及它們的層級，也方便選擇需要的widget。

Property Editor, 修改所選擇widget的屬性，有許多屬性可以設置，可以自行探索。

其中最重要的是 objectName, 可以對所選widget重新命名，這個名稱將會在代碼中調用，建立widget和function 的關聯(創建slot,後面會詳細講)。

將建立好的文件儲存到任意的文件夾，這裡我命名為 ui_test.ui

接下來就是在maya的python腳本編輯器里調用這個 .ui 文件。

調用 .ui 文件有兩種方式，一種是先將 .ui 文件convert成 python 腳本文件, 然後調用；也可以直接導入 .ui文件，這裡我傾向使用後者。至於第一種方法，網上已有教程，我就不講了。

首先導入pyside相關模塊（注意在maya2017之前是支持pyside, 從 2017開始支持pyside2）

接著創建導入的 .ui 文件的function

然後創建類，初始化並執行

於是在Maya里打開了在QT Designer里建立好的工具窗口

對比QT Designer 的界面

如果需要任何的UI界面的調整和改動，只需要在QT Desigher 里調整，再覆蓋之前 .ui 文件即可。

主意此時點擊widget，不會有任何反應，因為widget並沒有對應的function。

接下來是如何建立wedgit與function的關係(創建slot)

先為每個widget創建function，為舉例我直接用widget名稱來為function命名

接下來建立聯繫。

首先說明一下一些定義：

在QT裡面，對widget的每一次「操作」稱為signal, 不同的widget有不同signal，signal也不是唯一的，不同的signal可以讓不同「操作」有不同的影響。

具體的signal可以在文檔中搜索到，比如：

QAbstractButton - PySide v1.0.7 documentation?

srinikom.github.io

創建widget與function的過程，叫創建 slot, 基本的代碼形式為:

widget.signal.connect(function)

widget 指代操作的ui (比如： 按鍵，checkbox, 滑條), widget 的名稱既是上面介紹的QT Designer Property Editor 的 objectName（為了方便寫代碼，objectName的重命名就變得很重要）

signal 指代操作的信號（比如：點擊， 長按， 拖拽）

function 這裡就是操作的內容（比如： 創建一個幾何體， print一行文字，創建一個關鍵幀 ）

connect 既是把 widget , signal, 和 function 鏈接起來。

常見的widget 的 signal有：

Button（push button, tool button, radio button）:

CheckBox:

List:

接下來將每個widget分別創建slot， 為了代碼的清晰，我已經將每一個widget在QT Designer 里進行了重命名， 分別為 Btn_A, Btn_B, Btn_C, Btn_D, Ck1, Ck2, List1（參考前面介紹的 Property Editor窗口）, 於是有了

代碼：

注意代碼裡面 addItem(), clear()，setChecked() 一類的出現，這些是QT 為widget已定義好的可以直接使用的function.

具體的內容可以通過搜索類似「pyside qlistwidget function」 找到文檔並詳細查看

此時就有

https://www.zhihu.com/video/964688714592718848

腳本和UI文件我放這裡了，直接解壓到D盤，在Maya 腳本編輯器直接運行 QTLearn.py既可以打開。

https://www.dropbox.com/s/8dwecq3xntes2sq/QTLearn.rar?dl=0?

www.dropbox.com

推薦閱讀：