PySide #4: Layout使用，讓GUI更加整齊又富有彈性

Every UI need a Layout

DekBan

Published in

Bucketing

5 min readMay 25, 2020

Photo by Clark Van Der Beken on Unsplash

沒有Layout的世界是脆弱的，看似整齊的表面之下，隱藏著極為脆弱或是僵化的體制與腐敗，可謂是金玉其外敗絮其內。Layout讓UI再擁有整齊的架構之下，同時保有足夠的彈性。

本篇會介紹各種PySide2 中的Layout，包括 QgridLayout, QVBoxLayout, QHBoxLayout, 以及 QFormLayout.

關於Layout

在Qt中的Layout包含了常見的各種類型，包括 vertical, horizontal, grid, 以及form layout. 這邊會一一向大家介紹。

在此之前，先和大家分享一點小技巧，使用layout的大方向大致上會分為以下幾點：

小型多個獨立物件，是VBox 與 HBox 的最愛
複雜群組、不規則形狀，肯定是該用Grid
最外層，請用Grid的糖衣
最後，form除了非常整齊的輸入表格外，能少用就少用

VBoxLayout / HBoxLayout

讓我們由最簡單、最基礎的開始吧。

我利用前幾篇所建構的MainWindow class來做Layout的擴充，加入一個method(方法)來新建VBoxLayout以及HBoxLayout，同時用GridLayout為主Layout來包裹另外兩個Layout。

Source

GridLayout

上面可以看到我用 addItem()方法將兩個Layout加入GridLayout之中，這邊提一下，加入Layout需使用 addItem ，而加入物件則需使用 addWidget 方法，如我下方VBoxLayout及HBoxLayout所使用。

權重

GridLayout好用的地方便在於彈性極高，可以透過網格的方式定位，同時支援物件於行列的權重，讓物件可以以不同的比例做呈現。

以下我修改兩種GridLayout的權重比例

Left Pic: 
g_layout.addItem(v_layout, 0, 0, 1, 1)
g_layout.addItem(h_layout, 0, 1, 1, 1)Right Pic: 
g_layout.addItem(v_layout, 0, 0, 2, 1)
g_layout.addItem(h_layout, 0, 1, 1, 1)

FormLayout

我們再加入 build_f_layout方法來建立FormLayout物件，如下

@staticmethod
def build_form_layout():
    hello_btn = QPushButton('Hello')
    work_btn = QPushButton('Working')
    play_btn = QPushButton('Playing')
    sleep_btn = QPushButton('Sleeping')
    hello_line = QLineEdit()
    work_line = QLineEdit()
    play_line = QLineEdit()
    sleep_line = QLineEdit()

    f_layout = QFormLayout()
    f_layout.addRow(hello_btn, hello_line)
    f_layout.addRow(work_btn, work_line)
    f_layout.addRow(play_btn, play_line)
    f_layout.addRow(sleep_btn, sleep_line)
    
    return f_layout

並加入GridLayout中，同時我稍微調整了一下權重

f_layout = self.build_f_layout()

g_layout.addItem(v_layout, 1, 0, 1, 1)
g_layout.addItem(h_layout, 0, 0, 1, 2)
g_layout.addItem(f_layout, 1, 1, 1, 1)