用 Qt Designer 來設計 PyQt GUI 應用程式界面

前言

人要衣裝,佛要金裝,App 要 GUI 裝。從 Skeuomorphism 擬物化設計到最近很流行的 Flat 扁平式設計,至始至終都只是在幫助使用者更順暢的滿足各種需求,界面的重點也逐漸從炫目的外觀轉變成實質的內容與 UI/UX 使用者體驗。那麼不囉嗦,就開始正文吧~

Qt Designer 界面

界面長的跟 Visual Studio 有點像,左邊工具箱有各種可用的物件(容器、輸入輸出視窗、互動按鈕等等);中間是主設計所見即所得畫面;而右邊則包含物件圖層樹狀圖、物件的屬性視窗、及物件的事件編輯視窗。

將左邊的物件一一拖曳(Drag & Drop)到中間的畫面編輯區就可以輕鬆製作界面啦!點選單一物件後在右側的物件屬性畫面中可更改其屬性,其中最重要的就是objectName,我們必須使用此名稱以在 Python 主程式中取用特定物件。

物件分類

可以看到工具箱中又把物件們分類的非常仔細,底下分別介紹下各自的區別及用途:

  • Layouts(排列方式根項目)建議使用下一段介紹的方式讓程式自動添加。
  • Spacers(留白擴張空間)分為兩個方向,常見的 Menu Bar 工具列就會在中間放個水平 Spacer,將按鈕們集中在兩側。
  • Buttons(按鈕),這應該不需要解釋。
  • Item Views/Widgets(項目顯示工具)初學者建議使用Widgets系列較容易上手;Views 系列用到了 MVC 架構,必須為視圖(View)綁定模型(Model)才能顯示資料內容。
  • Containers(容器)可添加物件到這裡面,個人常用的是 Group Box、及 Tab Widget;Frame 跟 Widget 的差別在於 Frame 會有框線,這兩個可用於綁定一些設置,例如想同時設置為啟用或禁用。Dock Widget 是可以挪來挪去的工具列,Qt Designer 界面中的兩側就使用了大量的 Dock Widget。
  • Input Widgets(輸入)文字/數字輸入框、下拉式選單(Combo Box)等,設置為 Read-Only 也可以用來當成輸出來顯示。
  • Display(顯示)文字標籤(Label)、進度條(Progress Bar)等。
建議多看看物件屬性中有哪些可調整的項目,以做出心目中的 UI 唷~

設計好後按 [Form] > [Preview] 可以預覽自己的設計成果~

彈性排列規劃

不過此時物件的位置及大小皆是一固定值,若想要隨著主畫面大小改變而相應改變的話就要使用響應式設計(RWD)。此時就得提到 Qt 內建的排列規則,如下圖橘色框所示。

使用方式大致有兩種情境:

  1. 排列選定的物件們
    先選擇欲排列的物件們,然後按下想要的彈性排列方式,就會發現物件們被一個紅色框綁定,並且右邊圖層上同時會看到設計程式自動為物件們新增一個排列(Layouts)根項目。
  2. 為容器(Containers)設定排列方式
    點選容器型物件後,直接點選想要的彈性排列方式,其包含的所有子物件們就會自動排列對齊。

比較好玩的是拖曳 Bar(Splitter),能做出可調整大小的分割視窗畫面。

如果反悔想換排列方式時建議先按「打散」按鈕重置排列方式,大致排好新位置後再選擇新的排列方式,這樣會快上許多。另外如果發現某些物件在畫面編輯區中完全點選不到時,請善用右上角的圖層樹狀圖。

練習

試著做了一個計算機的界面~

 

下篇來製作互動功能~

 

References

  1. PyQt5 tutorial