# PyQt4入门学习笔记（三）
PyQt4内的布局
布局方式是我们控制我们的GUI页面内各个控件的排放位置的。我们可以通过两种基本方式来控制：
1.绝对位置
2.layout类
绝对位置
这种方式要求程序员必须得指定好每个控件的位置和尺寸。当我们使用绝对位置时，我们得明白下面的几条限制：
- 当我们改变窗口大小时，控件的尺寸和位置不会改变。
- 我们的应用可能看起来和一般的应用有所不同。
- 改变前端页面可能会让我们的应用崩溃
- 如果我们决定要改变我们的布局时，我们必须要把所有控件的位置全部更新
下面这个例子将会使用绝对位置来控制各个控件的位置。
#!/usr/bin/python
# -*- coding: utf-8 -*-
"""
ZetCode PyQt4 tutorial
This example shows three labels on a window
using absolute positioning.
author: Jan Bodnar
website: zetcode.com
last edited: October 2011
"""
import sys
from PyQt4 import QtGui
class Example(QtGui.QWidget):
def __init__(self):
super(Example, self).__init__()
self.initUI()
def initUI(self):
lbl1 = QtGui.QLabel('ZetCode', self)
lbl1.move(15, 10)
lbl2 = QtGui.QLabel('tutorials', self)
lbl2.move(35, 40)
lbl3 = QtGui.QLabel('for programmers', self)
lbl3.move(55, 70)
self.setGeometry(300, 300, 250, 150)
self.setWindowTitle('Absolute')
self.show()
def main():
app = QtGui.QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
if __name__ == '__main__':
main()我们使用move()方法来设定我们的控件的位置。在这个例子里，是QtGui.QLabel。我们通过x和y的坐标来确定控件的位置。坐标的原点位置在左上角。x坐标是从左到右的像素值，y是从上到下的像素值。
lbl1 = QtGui.QLabel('Zetcode', self)
lbl1.move(15, 10)在这里我们将这个label设定在(15,10)位置。
盒子布局
通过layout类来控制部件位置要更方便和可行一些。这是首选的控制部件位置的方式。QtGui.QHBoxLayout和QtGui.QVBoxLayout是一个水平和一个垂直布局的基础布局类。
假设我们有两个按钮在右下角。为了创建这样一个布局，我们将要使用一个水平和垂直的盒子。为了创建足够的空间，我们将要使用“伸展因子”(stretch factor)
#!/usr/bin/python
# -*- coding: utf-8 -*-
"""
ZetCode PyQt4 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: October 2011
"""
import sys
from PyQt4 import QtGui
class Example(QtGui.QWidget):
def __init__(self):
super(Example, self).__init__()
self.initUI()
def initUI(self):
okButton = QtGui.QPushButton("OK")
cancelButton = QtGui.QPushButton("Cancel")
hbox = QtGui.QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(okButton)
hbox.addWidget(cancelButton)
vbox = QtGui.QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)#注意这里
self.setLayout(vbox)
self.setGeometry(300, 300, 300, 150)
self.setWindowTitle('Buttons')
self.show()
def main():
app = QtGui.QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
if __name__ == '__main__':
main()这个例子里将两个按钮放在窗口的右下角。他们无论我们怎么改变窗口大小都同样在窗口的右下角。我们使用了QtGui.HBoxLayout和tGui.HBoxLayout。
okButton = QtGui.QPushButton("OK")
cancelButton = QtGui.QPushButton("Cancel")这里我们创建了两个点击按钮
hbox = QtGui.QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(okButton)
hbox.addWidget(cancelButton)我们创建了一个水平的盒子布局，并且设定了一个伸展因子，它将会将两个按钮控制在窗口的右侧。
vbox = QtGui.QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)为了必要的布局，我们放了一个垂直的布局并且伸展因子同样是1，它将会使两个按钮始终保持在窗口底部。
self.setLayout(vbox)最终我们把设定好的布局放到应用里。（要注意vbox之前已经将hbox加载进来了addlayout）
QtGui.QGridLayout
最普遍的布局类就是这个网格布局。这个布局将空间分成行和列。我们通过QtGui.QGridLayout类来创建一个坐标布局。
#!/usr/bin/python
# -*- coding: utf-8 -*-
import sys
from PyQt4 import QtGui
"""
ZetCode PyQt4 tutorial
In this example, we create a skeleton
of a calculator using a QtGui.QGridLayout.
author: Jan Bodnar
website: zetcode.com
last edited: July 2014
"""
class Example(QtGui.QWidget):
def __init__(self):
super(Example, self).__init__()
self.initUI()
def initUI(self):
grid = QtGui.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 = QtGui.QPushButton(name)
grid.addWidget(button, *position)
self.move(300, 150)
self.setWindowTitle('Calculator')
self.show()
def main():
app = QtGui.QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
if __name__ == '__main__':
main()在我们的例子里，我们创建了一个按钮的坐标位置。
grid = QtGui.QGridLayout()
self.setLayout(grid)我们创建了一个QtGui.QGridLayout()并且将其设置为应用的布局方式。
names = ['Cls', 'Bck', '', 'Close',
'7', '8', '9', '/',
'4', '5', '6', '*',
'1', '2', '3', '-',
'0', '.', '=', '+']上述代码是设定一个个按钮的label
positions = [(i,j) for i in range(5) for j in range(4)]我们创建了一个网格位置列表，准备将那些按钮按照这个位置列表排放
for position, name in zip(positions, names):
if name == '':
continue
button = QtGui.QPushButton(name)
grid.addWidget(button, *position)用grid.addWidgt()来在布局上增加按钮
###评论窗口例子###
控件可以在网格布局中跨越多个行多个列。我们在下一个例子里将举例说明。
#!/usr/bin/python
# -*- coding: utf-8 -*-
"""
ZetCode PyQt4 tutorial
In this example, we create a bit
more complicated window layout using
the QtGui.QGridLayout manager.
author: Jan Bodnar
website: zetcode.com
last edited: October 2011
"""
import sys
from PyQt4 import QtGui
class Example(QtGui.QWidget):
def __init__(self):
super(Example, self).__init__()
self.initUI()
def initUI(self):
title = QtGui.QLabel('Title')
author = QtGui.QLabel('Author')
review = QtGui.QLabel('Review')
titleEdit = QtGui.QLineEdit()
authorEdit = QtGui.QLineEdit()
reviewEdit = QtGui.QTextEdit()
grid = QtGui.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()
def main():
app = QtGui.QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
if __name__ == '__main__':
main()我们创建了三个标签，两个编辑行，一个文本编辑控件。布局是通过QtGui.QGridLayout来完成
grid = QtGui.QGridLayout()
grid.setSpacing(10)我们创建了一个网格布局并且在两个控件间留下空间。
grid.addWidget(reviewEdit, 3, 1, 5, 1)如果我们添加一个控件在网格里，我们可以令控件跨越多行或多列。在我们的例子里，reviewEdit跨越了5行。