布局管理是GUI编程中的一个重要方面。布局管理是一种如何在应用窗口上防止组件的一种方法。我们可以通过两种基础方式来管理布局。我们可以使用绝对定位和布局类。
绝对定位
程序指定了组件的位置并且每个组件的大小用像素作为单位来丈量。当你使用了绝对定位，我们需要知道下面的几点限制：
- 如果我们改变了窗口大小，组件的位置和大小并不会发生改变。
- 在不同平台上，应用的外观可能不同
- 改变我们应用中的字体的话可能会把应用弄得一团糟。
- 如果我们决定改变我们的布局，我们必须完全重写我们的布局，这样非常乏味和浪费时间。
下面的例子中，使用了绝对坐标来定位组件
|
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
|
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
ZetCode PyQt5 tutorial
This example shows three labels on a window
using absolute positioning.
author: Jan Bodnar
website: zetcode.com
last edited: January 2015
"""
import
sys
from
PyQt5.QtWidgets
import
QWidget, QLabel, QApplication
class
Example(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
=
Example()
sys.exit(app.exec_())
|
我们使用move()方法来定位我们的组件。在上面的例子中我们使用move()方法定位了一些标签组件。在使用move()方法时，我们给move()方法提供了x和y坐标作为参数。move()使用的坐标系统是从左上角开始计算的。x值从左到右增长。y值从上到下增长。
|
1
2
|
lbl1
=
QLabel(
'Zetcode'
,
self
)
lbl1.move(
15
,
10
)
|
将标签组件定位在x=15，y=10的坐标位置。
Figure: Absolute positioning
箱布局
布局管理器的布局管理类非常灵活，实用。它是将组件定位在窗口上的首选方式。QHBoxLayout和QVBoxLayout是两个基础布局管理类，他们水平或垂直的线性排列组件。想象一下我们需要在右下角排列两个按钮。为了使用箱布局，我们将使用一个水平箱布局和垂直箱布局来实现。同样为了使用一些必要的空白，我们将添加一些拉伸因子。
|
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
50
51
52
53
54
|
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
ZetCode PyQt5 tutorial
In this example, we position two push
buttons in the bottom-right corner
of the window.
author: Jan Bodnar
website: zetcode.com
last edited: January 2015
"""
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_())
|
例子在右下角放置了两个按钮。当我们改变应用窗口大小时，它们会相对于应用窗口不改变位置。在这个例子中我们使用了QHBoxLayout和QVBoxLayout两个布局类。
|
1
2
|
okButton
=
QPushButton(
"OK"
)
cancelButton
=
QPushButton(
"Cancel"
)
|
在这里我们创建了两个按钮。
|
1
2
3
4
|
hbox
=
QHBoxLayout()
hbox.addStretch(
1
)
hbox.addWidget(okButton)
hbox.addWidget(cancelButton)
|
这里我们创建了一个水平箱布局，并且增加了一个拉伸因子和两个按钮。拉伸因子在两个按钮之前增加了一个可伸缩空间。这会将按钮推到窗口的右边。
|
1
2
3
|
vbox
=
QVBoxLayout()
vbox.addStretch(
1
)
vbox.addLayout(hbox)
|
为了创建必要的布局，我们把水平布局放置在垂直布局内。拉伸因子将把包含两个按钮的水平箱布局推到窗口的底边。
|
1
|
self
.setLayout(vbox)
|
最后，我们设置一下窗口的主布局。
Figure: Buttons
网格布局
最常用的布局类是网格布局。这个布局使用行了列分割空间。要创建一个网格布局，我们需要使用QGridLayout类。
|
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
50
51
52
53
54
55
56
57
|
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
ZetCode PyQt5 tutorial
In this example, we create a skeleton
of a calculator using a QGridLayout.
author: Jan Bodnar
website: zetcode.com
last edited: January 2015
"""
import
sys
from
PyQt5.QtWidgets
import
(QWidget, QGridLayout,
QPushButton, QApplication)
class
Example(QWidget):
def
__init__(
self
):
super
().__init__()
self
.initUI()
def
initUI(
self
):
grid
=
QGridLayout()
self
.setLayout(grid)
names
=
[
'Cls'
,
'Bck'
, '
', '
Close',
'7'
,
'8'
,
'9'
,
'/'
,
'4'
,
'5'
,
'6'
,
'*'
,
'1'
,
'2'
,
'3'
,
'-'
,
'0'
,
'.'
,
'='
,
'+'
]
positions
=
[(i,j)
for
i
in
range
(
5
)
for
j
in
range
(
4
)]
for
position, name
in
zip
(positions, names):
if
name
=
=
'':
continue
button
=
QPushButton(name)
grid.addWidget(button,
*
position)
self
.move(
300
,
150
)
self
.setWindowTitle(
'Calculator'
)
self
.show()
if
__name__
=
=
'__main__'
:
app
=
QApplication(sys.argv)
ex
=
Example()
sys.exit(app.exec_())
|
在我们的例子中，我们创建了一个全是按钮的网格布局。
|
1
2
|
grid
=
QGridLayout()
self
.setLayout(grid)
|
实例化QGridLayout类，并且把这个类设为应用窗口的布局。
|
1
2
3
4
5
|
names
=
[
'Cls'
,
'Bck'
, '
', '
Close',
'7'
,
'8'
,
'9'
,
'/'
,
'4'
,
'5'
,
'6'
,
'*'
,
'1'
,
'2'
,
'3'
,
'-'
,
'0'
,
'.'
,
'='
,
'+'
]
|
这些标签会在之后的按钮中使用。
|
1
|
positions
=
[(i,j)
for
i
in
range
(
5
)
for
j
in
range
(
4
)]
|
我们创建了一个网格的定位列表。
|
1
2
3
4
5
6
|
for
position, name
in
zip
(positions, names):
if
name
=
=
'':
continue
button
=
QPushButton(name)
grid.addWidget(button,
*
position)
|
创建出按钮组件，并使用addWidget()方法向布局中添加按钮。
Figure: Calculator skeleton
文本审阅窗口示例
在网格中，组件可以跨多列或多行。在这个例子中，我们对它进行一下说明。
|
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
50
51
52
53
54
55
56
57
58
59
60
61
62
|
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
ZetCode PyQt5 tutorial
In this example, we create a bit
more complicated window layout using
the QGridLayout manager.
author: Jan Bodnar
website: zetcode.com
last edited: January 2015
"""
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_())
|
我们创建了包含三个标签，两个单行编辑框和一个文本编辑框组件的窗口。布局使用了QGridLayout布局。
|
1
2
|
grid
=
QGridLayout()
grid.setSpacing(
10
)
|
我们创建了一个网格布局并且设置了组件之间的间距。
|
1
|
grid.addWidget(reviewEdit,
3
,
1
,
5
,
1
)
|
如果我们向网格布局中增加一个组件，我们可以提供组件的跨行和跨列参数。在这个例子中，我们让reviewEdit组件跨了5行。
Figure: Review example
这部分的PyQt5教程专门用于讲述布局管理。