本篇目的：讀者可善用 QT 的 layout 功能做出縮放自如的畫面，且能為 UI 中各部件設定可辨認之名稱

前言

在 Day 9 中我們知道如何使用 QT designer 將元件加入到 UI 中，但我們沒有作以下2個設定：

• UI 元件沒有任何的布局規畫：若使用者的螢幕解析度不同或是拉伸了 UI 介面，整個 UI 元件的比例就會跑掉

  

• 沒有設定 UI 元件的名稱：在後續要為各元件設定功能時，只能從 pushButton_1 、pushButton_2 ……的茫茫大海中找出對應的元件

在本篇中，我們會使用 QLayout 、QSpacerItem 等設定佈局，讓 UI 畫面縮放時元件佈局比例不會改變。且會提供設定 UI 元件名稱的方式與原則，讓 UI 從裡到外都是整齊有條理的。

使用 QLayout 排列 UI 元件

將 UI 元件放入 QHBoxLayout / QVBoxLayout 內

BoxLayout 是一個單一方向的 layout 物件，在 QT 中有兩個方向：垂直的 QVBoxLayout 與水平的 QHBoxLayout 可供選擇。這些物件在 QT designer 中的使用也很簡單，有以下2個方式：

• 先加入 BoxLayout 再放入元件：
  將元件拖曳進 BoxLayout，並確定物件在 BoxLayout 內(只有 BoxLayout 是灰的)即可。另外拖曳時若看到藍線代表物件會在藍線顯示的那一側，如下圖所示，這樣可以確保物件的排列。

  

• 多選元件後選擇對應 layout：
  按 ctrl 後多選元件，然後按下需要的 layout 方式即可

  

使用 QSpacerItem 為佈局留白

距離會產生美感，在 BoxLayout 加入 QSpacerItem 可以讓 UI 物件與邊框間有緩衝空間。加入 QSpacerItem 的方式也跟上面”放入元件到 BoxLayout”的方式相同，拖曳對應方向的 QSpacerItem 到需要的 BoxLayout 內即可。

將 UI 元件放入 QGridLayout 內

QGridLayout 可以讓我們的 UI 元件為格子狀排列，如下圖所示。使用與加入物件的方式也跟上面的 Layout 元件相同。

設定 QLayout 內的各元件比例

將元件放入 layout 物件的最大好處是無論視窗大小，物件之間的比例都可以維持。而物件之間的比例就是依靠 layoutStrech 決定。layoutStrech 的設定在右側的屬性編輯器中，會以 0,0,0 的樣子呈現，數字個數與物件數相同 ( QSpacerItem 也是物件)。

修改 layoutStrech 內的數字即可修改物件之間的比例。如下圖所示，當比例改成 1,1,2 之後，3 個物件的長度也是 1,1,2 。

移動 BoxLayout 的方法

從右側的物件指示器選擇物件，就可以快速的選擇與移動。

將佈局導入到整個視窗中

若要讓視窗縮放時，裡面的物件仍保持比例，就需要將"整個畫面"都套用特定 layout。

在 QT 中，UI 物件間有明顯的從屬關係，物件之間的從屬關係可以從右側的物件指示器看出。以下圖所示，可以看到這5個 layout 都從屬於 centralwidget，而 centralwidget 又從屬於 MainWindow，是 MainWindow 用來管理下面階層的物件。

也因此若要讓該頁面加上布局，必須在右側選擇 centralwidget ，再按下需要的方向才能在管理畫面的物件加入 layout。

應用例：當 QLabel 內容長度不一時，畫面仍保持相同比例

當我們在製作設定頁面時，字串內容長短可能會影響其餘物件的位置。但我們可以用一些手法讓畫面的顯示對齊，例如下圖無論中間字串長短，左右兩側的 QLabel 與 QPushButton 大小均保持一致。

要達成這個目的，我們可以先將 layoutStrech 中間對應到的比例設的很大 ，例如 1,30,1 之類的，這個目的便是讓中間的物件直接伸展到最大，避免因內容更動導致比例改變。

UI 元件的命名原則

當 UI 元件建立時，QT designer 會自動為物件產生一個名稱。這個名稱會顯示在 objectName 這個欄位，命名方式為 物件形式_流水號，例如 label_1 等。這樣的命名若後續需要在 Python 環境中調用時，我們會完全無法知道這個物件對應的用途。

因此若該物件後續會在 Python 腳本中調用，我們最好為物件取一個容易辨認的名稱。物件的命名法可以依照 物件形式_功用 這樣子的形式設定，例如若為開始計算的按鈕，可以命名為 btn_start_cal 。另外修改 objectName 的內容即可修改物件的名稱。

若該物件後續不會在 Python 腳本中呼叫，就不用花心思改名字了，例如不會修改內容的 QLabel

To be continued →

一個統計良率用的程式會有設定、載入檔案、計算設定等功能，我們須利用 QT designer 內的分區/分頁物件讓每個功能都有獨立區塊。