layout布局_PyQt5 布局淺析

PyQt5是Python環境下用來開發UI界面的一個包。它容易上手，對初學者友好，并且擁有豐富的函數庫，可以實作大部分桌面應用的開發需求，且支援QSS語言，能夠對界面風格做個性化調整。總體來說，PyQt5是一款開發效率極高的UI架構。這篇文章從零開始，教你搭建一個屬于自己的桌面應用。

【GitHub項目位址】：https://github.com/luochang212/pyqt5-demo

建立第一個視窗

一般來說，桌面應用都以視窗(window)形式呈現。是以，要搭建桌面應用，首先要建立視窗。

下面這段代碼建立了一個空的視窗。

from 
           

blank window

這段代碼僅僅設定了視窗的标題和大小。下一步，我們要往這個空的視窗裡添加部件(widget). 為了規範性，我們在Window類裡建立一個函數initUI, 然後在initUI裡為視窗添加部件。

為視窗添加部件

下面這段代碼為視窗添加了一個按鈕(QPushButton).

from 
           

first widget

但是我們發現，如果沒有添加任何布局，我們建立的按鈕(self.btn), 永遠被放置在視窗的左上角。即使我們可以用move函數移動它，排版作用也非常有限。是以我們需要為視窗添加布局。

為視窗添加布局

PyQt5的布局(layout)有很多，比較常見的有QBoxLayout, QGridLayout, QFormLayout. 但我要說，後兩種布局都有其局限性，一般隻适用于特殊場景，但QBoxLayout卻是一招打遍天下無敵手。大部分情況下，QBoxLayout都可以替代其他兩種布局方式。

QBoxLayout的布局思想是：通過定義部件之間的上下左右關系來定義空間結構。是以它有兩個函數QHBoxLayout和QVBoxLayout, 函數名裡的H和V分别對應英文單詞horizontal和vertical, 代表水準和豎直。是以，QHBoxLayout代表橫向排版，QVBoxLayout表示縱向排版。

下面這段代碼是一個QHBoxLayout的例子。為了簡潔，重複的代碼就不放了，這裡隻貼initUI的部分。

def initUI(self):
        
        # create new buttons
        self.btn_left = QPushButton('left', self)
        self.btn_right = QPushButton('right', self)


        # setting up a layout
        main_layout = QHBoxLayout()
        main_layout.addWidget(self.btn_left)
        main_layout.addWidget(self.btn_right)


        # create the central widget
        main_widget = QWidget()
        main_widget.setLayout(main_layout)
        self.setCentralWidget(main_widget)
           

first layout

可以看出，建立一個布局隻需要三步。

• 建立部件(widget).
• 建立布局(layout), 并将部件依次添加到布局中。
• 建立中心部件(central widget), 并為中心部件添加布局。

要了解這三步，首先要了解什麼是中心部件(central widget)。中心部件和按鈕部件(QPushButton)雖然都被稱作部件(widget), 但它倆是完全不同的。與按鈕部件相比，中心部件沒有固定的功能和形态，它就像畫布，本身是空白的，是以你無法直接在視窗中看到它。它的作用在于通過調整它的布局屬性(setLayout)來對其他部件排版。

中心部件，布局和部件之間的邏輯關系如下。

& btn_right （部件）
           

布局進階之部件縮放

布局定義了部件之間的位置關系，但有了布局還不夠，我們還需要定義部件之間的比例關系。這需要用到setStretch函數。

下面這段代碼調整兩個按鈕之間的比例為1:3。

def initUI(self):
        
        # create a new button
        self.btn_left = QPushButton('left', self)
        self.btn_right = QPushButton('right', self)


        # setting up a layout
        main_layout = QHBoxLayout()
        main_layout.addWidget(self.btn_left)
        main_layout.addWidget(self.btn_right)


        # set stretch for main layout
        main_layout.setStretch(0, 1)
        main_layout.setStretch(1, 3)


        # create the central widget
        main_widget = QWidget()
        main_widget.setLayout(main_layout)
        self.setCentralWidget(main_widget)
           

layout stretch

上述代碼隻在原基礎上加了兩行。

• main_layout.setStretch(0, 1)表示0号部件的拉伸設定為1
• main_layout.setStretch(1, 3)`表示1号部件的拉伸設定為3

由此，兩個部件之間的比例關系被定義為1：3。

布局進階之部件疊代

在PyQt5裡，類似中心部件這樣的用于布局的部件可以多次疊代。這意味着你可以往布局部件裡的布局部件裡加布局部件。

下面這段代碼闡明了這種疊代結構。

# 建立孫子部件
sub_sub_Layout = QHBoxLayout()
sub_sub_widget = QWidget()
sub_sub_widget.setLayout(sub_sub_Layout)

# 建立兒子部件
sub_Layout = QHBoxLayout()
sub_Layout.addWidget(sub_sub_widget)  # 兒子認孫子
sub_widget = QWidget()
sub_widget.setLayout(sub_Layout)

# 建立父親部件
main_layout = QHBoxLayout()
main_layout.addWidget(sub_widget)  # 父親認兒子
main_widget = QWidget()
main_widget.setLayout(main_layout)
self.setCentralWidget(main_widget)
           

制作一個布局靈活的UI界面

學會了以上這些方法，再配合一些奇技淫巧，比如加空白的占位部件addStretch(int), 你基本上就可以随心所欲地控制布局了。

下面這段代碼制作了一個有意思的桌面應用：誇誇機器人。

from 
           

這是我做的誇誇機器人，給它取的英文名叫praise me please. 輸入姓名、性别和你要它誇你啥，然後點praise me, 他就會開始随機誇你。哈哈哈我覺得好智障啊，但我喜歡！

praise me please