布局(轉載於–學點編程吧)
通過實踐可知采用了布局之后能夠讓我們的程序在使用上更加美觀,不會隨着窗體的大小發生改變而改變,符合我們的使用習慣。
絕對位置
程序員以像素為單位指定每個小部件的位置和大小。 當您使用絕對定位時,我們必須了解以下限制:
如果我們調整窗口大小,則小部件的大小和位置不會改變
各種平台上的應用可能會有所不同
在我們的應用程序中更改字體可能會損壞布局
如果我們決定改變我們的布局,我們必須徹底重做布局,這很浪費時間
下面這個例子我們將小部件置於絕對坐標中:
import sys
from PyQt5.QtWidgets import (QWidget, QPushButton, QApplication)
class Example(QWidget):
def __init__(self):
super().__init__()
self.setGeometry(300,300,400,300)
self.setWindowTitle('學點編程吧')
bt1 = QPushButton('剪刀',self)
bt1.move(50,250)
bt2 = QPushButton('石頭',self)
bt2.move(150,250)
bt3 = QPushButton('布',self)
bt3.move(250,250)
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
我們使用move()方法來定位我們的小部件。 在我們的例子中,這些是按鈕。 我們通過提供x和y坐標來定位它們。 坐標系的開始位於左上角。 x值從左到右增長。 y值不變。
箱式布局
QHBoxLayout和QVBoxLayout是基本的布局類,它們在水平和垂直方向上排列小部件。
import sys
from PyQt5.QtWidgets import QWidget, QPushButton, QApplication, QHBoxLayout, QVBoxLayout
class Example(QWidget):
def __init__(self):
super().__init__()
self.setGeometry(300,300,400,300)
self.setWindowTitle('箱式布局')
self.init_ui()
def init_ui(self):
bt1 = QPushButton('剪刀', self)
bt2 = QPushButton('石頭', self)
bt3 = QPushButton('布', self)
h_box = QHBoxLayout()
h_box.addStretch(1)
h_box.addWidget(bt1)
h_box.addWidget(bt2)
h_box.addWidget(bt3)
v_box = QVBoxLayout()
v_box.addStretch(1)
v_box.addLayout(h_box)
self.setLayout(v_box)
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
app.exit(app.exec_())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
該示例在窗口的右下角放置了三個按鈕。 當我們調整應用程序窗口大小時,它們會留在那里,我們同時使用一個HBoxLayout和一個QVBoxLayout。
在這里插入圖片描述
bt1 = QPushButton('剪刀', self)
bt2 = QPushButton('石頭', self)
bt3 = QPushButton('布', self)
1
2
3
我們新建三個按鈕
h_box = QHBoxLayout()
h_box.addStretch(1)
h_box.addWidget(bt1)
h_box.addWidget(bt2)
h_box.addWidget(bt3)
1
2
3
4
5
我們創建一個水平框布局,並添加一個拉伸因子和三個按鈕。這個拉伸在三個按鈕之前增加了一個可伸縮的空間。這將把它們推到窗口的右邊。
v_box = QVBoxLayout()
v_box.addStretch(1)
v_box.addLayout(h_box)
1
2
3
水平布局放置在垂直布局中。垂直框中的拉伸因子將按鈕的水平框推到窗口的底部。
self.setLayout(v_box)
1
最后,我們設置窗口的主要布局。
addStretch函數的作用是在布局器中增加一個伸縮量,里面的參數表示QSpacerItem的個數,默認值為零,會將你放在layout中的空間壓縮成默認的大小。例如用addStretch函數實現將QHBoxLayout的布局器的空白空間分配。
import sys
from PyQt5.QtWidgets import (QWidget, QPushButton, QApplication, QHBoxLayout)
class Example(QWidget):
def __init__(self):
super().__init__()
self.init_ui()
self.setGeometry(300,300,400,300)
self.setWindowTitle('學點編程吧')
def init_ui(self):
bt1 = QPushButton('剪刀', self)
bt2 = QPushButton('石頭', self)
bt3 = QPushButton('布', self)
h_box = QHBoxLayout()
h_box.addStretch(1) #增加伸縮量
h_box.addWidget(bt1)
h_box.addStretch(1)#增加伸縮量
h_box.addWidget(bt2)
h_box.addStretch(1)#增加伸縮量
h_box.addWidget(bt3)
h_box.addStretch(6)#增加伸縮量
self.setLayout(h_box)
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
app.exit(app.exec_())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
在這里插入圖片描述
其中四個addStretch()函數用於在button按鈕間增加伸縮量,伸縮量的比例為1:1:1:6,意思就是將button以外的空白地方按設定的比例等分為9份並按照設定的順序放入布局器中。
格柵布局,也被稱作網格布局(多行多列)
柵格布局將位於其中的窗口部件放入一個網狀的柵格之中。QGridLayout需要將提供給它的空間划分成的行和列,並把每個窗口部件插入並管理到正確的單元格。
柵格布局是這樣工作的:它計算了位於其中的空間,然后將它們合理的划分成若干個行(row)和列(column),並把每個由它管理的窗口部件放置在合適的單元之中,這里所指的單元(cell)即是指由行和列交叉所划分出來的空間。
坐標分布是這樣的:
在這里插入圖片描述
下面這個例子就是采用格柵布局制作的一個計算器界面,當然在功能上按下按鈕只是能顯示而已,不能進行具體的計算,后期我們會制作一個完整的計算器。
import sys
from PyQt5.QtWidgets import QWidget, QPushButton, QApplication, QGridLayout, QLCDNumber
class Example(QWidget):
def __init__(self):
super().__init__()
self.Init_UI()
def Init_UI(self):
grid = QGridLayout()
self.setLayout(grid)
self.setGeometry(300, 300, 400, 300)
self.setWindowTitle('柵格布局-計算器')
self.lcd = QLCDNumber()
grid.addWidget(self.lcd, 0, 0, 3, 0)
grid.setSpacing(10)
names = ['Cls', 'Bc', '', 'Close',
'7', '8', '9', '/',
'4', '5', '6', '*',
'1', '2', '3', '-',
'0', '.', '=', '+']
positions = [(i, j) for i in range(4, 9) for j in range(4, 8)]
for position, name in zip(positions, names):
if name == '':
continue
button = QPushButton(name)
grid.addWidget(button, *position)
button.clicked.connect(self.Cli)
self.show()
def Cli(self):
sender = self.sender().text()
ls = ['/', '*', '-', '=', '+']
if sender in ls:
self.lcd.display('A')
else:
self.lcd.display(sender)
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
app.exit(app.exec_())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
執行結果:
在這里插入圖片描述
grid = QGridLayout()
self.setLayout(grid)
1
2
創建QGridLayout的實例並將其設置為應用程序窗口的布局。
grid.addWidget(self.lcd,0,0,3,0)
grid.setSpacing(10)
1
2
如果我們向窗格添加窗口小部件,我們可以提供窗口小部件的行跨度和列跨度。 在我們的例子中,我們使QLCDNumber小部件跨越4行。同時我們創建一個網格布局並在窗口小部件之間設置間距。
names = ['Cls', 'Bc', '', 'Close',
'7', '8', '9', '/',
'4', '5', '6', '*',
'1', '2', '3', '-',
'0', '.', '=', '+']
positions = [(i,j) for i in range(4,9) for j in range(4,8)]
1
2
3
4
5
6
7
我們創建了19個按鈕並指定了具體的坐標位置。
if name == '':
continue
button = QPushButton(name)
grid.addWidget(button, *position)
button.clicked.connect(self.Cli)
1
2
3
4
5
使用addWidget()方法創建並添加到布局中的按鈕。同時當我們按下按鈕的時候調用self.Cli()方法
def Cli(self):
sender = self.sender().text()
ls = ['/', '*', '-', '=', '+']
if sender in ls:
self.lcd.display('A')
else:
self.lcd.display(sender)
1
2
3
4
5
6
7
當我們按下按鈕的時候我們會得到按鈕上顯示的名稱,如果是操作符則在LCD上顯示“A”(因為LCD的顯示功能有限),否則顯示我們按下的信息。
1
表單布局
QFormLayout管理輸入型控件和關聯的標簽組成的那些Form表單。
QFormLayout是一個方便的布局類,其中的控件以兩列的形式被布局在表單中。左列包括標簽,右列包含輸入控件,例如:QLineEdit、QSpinBox、QTextEdit等。
下面這個例子就是說明表單布局是怎么用的
import sys
from PyQt5.QtWidgets import QWidget, QApplication, QFormLayout, QLabel, QLineEdit, QTextEdit
class Example(QWidget):
def __init__(self):
super().__init__()
self.setGeometry(300, 300, 300, 200)
self.setWindowTitle('表單布局')
self.ui_init()
def ui_init(self):
form_layout = QFormLayout()
name_label = QLabel('姓名')
name_line_edit = QLineEdit('')
introduction_label = QLabel('簡介')
introduction_line_edit = QTextEdit('')
form_layout.addRow(name_label, name_line_edit)
form_layout.addRow(introduction_label, introduction_line_edit)
self.setLayout(form_layout)
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
app.exit(app.exec_())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
在這里插入圖片描述
form_layout = QFormLayout(http://www.my516.com)
1
創建一個表單布局
formlayout.addRow(nameLabel,nameLineEdit)
formlayout.addRow(introductionLabel,introductionLineEdit)
1
2
向表單中增加一行,內容是我們定義的小部件。