本篇目的：讀者可善用 QT 的多頁面容器、以及 Day 12 的 layout 物件，做出完成度高的使用者介面

前言

在 day 12 中我們有提到 QLayout 的使用方式，這些 layout 元件可以讓我們達成單行或單列的布局。但我們使用的軟體通常是由多個物件整合成一區塊、再將這些區塊布局於視窗之中。今天 day 13 的文章中會介紹可以切換頁面的布局元件、以及可以縮放的布局元件，讓我們可以建構出功能完整的視窗頁面。

多頁面的容器介紹

這裡介紹的布局元件均有多頁面，可以將不同功能的物件放置到對應的頁面去，例如設定 SPEC 的頁面、輸出結果的頁面等。

QTabWidget 介紹

特點：帶有水平方向標籤 (tab) 的多頁面布局元件，附有 tab 可以讓使用者切換頁面
QTabWidget 上面就是標籤，因此使用者會很明確的知道頁面可以切換。適合會頻繁切換頁面的情境，例如讓使用者檢視輸出成果等。

QTabWidget 的頁面切換可以直接使用，不須在 python 腳本中另外設定

增加/減少頁面

在 QTabWidget 上按右鍵，並選擇"插入頁面”。QToolBox 與 QStackWidget 都是使用相同的方式加入頁面。

修改各分頁的顯示與物件名稱

到屬性編輯器內即可修改對應屬性，QToolBox 與 QStackWidget 也是類似的方式。

• currentTabText: 顯示在 Tab 上的名稱

• currentTabName: 在 Python 內呼叫的名稱

加入排版

與 day 12 的 “將佈局導入到整個視窗中“ 相同，當我們要將排版導入到某物件中，需先選擇該物件，再選擇上面的布局方式即可將布局加入到物件之中。QToolBox 與 QStackWidget 也是相同的方式。

QToolBox 介紹

特點：帶有垂直方向標籤 (tab) 的多頁面布局元件，就好像分層的工具箱。
QToolBox 的使用、設定與 QTabWidget 非常類似。 QTabWidget 為橫向分布，適合較大面積、整個畫面內元件都需要切換的狀況，例如展示輸出表格；而 QToolBox 為直向分布，適合用於較小面積、狹長區塊的畫面切換，例如下圖的 SPEC 設定。

QToolBox 的頁面切換可以直接使用，不須在 python 腳本中另外設定

QStackWidget 介紹

特點：不帶有任何標籤、隱藏式的多頁面布局元件。QStackWidget 需要在 Python 腳本中另外設定頁面切換與對應物件，使用者才能切換頁面。

與 QTabWidget 、 QToolBox 的比較

QTabWidget 、 QToolBox 帶有明顯的標籤，使用者可以直接切換頁面。且它們都有明顯的物件外框，當使用者切換頁面時，還是覺得自己在單一功能區內，只是在不同子頁面中切換。

QStackWidget 實際使用時不帶有任何標籤、無明顯外框、且需要我們另外設定才能切換頁面。當使用者切換頁面時因為沒有物件外框，且切換頁面後幾乎沒有與原始頁面相同的要素，因此使用者會有強烈的"切換到其他功能"感受。

QStackWidget 因為有最強的切換感，因此適合做為不同獨立功能的頁面切換。例如某專案內有讀檔、設定、輸出、繪圖、about 頁面，這 5 個不同的功能就適合用 QStackWidget 放置於不同頁面上。

如何在 QT designer 中切換 QStackWidget 的頁面

按下 UI 畫面中右上角的箭頭即可切換頁面

應用例：QStackWidget 如何搭配 QToolBar 切換頁面

1. 先在 QT designer 中加入 QToolBar：在物件指示器的 QMainWindow 物件上按右鍵，並選擇 ”新增工具列”，就會看到 QToolBar

2. 在動作編輯器中設定動作按鈕：在動作編輯器中按下右鍵並選擇 ”新增……”，即會跳出動作按鈕設定視窗。動作按鈕同樣需要設定顯示名稱與物件名稱

   

3. 把動作按鈕加入 QToolBar 中：直接在動作編輯器中拖曳動作按鈕到 QToolBar 中

   

4. 設定 signal & slot：在 Python 腳本中使用 triggered.connect() 即可將切換頁面功能與按鈕連接在一起。另外 signal & slot 在 day 14~15 會有更詳細的說明

   # myWin: UI 的對應 class，所有 UI 元件都是他的 property
   # setCurrentWidget(分頁物件名稱)可以切換到指定頁面
   
   myWin.action_to_p1.triggered.connect(lambda:myWin.stackedWidget.setCurrentWidget(myWin.page))
   

單頁面的容器介紹

以下介紹的排版元件皆無切換畫面的功能，主要功能為將不同種類、但對應到同一目的之元件整到同一區塊內。

QGroupBox 介紹

特點：一個帶有標題與外框的排版元件，可以將物件放入 QGroupBox 內並套用排版。

雖然複合使用 QHBoxLayout / QVBoxLayout 也可以達到排版的效果，但 QGroupBox 有個外框與標題，可以給使用者更強的"這些物件對應到同一功能”提示，因此適合用於整理多個對應到單一目的的元件，例如下圖的 SPEC 顯示區。

QScrollArea 介紹

特點：一個帶有捲動軸的排版元件。當物件很多超出可視範圍時，會自動產生捲動軸讓使用者拉動

QScrollArea 因為可以自動產生捲動軸，因此很適合用於會在 Python 腳本中增加物件、且增加數量不一定的地方。例如當讀取 wafer 檢測檔案後，設定一個 QScrollArea 並將多個 QCheckBox 放入，讓使用者可以選擇想計算之 wafer。

關於如何在程式執行時動態生成元件到 QScrollArea 中，且讓腳本可以管理、讀取這些生成元件的狀態，在 Day 25 會有詳細的說明

QLine 介紹

特點：很單純的一條直線或橫線，用來做不同功能區塊之間、視覺上的區隔。

加入方式為在 QT designer 中選擇 Vertical Line 或 Horizontal Line，並將其拖曳到需求位置即可。

To be continued →

UI 外觀已架構完成。我們即將進入本專欄的第三部分 "模組化的開發方式與模組連結“。我們會討論一個模組、整個專案的架構，以及如何將這些模組串在一起