前言
在第一支 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 唷～
比較特別的：
- Dock Widget 則是可以單獨拖曳並且自由放置黏在邊角的視窗，例如 Qt Designer 中的側邊欄就是用 Dock Widget 實作的。
- MDI Area 就是多文件視窗區域，類似 Photoshop 的文件區，或是 Qt Designer 中的畫面編輯區也是 MDI Area。
設計好後按 [Form] > [Preview] 可以預覽自己的設計成果～
彈性排列規劃
不過此時物件的位置及大小皆是一固定值，若想要隨著主畫面大小改變而相應改變的話就要使用響應式設計（RWD）。此時就得提到 Qt 內建的排列規則，如下圖橘色框所示。
使用方式大致有兩種情境：
- 排列選定的物件們
先選擇欲排列的物件們，然後按下想要的彈性排列方式，就會發現物件們被一個紅色框綁定，並且右邊圖層上同時會看到設計程式自動為物件們新增一個排列（Layouts）根項目。 - 為容器（Containers）設定排列方式
點選容器型物件後，直接點選想要的彈性排列方式，其包含的所有子物件們就會自動排列對齊。
其中比較有趣的是拖曳 Bar（Splitter），能做出可調整大小的分割視窗畫面。
如果反悔想換排列方式時建議先按「打散」按鈕重置排列方式，大致排好新位置後再選擇新的排列方式，這樣會快上許多。另外如果發現某些物件在畫面編輯區中完全點選不到時，請善用右上角的圖層樹狀圖。
練習
試著做了一個計算機的界面～
