PyQt4中的布局管理
布局是GUI程序開發中非常重要的一個環節, 而布局管理就是要規劃如何在窗口中放置需要的部件. PyQt4中就有兩種方法來完成布局任務,一個是絕對位置(absolute positioning), 另一個就是使用布局類(layout classes).
絕對位置(absolute positioning)
這種方法就需要程序員在程序中指定每個部件的坐標位置和大小. 在這里有幾個注意事項.
-
指定了坐標和大小的部件是不能夠隨著窗口大小的變化而變化的.
-
程序在不同的操作系統平臺上也許會有所變化.
-
改變字體可能會引起布局的混亂.
-
如果需要改變當前的布局, 就需要重新編碼, 這意味著非常大的工作量.
?1?#!/usr/bin/python
?2?
?3?#?absolute.py
?4?
?5?import?sys
?6?from?PyQt4?import?QtGui
?7?
?8?class?Absolute(QtGui.QWidget):
?9?????def?__init__(self,?parent=None):
10?????????QtGui.QWidget.__init__(self,?parent)
11?????????
12?????????self.setWindowTitle('Communication')
13?????????
14?????????label?=?QtGui.QLabel('Could\'t',?self)
15?????????label.move(15,?10)
16?
17?????????label?=?QtGui.QLabel('care',?self)
18?????????label.move(35,?40)
19?
20?????????label?=?QtGui.QLabel('less',?self)
21?????????label.move(55,?65)
22?
23?????????label?=?QtGui.QLabel('And',?self)
24?????????label.move(115,?65)
25?
26?????????label?=?QtGui.QLabel('then',?self)
27?????????label.move(135,?45)
28?
29?????????label?=?QtGui.QLabel('you',?self)
30?????????label.move(115,?25)
31?
32?????????label?=?QtGui.QLabel('kissed',?self)
33?????????label.move(145,?10)
34?
35?????????label?=?QtGui.QLabel('me',?self)
36?????????label.move(215,?10)
37?
38?????????self.resize(250,?150)
39?
40?app?=?QtGui.QApplication(sys.argv)
41?qb?=?Absolute()
42?qb.show()
43?sys.exit(app.exec_())
在這里, 就是簡單的調用move()方法來指定部件的放置坐標. 坐標的頂點就在窗口的左上角, x由左向右不斷增大, y由上到下不斷增大.
Figure: absolute positioning
Box Layout
使用布局類進行布局管理是一件非常輕松的事情.? 最基本的布局類就是QHboxLayout和VHBoxLayout. 他們將部件線性的水平或垂直排列.
這里假設我們要將兩個按鈕放在窗口的右下方, 要實現這樣的布局, 使用一個QHBoxLayout和一個QVBoxLayout, 而其他的空間, 通過添加stretch factor來實現.
?1?#!/usr/bin/python
?2?
?3?#?boxlayout.py
?4?
?5?import?sys
?6?from?PyQt4?import?QtGui
?7?
?8?class?BoxLayout?(QtGui.QWidget):
?9?????def?__init__(self,?parent=None):
10?????????QtGui.QWidget.__init__(self,?parent)
11?????????
12?????????self.setWindowTitle('boxlayout')
13?????????
14?????????ok?=?QtGui.QPushButton('OK')
15?????????cancel?=?QtGui.QPushButton('Cancel')
16?
17?????????hbox?=?QtGui.QHBoxLayout()
18?????????hbox.addStretch(1)
19?????????hbox.addWidget(ok)
20?????????hbox.addWidget(cancel)
21?
22?????????vbox?=?QtGui.QVBoxLayout()
23?????????vbox.addStretch(1)
24?????????vbox.addLayout(hbox)
25?
26?????????self.setLayout(vbox)
27?????????
28?????????self.resize(300,?150)
29?
30?app?=?QtGui.QApplication(sys.argv)
31?qb?=?BoxLayout()
32?qb.show()
33?sys.exit(app.exec_())
ok?
=
?QtGui.QPushButton(
'
OK
'
)
cancel?
=
?QtGui.QPushButton(
'
Cancel
'
)
創建兩個按鈕
hbox?
=
?QtGui.QHBoxLayout()
hbox.addStretch(
1
)
hbox.addWidget(ok)
hbox.addWidget(cancel)
創建一個水平的box layout. 然后添加stretch factor和兩個按鈕.
vbox?
=
?QtGui.QVBoxLayout()
vbox.addStretch(
1
)
vbox.addLayout(hbox)
創建最后的布局類, 將水平的布局類放入到垂直的布局類當中.
self.setLayout(vbox)
最后, 將窗口的布局設定為垂直布局.
Figure: box layout
QGridLayout
最常用的布局類應當是QGridLayout, 他將窗口分成不同的行和列.
?1?#!/usr/bin/python
?2?
?3?#?gridlayout.py
?4?
?5?import?sys
?6?from?PyQt4?import?QtGui
?7?
?8?class?GridLayout(QtGui.QWidget):
?9?????def?__init__(self,?parent=None):
10?????????QtGui.QWidget.__init__(self,?parent)
11?
12?????????self.setWindowTitle('grid?layout')
13?
14?????????names?=?['Cls',?'Bck',?'',?'Close',?'7',?'8',?'9',?'/',
15??????????????????'4',?'5',?'6',?'*',?'1',?'2',?'3',?'-',
16??????????????????'0',?'.',?'=',?'+']
17?????????
18?????????grid?=?QtGui.QGridLayout()
19?????????
20?????????j?=?0
21?????????pos?=?[
22?????????????(0,?0),?(0,?1),?(0,?2),?(0,?3),
23?????????????(1,?0),?(1,?1),?(1,?2),?(1,?3),
24?????????????(2,?0),?(2,?1),?(2,?2),?(2,?3),
25?????????????(3,?0),?(3,?1),?(3,?2),?(3,?3),
26?????????????(4,?0),?(4,?1),?(4,?2),?(4,?3)
27?????????????]
28?????????
29?????????for?i?in?names:
30?????????????button?=?QtGui.QPushButton(i)
31?????????????if?j?==?2:
32?????????????????grid.addWidget(QtGui.QLabel(''),?0,?2)
33?????????????else:
34?????????????????grid.addWidget(button,?pos[j][0],?pos[j][1])
35?????????????j?=?j?+?1
36?????????
37?????????self.setLayout(grid)
38?
39?app?=?QtGui.QApplication(sys.argv)
40?qb?=?GridLayout()
41?qb.show()
42?sys.exit(app.exec_())
在這個例子中, 創建了很多按鈕, 用來填充相應的grid.
grid?
=
?QtGui.QGridLayout()
這一句就創建了grid layout.
if
?j?
==
?
2
:
????grid?
=
?addWidget(QtGui.QLabel(
''
),?0,?
2
)
else
:
????grid?
=
?addWidget(button,?pos[j][0],?pos[j][i])
把部件放入grid, 調用addWidget()方法就行了, 參數就是要放入的部件以及相應的行數和列數.
Figure: grid layout
需要說明一下, 部件也可以多行和多列. 下面的列子就演示了之一點.
?1?#!/usr/bin/python
?2?
?3?#?gridlayout2.py
?4?
?5?import?sys
?6?from?PyQt4?import?QtGui
?7?
?8?class?GridLayout2(QtGui.QWidget):
?9?????def?__init__(self,?parent=None):
10?????????QtGui.QWidget.__init__(self,?parent)
11?
12?????????self.setWindowTitle('grid?layout2')
13?
14?????????title?=?QtGui.QLabel('Title')
15?????????author?=?QtGui.QLabel('Author')
16?????????review?=?QtGui.QLabel('Review')
17?????????
18?????????titleEdit?=?QtGui.QLineEdit()
19?????????authorEdit?=?QtGui.QLineEdit()
20?????????reviewEdit?=?QtGui.QTextEdit()
21?
22?????????grid?=?QtGui.QGridLayout()
23?????????grid.setSpacing(10)
24?
25?????????grid.addWidget(title,?1,?0)
26?????????grid.addWidget(titleEdit,?1,?1)
27?
28?????????grid.addWidget(author,?2,?0)
29?????????grid.addWidget(authorEdit,?2,?1)
30?
31?????????grid.addWidget(review,?3,?0)
32?????????grid.addWidget(reviewEdit,?3,?1,?5,?1)
33?
34?????????self.setLayout(grid)
35?????????self.resize(350,?300)
36?
37?app?=?QtGui.QApplication(sys.argv)
38?qb?=?GridLayout2()
39?qb.show()
40?sys.exit(app.exec_())
41?
grid?
=
?QtGui.QGridLayout()
grid.setSpacing(
10
)
創建布局類, 并設定部件之間的距離為10個像素.
grid.addWidget(reviewEdit,?
3
,?
1
,?
5
,?,
1
)
給布局中添加部件時, 可以指定占據的行數和占據的列數. 這個例子中, 我們讓reviewEdit占據了5行.
Figure: grid layout 2