在Python Qt GUI設(shè)計(jì)：窗口布局管理方法【基礎(chǔ)篇】（基礎(chǔ)篇—5）文章中搪泳，聊到了如何使用Qt Designer進(jìn)行窗口布局管理吨掌，其實(shí)在Qt Designer中可以非常方便進(jìn)行窗口布局管理設(shè)計(jì)丐枉，本篇博文在4種窗口布局方式基礎(chǔ)上繼續(xù)深入聊聊API函數(shù)~
在PyQt 5中有四種布局方式：水平布局盟萨、垂直布局岔绸、網(wǎng)格布局蔽莱、表單布局逛万，以及兩種布局方法泳猬，即 addLayout()和addWidget()，其中 addLayout()用于在布局中插入子布局宇植，addWidget()用于在布局中插入控件得封。
四種布局方式對(duì)應(yīng)四個(gè)布局類：
水平布局類（QHBoxLayout），可以把所添加的控件在水平方向上依次排列指郁；
垂直布局類（QVBoxLayout）忙上，可以把所添加的控件在垂直方向上依次排列；
網(wǎng)格布局類（QGridLayout）坡氯，可以把所添加的控件以網(wǎng)格的形式排列晨横；
表單布局類（QFormLayout），可以把所添加的控件以兩列的形式排列箫柳。
布局類及其子類的繼承關(guān)系如下圖所示：
1、?水平布局類（QHBoxLayout）
采用QHBoxLayout類啥供，按照從左到右的順序來添加控件悯恍。QHBoxLayout類中的常用方法如下表所示：
在創(chuàng)建QHBoxLayout布局時(shí)用到的對(duì)齊方式參數(shù)如下表所示：
通過一個(gè)例子，了解水平布局使用伙狐，示例代碼如下所示：
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("水平布局管理例子")
# 水平布局按照從左到右的順序進(jìn)行添加按鈕部件涮毫。
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)))? ?
#設(shè)置控件間的間距
hlayout.setSpacing( 0 )
self.setLayout(hlayout)?
if __name__ == "__main__":?
app = QApplication(sys.argv)
form = Winform()
form.show()
sys.exit(app.exec_())
運(yùn)行效果如下所示：?
2瞬欧、垂直布局類（QVBoxLayout）
采用QVBoxLayout類，按照從上到下的順序添加控件罢防。QHBoxLayout和QVBoxLayout類都繼承自QBoxLayout類艘虎，所以常用方法也是相同的。
通過一個(gè)例子咒吐，了解垂直布局使用野建，示例代碼如下所示：
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)?
? ? ? ? # 垂直布局按照從上到下的順序進(jìn)行添加按鈕部件。
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_())
運(yùn)行效果如下所示：??
3恬叹、網(wǎng)格布局類（QGridLayout）
QGridLayout（網(wǎng)格布局）是將窗口分隔成行和列的網(wǎng)格來進(jìn)行排列候生。通常可以使用函數(shù)addWidget()將被管理的控件(Widget)添加到窗口中绽昼，或者使用addLayout()函數(shù)將布局(Layout)添加到窗口中唯鸭。也可以通過addWidget()函數(shù)對(duì)所添加的控件設(shè)置行數(shù)和列數(shù)的跨越，最后實(shí)現(xiàn)網(wǎng)格占據(jù)多個(gè)窗格硅确。
QGridLayout類中的常用方法如下表所示：
3.1目溉、單一的網(wǎng)絡(luò)布局
來做個(gè)單一網(wǎng)格布局的小案例，創(chuàng)建QGridLayout的實(shí)例菱农，并設(shè)置為窗口的布局停做，創(chuàng)建按鈕的標(biāo)簽列表，在網(wǎng)格中創(chuàng)建一個(gè)位置列表大莫，創(chuàng)建按鈕蛉腌，并通過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):? ? ? ? ? ?
? ? ? ? #創(chuàng)建QGridLayout的實(shí)例只厘，并設(shè)置為窗口的布局
grid = QGridLayout()?
self.setLayout(grid)?
? ? ? ? #創(chuàng)建按鈕的標(biāo)簽列表
names = ['Cls', 'Back', '', 'Close',?
? ? ? ? ? ? ? ? '7', '8', '9', '/',?
? ? ? ? ? ? ? ? '4', '5', '6', '*',?
? ? ? ? ? ? ? ? '1', '2', '3', '-',?
? ? ? ? ? ? ? ? '0', '.', '=', '+']?
? ? ? ? #在網(wǎng)格中創(chuàng)建一個(gè)位置列表
positions = [(i,j) for i in range(5) for j in range(4)]?
? ? ? ? #創(chuàng)建按鈕烙丛，并通過addWidget()方法添加到布局中
for position, name in zip(positions, names):? ? ? ? ? ? ? ?
if name == '':?
continue?
button = QPushButton(name)?
grid.addWidget(button, *position)?
self.move(300, 150)?
self.setWindowTitle('網(wǎng)格布局管理例子')?
if __name__ == "__main__":?
app = QApplication(sys.argv)
form = Winform()
form.show()
sys.exit(app.exec_())
運(yùn)行效果如下所示：? ?
3.2、跨越行羔味、列的網(wǎng)絡(luò)布局
本示例將實(shí)現(xiàn)跨越行河咽、列的網(wǎng)絡(luò)單元格設(shè)計(jì)，示例如下所示：
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('標(biāo)題')?
authorLabel = QLabel('提交人')?
contentLabel = QLabel('申告內(nèi)容')?
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)?
? ? ? ? #把a(bǔ)uthorLabel放在QGridLayout布局的第2行第0列。
grid.addWidget(authorLabel, 2, 0)?
? ? ? ? #把a(bǔ)uthorEdit放在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_())
運(yùn)行效果如下所示：? ??
4褥芒、表單布局類（QFormLayout）
QFormLayout是label-field式的表單布局，顧名思義嫡良，就是實(shí)現(xiàn)表單方式的布局锰扶。
表單是提示用戶進(jìn)行交互的一種模式献酗，其主要由兩列組成：第一列用于顯示信息，給用戶提示坷牛，一般叫作label域;第二列需要用戶進(jìn)行選擇或輸入罕偎，一般叫作field域。label與field的關(guān)系就是label關(guān)聯(lián)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("標(biāo)簽1")
lineEdit1 = QLineEdit()
labl2 = QLabel("標(biāo)簽2")
lineEdit2 = QLineEdit()
labl3 = QLabel("標(biāo)簽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_())
運(yùn)行效果如下所示：? ??
5颜及、嵌套布局
在窗口中進(jìn)行單一的布局并不難，但若是進(jìn)行比較復(fù)雜的布局忙干，就涉及布局的嵌套了器予，推薦使用Qt Designer的可視化管理工具來進(jìn)行界面布局，可參見上篇博文捐迫。
本文僅介紹API函數(shù)實(shí)現(xiàn)嵌套布局的示例方法乾翔。
5.1、在布局中添加其他布局
整個(gè)例子施戴，首先全局布局采用的是水平布局反浓，局部布局采用的分別是水平布局、垂直布局赞哗、網(wǎng)格布局和表單布局雷则，準(zhǔn)備4個(gè)QWidget控件:hwg、vwg肪笋、gwg和formlayout月劈，使用4個(gè)QWidget控件分別設(shè)置局部布局，接下來藤乙，將4個(gè)QWidget控件添加到全局變量中猜揪，最后，把全局布局應(yīng)用到窗口本身坛梁。
示例效果如下所示：
實(shí)現(xiàn)代碼如下所示：
import sys
from PyQt5.QtWidgets import QApplication? ,QWidget , QHBoxLayout,? QVBoxLayout,? QGridLayout ,? QFormLayout, QPushButton
class MyWindow( QWidget):?
? ? def __init__(self):?
? ? ? ? super().__init__()
? ? ? ? self.setWindowTitle('嵌套布局示例')
? ? ? ? # 全局布局（1個(gè)）：水平
? ? ? ? wlayout =? QHBoxLayout()
? ? ? ? # 局部布局（4個(gè)）：水平而姐、豎直、網(wǎng)格划咐、表單
? ? ? ? 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)) )
? ? ? ? # 準(zhǔn)備四個(gè)部件
? ? ? ? hwg =? QWidget()
? ? ? ? vwg =? QWidget()
? ? ? ? gwg =? QWidget()
? ? ? ? fwg =? QWidget()
? ? ? ? # 四個(gè)部件設(shè)置局部布局
? ? ? ? hwg.setLayout(hlayout)
? ? ? ? vwg.setLayout(vlayout)
? ? ? ? gwg.setLayout(glayout)
? ? ? ? fwg.setLayout(formlayout)
? ? ? ? # 四個(gè)部件加至全局布局
? ? ? ? wlayout.addWidget(hwg)
? ? ? ? wlayout.addWidget(vwg)
? ? ? ? wlayout.addWidget(gwg)
? ? ? ? wlayout.addWidget(fwg)
? ? ? ? # 窗體本體設(shè)置全局布局
? ? ? ? self.setLayout(wlayout)
if __name__=="__main__":? ?
? ? app =? QApplication(sys.argv)? ?
? ? win = MyWindow()?
? ? win.show()?
? ? sys.exit(app.exec_())
這樣的布局有一個(gè)缺點(diǎn)：4種局部布局需要4個(gè)空白控件拴念，假如有10種局部布局，就需要10個(gè)空白控件褐缠。怎么解決這個(gè)問題呢??這時(shí)候就需要在控件中添加布局政鼠。
5.2、在控件中添加布局
在控件中添加布局送丰，可以不管有多少種局部布局缔俄，只需要一個(gè)空白控件，然后在這個(gè)空白控件中進(jìn)行多種布局就可以實(shí)現(xiàn)嵌套布局的效果器躏。
對(duì)5.1中的示例進(jìn)行優(yōu)化俐载，先準(zhǔn)備一個(gè)全局控件，用于添加全局布局登失，定義全局布局和4種局部布局遏佣，在局部布局中放置一些按鈕控件，最后把4種局部布局添加到全局布局中揽浙。實(shí)現(xiàn)代碼如下所示：
from PyQt5.QtWidgets import *
import sys?
class MyWindow(QWidget):?
def __init__(self):?
super().__init__()
self.setWindowTitle('嵌套布局示例')
self.resize(700, 200)
? ? ? ? # 全局部件（注意參數(shù) self）状婶，用于"承載"全局布局
wwg = QWidget(self)
? ? ? ? # 全局布局（注意參數(shù) 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)) )
? ? ? ? # 這里向局部布局內(nèi)添加部件,將他加到全局布局
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還提供了一個(gè)特殊的布局管理器：QSplitter膛虫，它可以動(dòng)態(tài)地拖動(dòng)子控件之間的邊界，算是一個(gè)動(dòng)態(tài)的布局管理器钓猬。
QSplitter 允許用戶通過拖動(dòng)子控件的邊界來控制子控件的大小稍刀，并提供了一個(gè)處理拖曳子控件的控制器。
在QSplitter對(duì)象中各子控件默認(rèn)是橫向布局的敞曹，可以使用Qt.Vertical進(jìn)行垂直布局账月。QSplitter類中的常用方法如下表所示：
通過一個(gè)例子，了解QSplitter布局的使用澳迫，在這個(gè)例子中局齿，顯示了使用兩個(gè)QSplitter組織的兩個(gè)QFrame控件。其中第一個(gè)QSplitter對(duì)象包含了一個(gè)QFrame對(duì)象和QTextEdit對(duì)象橄登，并按照水平方向進(jìn)行布局抓歼。第二個(gè)QSplitter對(duì)象添加了第一個(gè)QSplitter對(duì)象和另一個(gè)QFrame對(duì)象，并按照垂直方向進(jìn)行布局拢锹。
示例效果如下所示：
示例代碼如下所示：
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_())
