PyQt5 筆記（01）：嵌套佈局

 

PyQt5 有四種佈局：水平（QHBoxLayout）、豎直（QVBoxLayout）、網格（QGridLayout）、表單（QFormLayout）
在窗體中單一的佈局應該不難，但如果比較複雜的佈局，通常涉及到佈局的嵌套，這就頭疼了。

本文的四個知識點：
1. 佈局不能直接嵌套（若是我錯了，歡迎指正！）
2. 內層的佈局必須先「附着」在一個空 QWidget 上
3. 而後把這個「承載」着內層佈局的空部件添加至外層佈局
4. 最後，別忘記把全局佈局「附着」到窗體本尊

 

0. 先看效果圖

下面對佈局進行分析

 

1. 全局佈局分析

全局佈局使用了一個水平佈局

wlayout = QtWidgets.QHBoxLayout()

 

2. 局部佈局分析

四個局部佈局分別使用了水平佈局、豎直佈局、網格佈局、表單佈局

hlayout = QtWidgets.QHBoxLayout()
vlayout = QtWidgets.QVBoxLayout()
glayout = QtWidgets.QGridLayout()
flayout = QtWidgets.QFormLayout()

 

到這裏，其實開始時我產生了一個很天然，可是錯誤的想法：把四個局部佈局直接添加到全局佈局內：

wlayout.addWidget(hlayout) 
wlayout.addWidget(vlayout)
wlayout.addWidget(glayout)
wlayout.addWidget(flayout)

報錯信息提示：addWidget() 參數必須爲 QWidget 類型！

這給了我啓示：

 

先準備四個 QWidget： hwg, vwg, gwg, fwg

hwg = QtWidgets.QWidget()
vwg = QtWidgets.QWidget()
gwg = QtWidgets.QWidget()
fwg = QtWidgets.QWidget()

 

而後用這四個 QWidget 分別去設置前面四個局部佈局

hwg.setLayout(hlayout)
vwg.setLayout(vlayout)
gwg.setLayout(glayout)
fwg.setLayout(flayout)

 

再把這四個 QWidget 部件添加至全局變量

wlayout.addWidget(hwg)
wlayout.addWidget(vwg)
wlayout.addWidget(gwg)
wlayout.addWidget(fwg)

 

最後一步，把全局佈局應用到窗體本尊

self.setLayout(wlayout)

 

 

3. 完整代碼

from PyQt5 import QtWidgets  
 
  
class MyWindow(QtWidgets.QWidget):  

    def __init__(self):  
        super().__init__()
        self.setWindowTitle('PyQt5佈局示例')
        
        # 開始：
        wlayout = QtWidgets.QHBoxLayout() # 全局佈局（1個）：水平
        
        hlayout = QtWidgets.QHBoxLayout() # 局部佈局（4個）：水平、豎直、網格、表單
        vlayout = QtWidgets.QVBoxLayout()
        glayout = QtWidgets.QGridLayout()
        flayout = QtWidgets.QFormLayout()
        
        hlayout.addWidget(QtWidgets.QPushButton(str(1))) # 局部佈局添加部件（例如：按鈕）
        hlayout.addWidget(QtWidgets.QPushButton(str(2)))
        vlayout.addWidget(QtWidgets.QPushButton(str(3)))
        vlayout.addWidget(QtWidgets.QPushButton(str(4)))
        glayout.addWidget(QtWidgets.QPushButton(str(5)),0,0)
        glayout.addWidget(QtWidgets.QPushButton(str(6)),0,1)
        glayout.addWidget(QtWidgets.QPushButton(str(7)),1,0)
        glayout.addWidget(QtWidgets.QPushButton(str(8)),1,1)
        flayout.addWidget(QtWidgets.QPushButton(str(9)))
        flayout.addWidget(QtWidgets.QPushButton(str(10)))
        flayout.addWidget(QtWidgets.QPushButton(str(11)))
        flayout.addWidget(QtWidgets.QPushButton(str(12)))
        
        hwg = QtWidgets.QWidget() # 準備四個部件
        vwg = QtWidgets.QWidget()
        gwg = QtWidgets.QWidget()
        fwg = QtWidgets.QWidget()
        
        hwg.setLayout(hlayout) # 四個部件設置局部佈局
        vwg.setLayout(vlayout)
        gwg.setLayout(glayout)
        fwg.setLayout(flayout)
        
        wlayout.addWidget(hwg) # 四個部件加至全局佈局
        wlayout.addWidget(vwg)
        wlayout.addWidget(gwg)
        wlayout.addWidget(fwg)
        
        self.setLayout(wlayout) # 窗體本尊設置全局佈局
        

  
if __name__=="__main__":    
    import sys    
    
    app = QtWidgets.QApplication(sys.argv)    
    win = MyWindow()  
    win.show()  
    sys.exit(app.exec_())