布局管理是GUI編程中的一個重要方面。布局管理是一種如何在應(yīng)用窗口上放置組件的一種方法。窗體布局將影響整個UI界面的美觀。下面介紹幾種常見的布局方式。
3.1絕對布局
程序指定每個控件的位置和大小(以像素為單位)。
絕對定位有以下限制:
- 如果我們調(diào)整窗口，控件的大小和位置不會改變
- 在各種平臺上應(yīng)用程序看起來會不一樣
- 如果改變字體，我們的應(yīng)用程序的布局就會改變
- 如果我們決定改變我們的布局,我們必須完全重做我們的布局
下面的例子顯示了一個絕對定位
# -*- coding: utf-8 -*-
"""
author: BruceOu
last edited: 2020-06
"""
import sys
from PyQt5.QtWidgets import QWidget, QLabel, QApplication
class Absolute(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
lbl1 = QLabel('Zetcode', self)
lbl1.move(15, 10)
lbl2 = QLabel('tutorials', self)
lbl2.move(35, 40)
lbl3 = QLabel('for programmers', self)
lbl3.move(55, 70)
self.setGeometry(300, 300, 250, 150)
self.setWindowTitle('Absolute')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Absolute()
sys.exit(app.exec_())
結(jié)果如下所示：
3.2框布局 Boxlayout
我們使用QHBoxLayout和QVBoxLayout，來分別創(chuàng)建橫向布局和縱向布局。
# -*- coding: utf-8 -*-
"""
author: BruceOu
last edited: 2020-06
"""
import sys
from PyQt5.QtWidgets import (QWidget, QPushButton,
QHBoxLayout, QVBoxLayout, QApplication)
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
okButton = QPushButton("OK")
cancelButton = QPushButton("Cancel")
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(okButton)
hbox.addWidget(cancelButton)
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
self.setLayout(vbox)
self.setGeometry(300, 300, 300, 150)
self.setWindowTitle('Buttons')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
在這個例子中，我們使用HBoxLayout和QVBoxLayout并添加伸展因子，在窗口的右下角顯示兩個按鈕。
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(okButton)
hbox.addWidget(cancelButton)
我們創(chuàng)建一個水平布局和添加一個伸展因子和兩個按鈕。兩個按鈕前的伸展增加了一個可伸縮的空間。這將推動他們靠右顯示。
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
創(chuàng)建一個垂直布局，并添加伸展因子，讓水平布局顯示在窗口底部
self.setLayout(vbox)
最后,我們設(shè)置窗口的布局界面
3.3表格布局QGridLayout
表格布局將空間劃分為行和列。我們使用QGridLayout類創(chuàng)建一個網(wǎng)格布局。在我們的示例中，我們創(chuàng)建一個網(wǎng)格的按鈕。
grid = QGridLayout()
self.setLayout(grid)
QGridLayout的實(shí)例被創(chuàng)建并設(shè)置應(yīng)用程序窗口的布局。
names = ['Cls', 'Bck', '', 'Close',
'7', '8', '9', '/',
'4', '5', '6', '*',
'1', '2', '3', '-',
'0', '.', '=', '+']
這些按鈕的標(biāo)簽。
positions = [(i,j) for i in range(5) for j in range(4)]
我們創(chuàng)建一個網(wǎng)格中的位置的列表。
for position, name in zip(positions, names):
if name == '':
continue
button = QPushButton(name)
grid.addWidget(button, *position)
創(chuàng)建按鈕并使用addWidget()方法添加到布局中。
控件可以在網(wǎng)格中跨越多個行或列。在下一個示例中,我們說明了這一點(diǎn)。
# -*- coding: utf-8 -*-
"""
author: BruceOu
last edited: 2020-06
"""
import sys
from PyQt5.QtWidgets import (QWidget, QLabel, QLineEdit,
QTextEdit, QGridLayout, QApplication)
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
title = QLabel('Title')
author = QLabel('Author')
review = QLabel('Review')
titleEdit = QLineEdit()
authorEdit = QLineEdit()
reviewEdit = QTextEdit()
grid = QGridLayout()
grid.setSpacing(10)
grid.addWidget(title, 1, 0)
grid.addWidget(titleEdit, 1, 1)
grid.addWidget(author, 2, 0)
grid.addWidget(authorEdit, 2, 1)
grid.addWidget(review, 3, 0)
grid.addWidget(reviewEdit, 3, 1, 5, 1)
self.setLayout(grid)
self.setGeometry(300, 300, 350, 300)
self.setWindowTitle('Review')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
我們創(chuàng)建一個窗口,其中有三個標(biāo)簽,兩個行編輯和一個文本編輯窗口小控件。然后使用QGridLayout完成布局。
grid = QGridLayout()
grid.setSpacing(10)
創(chuàng)建一個網(wǎng)格布局和設(shè)置組件之間的間距。
grid.addWidget(reviewEdit, 3, 1, 5, 1)
在添加一個小的控件到網(wǎng)格的時候,我們可以提供小部件的行和列跨。在例子中,reviewEdit控件跨度5行。
當(dāng)然啦，本文簡介的內(nèi)容比較基礎(chǔ)，對于UI布局將在后面的內(nèi)容一步步深入，比較復(fù)雜的軟件都不是單一的布局，一般都是由多種布局嵌套而成。
資源獲取方法
1.關(guān)注公眾號[AI實(shí)驗(yàn)樓]
2.在公眾號回復(fù)關(guān)鍵詞[PyQt5]獲取資料提取碼
歡迎訪問我的網(wǎng)站
BruceOu的嗶哩嗶哩
BruceOu的主頁
BruceOu的博客
BruceOu的CSDN博客
BruceOu的簡書
BruceOu的知乎
