在Python Qt GUI設計：視窗布局管理方法【基礎篇】（基礎篇—5）文章中，聊到了如何使用Qt Designer進行視窗布局管理，其實在Qt Designer中可以非常方便進行視窗布局管理設計，本篇博文在4種視窗布局方式基礎上繼續深入聊聊API函式~

在PyQt 5中有四種布局方式：水平布局、垂直布局、網格布局、表單布局，以及兩種布局方法，即 addLayout()和addWidget()，其中 addLayout()用于在布局中插入子布局，addWidget()用于在布局中插入控制元件，

四種布局方式對應四個布局類：

水平布局類（QHBoxLayout），可以把所添加的控制元件在水平方向上依次排列；
垂直布局類（QVBoxLayout），可以把所添加的控制元件在垂直方向上依次排列；
網格布局類（QGridLayout），可以把所添加的控制元件以網格的形式排列；
表單布局類（QFormLayout），可以把所添加的控制元件以兩列的形式排列，

布局類及其子類的繼承關系如下圖所示：

1、水平布局類（QHBoxLayout）

采用QHBoxLayout類，按照從左到右的順序來添加控制元件，QHBoxLayout類中的常用方法如下表所示：

在創建QHBoxLayout布局時用到的對齊方式引數如下表所示：

通過一個例子，了解水平布局使用，示例代碼如下所示：

import sys
from PyQt5.QtWidgets import QApplication  ,QWidget ,QHBoxLayout , QPushButton
from PyQt5.QtCore import Qt 

class Winform(QWidget):
	def __init__(self,parent=None):
		super(Winform,self).__init__(parent)
		self.setWindowTitle("水平布局管理例子") 
				
		# 水平布局按照從左到右的順序進行添加按鈕部件，
		hlayout = QHBoxLayout()  
        		
		hlayout.addWidget(QPushButton(str(1)))
		hlayout.addWidget(QPushButton(str(2)))
		hlayout.addWidget(QPushButton(str(3)))
		hlayout.addWidget(QPushButton(str(4)))        
		hlayout.addWidget(QPushButton(str(5)))    
        		
		#設定控制元件間的間距
		hlayout.setSpacing( 0 )	
		self.setLayout(hlayout)   
  
if __name__ == "__main__":  
	app = QApplication(sys.argv) 
	form = Winform()
	form.show()
	sys.exit(app.exec_())

運行效果如下所示：

2、垂直布局類（QVBoxLayout）

采用QVBoxLayout類，按照從上到下的順序添加控制元件，QHBoxLayout和QVBoxLayout類都繼承自QBoxLayout類，所以常用方法也是相同的，

通過一個例子，了解垂直布局使用，示例代碼如下所示：

import sys
from PyQt5.QtWidgets import QApplication  ,QWidget ,QVBoxLayout , QPushButton

class Winform(QWidget):
	def __init__(self,parent=None):
		super(Winform,self).__init__(parent)
		self.setWindowTitle("垂直布局管理例子") 
		self.resize(330, 150)  
        # 垂直布局按照從上到下的順序進行添加按鈕部件，
		vlayout = QVBoxLayout()
		vlayout.addWidget( QPushButton(str(1)))
		vlayout.addWidget( QPushButton(str(2)))
		vlayout.addWidget( QPushButton(str(3)))
		vlayout.addWidget( QPushButton(str(4)))
		vlayout.addWidget( QPushButton(str(5)))
		self.setLayout(vlayout)   
  
if __name__ == "__main__":  
		app = QApplication(sys.argv) 
		form = Winform()
		form.show()
		sys.exit(app.exec_())

運行效果如下所示：

3、網格布局類（QGridLayout）

QGridLayout（網格布局）是將視窗分隔成行和列的網格來進行排列，通常可以使用函式addWidget()將被管理的控制元件(Widget)添加到視窗中，或者使用addLayout()函式將布局(Layout)添加到視窗中，也可以通過addWidget()函式對所添加的控制元件設定行數和列數的跨越，最后實作網格占據多個窗格，

QGridLayout類中的常用方法如下表所示：

3.1、單一的網路布局

來做個單一網格布局的小案例，創建QGridLayout的實體，并設定為視窗的布局，創建按鈕的標簽串列，在網格中創建一個位置串列，創建按鈕，并通過addWidget()方法添加到布局中，示例如下所示：

import sys
from PyQt5.QtWidgets import QApplication  ,QWidget  , QGridLayout, QPushButton

class Winform(QWidget):
	def __init__(self,parent=None):
		super(Winform,self).__init__(parent)
		self.initUI()

	def initUI(self):            
        #創建QGridLayout的實體，并設定為視窗的布局
		grid = QGridLayout()  
		self.setLayout(grid)  
   
        #創建按鈕的標簽串列
		names = ['Cls', 'Back', '', 'Close',  
                 '7', '8', '9', '/',  
                '4', '5', '6', '*',  
                 '1', '2', '3', '-',  
                '0', '.', '=', '+']  
        
        #在網格中創建一個位置串列
		positions = [(i,j) for i in range(5) for j in range(4)]  
         
        #創建按鈕，并通過addWidget()方法添加到布局中
		for position, name in zip(positions, names):                
			if name == '':  
				continue  
				
			button = QPushButton(name)  
			grid.addWidget(button, *position)  
              
		self.move(300, 150)  
		self.setWindowTitle('網格布局管理例子')  
  
if __name__ == "__main__":  
		app = QApplication(sys.argv) 
		form = Winform()
		form.show()
		sys.exit(app.exec_())

運行效果如下所示：

3.2、跨越行、列的網路布局

本示例將實作跨越行、列的網路單元格設計，示例如下所示：

import sys
from PyQt5.QtWidgets import (QWidget, QLabel, QLineEdit,   QTextEdit, QGridLayout, QApplication)  
    
class Winform(QWidget):
	def __init__(self,parent=None):
		super(Winform,self).__init__(parent)
		self.initUI()

	def initUI(self):            
		titleLabel = QLabel('標題')  
		authorLabel = QLabel('提交人')  
		contentLabel = QLabel('申告內容')  
 
		titleEdit = QLineEdit()  
		authorEdit = QLineEdit()  
		contentEdit = QTextEdit()  
 
		grid = QGridLayout()  
		grid.setSpacing(10)  

        #把titleLabel放在QGridLayout布局的第1行第0列，
		grid.addWidget(titleLabel, 1, 0)  
        #把titleEdit放在QGridLayout布局的第1行第1列，
		grid.addWidget(titleEdit, 1, 1)  
  
        #把authorLabel放在QGridLayout布局的第2行第0列，
		grid.addWidget(authorLabel, 2, 0)  
        #把authorEdit放在QGridLayout布局的第2行第1列，
		grid.addWidget(authorEdit, 2, 1)  
  
        #把contentLabel放在QGridLayout布局的第3行第0列，
		grid.addWidget(contentLabel, 3, 0)  
        #把contentEdit放在QGridLayout布局的第3行第1列，跨越5行1列，
		grid.addWidget(contentEdit, 3, 1, 5, 1)  
          
		self.setLayout(grid)   
          
		self.setGeometry(300, 300, 350, 300)  
		self.setWindowTitle('故障申告')
  
if __name__ == "__main__":  
		app = QApplication(sys.argv) 
		form = Winform()
		form.show()
		sys.exit(app.exec_())

運行效果如下所示：

4、表單布局類（QFormLayout）

QFormLayout是label-field式的表單布局，顧名思義，就是實作表單方式的布局，

表單是提示用戶進行互動的一種模式，其主要由兩列組成：第一列用于顯示資訊，給用戶提示，一般叫作label域;第二列需要用戶進行選擇或輸入，一般叫作field域，label與field的關系就是label關聯field，示例如下所示：

import sys
from PyQt5.QtWidgets import QApplication  ,QWidget ,QFormLayout , QLineEdit, QLabel

class Winform(QWidget):
	def __init__(self,parent=None):
		super(Winform,self).__init__(parent)
		self.setWindowTitle("表單布局管理例子") 
		self.resize(400, 100)  
         
		fromlayout = QFormLayout()
		labl1 = QLabel("標簽1")
		lineEdit1 = QLineEdit()
		labl2 = QLabel("標簽2")
		lineEdit2 = QLineEdit()
		labl3 = QLabel("標簽3")
		lineEdit3 = QLineEdit()

		fromlayout.addRow(labl1, lineEdit1)
		fromlayout.addRow(labl2, lineEdit2)
		fromlayout.addRow(labl3, lineEdit3)
		
		self.setLayout(fromlayout)   
  
if __name__ == "__main__":  
		app = QApplication(sys.argv) 
		form = Winform()
		form.show()
		sys.exit(app.exec_())

運行效果如下所示：

5、嵌套布局

在視窗中進行單一的布局并不難，但若是進行比較復雜的布局，就涉及布局的嵌套了，推薦使用Qt Designer的可視化管理工具來進行界面布局，可參見上篇博文，

本文僅介紹API函式實作嵌套布局的示例方法，

5.1、在布局中添加其他布局

整個例子，首先全域布局采用的是水平布局，區域布局采用的分別是水平布局、垂直布局、網格布局和表單布局，準備4個QWidget控制元件:hwg、vwg、gwg和formlayout，使用4個QWidget控制元件分別設定區域布局，接下來，將4個QWidget控制元件添加到全域變數中，最后，把全域布局應用到視窗本身，

示例效果如下所示：

實作代碼如下所示：

import sys
from PyQt5.QtWidgets import QApplication  ,QWidget , QHBoxLayout,  QVBoxLayout,  QGridLayout ,  QFormLayout, QPushButton 
  
class MyWindow( QWidget):  

    def __init__(self):  
        super().__init__()
        self.setWindowTitle('嵌套布局示例')
       
        # 全域布局（1個）：水平
        wlayout =  QHBoxLayout() 
         # 區域布局（4個）：水平、豎直、網格、表單
        hlayout =  QHBoxLayout()
        vlayout =  QVBoxLayout()
        glayout = QGridLayout()
        formlayout =  QFormLayout()
        
        # 區域布局添加部件（例如：按鈕）
        hlayout.addWidget( QPushButton(str(1)) ) 
        hlayout.addWidget( QPushButton(str(2)) )
        vlayout.addWidget( QPushButton(str(3)) )
        vlayout.addWidget( QPushButton(str(4)) )
        glayout.addWidget( QPushButton(str(5)) , 0, 0 )
        glayout.addWidget( QPushButton(str(6)) , 0, 1 )
        glayout.addWidget( QPushButton(str(7)) , 1, 0)
        glayout.addWidget( QPushButton(str(8)) , 1, 1)
        formlayout.addWidget( QPushButton(str(9))  )
        formlayout.addWidget( QPushButton(str(10)) )
        formlayout.addWidget( QPushButton(str(11)) )
        formlayout.addWidget( QPushButton(str(12)) )
        
        # 準備四個部件
        hwg =  QWidget() 
        vwg =  QWidget()
        gwg =  QWidget()
        fwg =  QWidget()
                
        # 四個部件設定區域布局
        hwg.setLayout(hlayout) 
        vwg.setLayout(vlayout)
        gwg.setLayout(glayout)
        fwg.setLayout(formlayout)
        
         # 四個部件加至全域布局
        wlayout.addWidget(hwg)
        wlayout.addWidget(vwg)
        wlayout.addWidget(gwg)
        wlayout.addWidget(fwg)
        
        # 表單本體設定全域布局
        self.setLayout(wlayout) 
  
if __name__=="__main__":    
    app =  QApplication(sys.argv)    
    win = MyWindow()  
    win.show()  
    sys.exit(app.exec_())

這樣的布局有一個缺點：4種區域布局需要4個空白控制元件，假如有10種區域布局，就需要10個空白控制元件，怎么解決這個問題呢? 這時候就需要在控制元件中添加布局，

5.2、在控制元件中添加布局

在控制元件中添加布局，可以不管有多少種區域布局，只需要一個空白控制元件，然后在這個空白控制元件中進行多種布局就可以實作嵌套布局的效果，

對5.1中的示例進行優化，先準備一個全域控制元件，用于添加全域布局，定義全域布局和4種區域布局，在區域布局中放置一些按鈕控制元件，最后把4種區域布局添加到全域布局中，實作代碼如下所示：

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

	def __init__(self):  
		super().__init__()
		self.setWindowTitle('嵌套布局示例')
		self.resize(700, 200)
        
        # 全域部件（注意引數 self），用于"承載"全域布局
		wwg = QWidget(self)
        
         # 全域布局（注意引數 wwg）
		wl = QHBoxLayout(wwg)
		hlayout =  QHBoxLayout()
		vlayout =  QVBoxLayout()
		glayout = QGridLayout()
		formlayout =  QFormLayout()
        
         # 區域布局添加部件（例如：按鈕）
		hlayout.addWidget( QPushButton(str(1)) )
		hlayout.addWidget( QPushButton(str(2)) )
		vlayout.addWidget( QPushButton(str(3)) )
		vlayout.addWidget( QPushButton(str(4)) )
		glayout.addWidget( QPushButton(str(5)) , 0, 0 )
		glayout.addWidget( QPushButton(str(6)) , 0, 1 )
		glayout.addWidget( QPushButton(str(7)) , 1, 0)
		glayout.addWidget( QPushButton(str(8)) , 1, 1)
		formlayout.addWidget( QPushButton(str(9))  )
		formlayout.addWidget( QPushButton(str(10)) )
		formlayout.addWidget( QPushButton(str(11)) )
		formlayout.addWidget( QPushButton(str(12)) )
        
        # 這里向區域布局內添加部件,將他加到全域布局
		wl.addLayout(hlayout)  
		wl.addLayout(vlayout)
		wl.addLayout(glayout)
		wl.addLayout(formlayout)       

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

5.3、QSplitter布局管理器

除了上面介紹的Layout布局管理，PyQt還提供了一個特殊的布局管理器：QSplitter，它可以動態地拖動子控制元件之間的邊界，算是一個動態的布局管理器，

QSplitter 允許用戶通過拖動子控制元件的邊界來控制子控制元件的大小，并提供了一個處理拖曳子控制元件的控制器，

在QSplitter物件中各子控制元件默認是橫向布局的，可以使用Qt.Vertical進行垂直布局，QSplitter類中的常用方法如下表所示：

通過一個例子，了解QSplitter布局的使用，在這個例子中，顯示了使用兩個QSplitter組織的兩個QFrame控制元件，其中第一個QSplitter物件包含了一個QFrame物件和QTextEdit物件，并按照水平方向進行布局，第二個QSplitter物件添加了第一個QSplitter物件和另一個QFrame物件，并按照垂直方向進行布局，

示例效果如下所示：

示例代碼如下所示：

from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
     
class SplitterExample(QWidget):
	def __init__(self):
		super(SplitterExample, self).__init__()
		self.initUI()

	def initUI(self): 
		hbox = QHBoxLayout(self)
		self.setWindowTitle('QSplitter 布局例子')
		self.setGeometry(300, 300, 300, 200)         
		topleft = QFrame()
		topleft.setFrameShape(QFrame.StyledPanel)
        
		bottom = QFrame()
		bottom.setFrameShape(QFrame.StyledPanel)
		
		splitter1 = QSplitter(Qt.Horizontal)
		textedit = QTextEdit()
		splitter1.addWidget(topleft)
		splitter1.addWidget(textedit)
		splitter1.setSizes([100,200])
		splitter2 = QSplitter(Qt.Vertical)
		splitter2.addWidget(splitter1)
		splitter2.addWidget(bottom)
		hbox.addWidget(splitter2)
		self.setLayout(hbox)
          	
if __name__ == '__main__':
	app = QApplication(sys.argv)
	demo = SplitterExample()
	demo.show()
	sys.exit(app.exec_())

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/306361.html

標籤：python

上一篇：成功破解Python領域的世界未解之謎后，輕松完成UI自動化控制微信發送檔案

下一篇：面試官一口氣問了MySQL事務、鎖和MVCC，我

Python Qt GUI設計：視窗布局管理方法【強化篇】（基礎篇—6）

目錄

1、水平布局類（QHBoxLayout）

2、垂直布局類（QVBoxLayout）

3、網格布局類（QGridLayout）

3.1、單一的網路布局

3.2、跨越行、列的網路布局

4、表單布局類（QFormLayout）

5、嵌套布局

5.1、在布局中添加其他布局

5.2、在控制元件中添加布局

5.3、QSplitter布局管理器

Python Qt GUI設計：視窗布局管理方法【強化篇】（基礎篇—6）

目錄

1、 水平布局類（QHBoxLayout）

2、垂直布局類（QVBoxLayout）

3、網格布局類（QGridLayout）

3.1、單一的網路布局

3.2、跨越行、列的網路布局

4、表單布局類（QFormLayout）

5、嵌套布局

5.1、在布局中添加其他布局

5.2、在控制元件中添加布局

5.3、QSplitter布局管理器

1、水平布局類（QHBoxLayout）