PySide学习笔记第七章－布局管理

在GUI编程中，布局管理相当重要，布局管理就是我们在窗口中放置小工具的方式。布局管理有两种方式

1、absolute positioning 绝对路径

2、layout classes 布局类

一、绝对路径

开发者具体指明每个工具的大小和尺寸，当你用绝对路径时，你需要理解下列东西

1、当我们resize一个窗口的时候，工具的大小的位置不会改变

2、在不同的平台，应用看起来会不一样

3、在应用中改变字体可能破坏整个布局

4、当我们改变布局的时候，必需完全重做，这是非常无聊且耗时的

下面的代码演示来如何用绝对路径的方式在一个窗口中显示3个lable

# -*- coding: utf-8 -*-

"""
ZetCode PySide tutorial
This example shows three labels on a window
using absolute positioning.
author: Jan Bodnar
website: zetcode.com
last edited: August 2011
"""
import sys
from PySide import QtGui

class Example(QtGui.QWidget):
def __init__(self):
super(Example, self).__init__()

self.initUI()

def initUI(self):
label1 = QtGui.QLabel('Zetcode', self) # 创建lable
label1.move(15, 10) # 放置lable到既定位置

label2 = QtGui.QLabel('tutorials', self)
label2.move(35, 40)

label3 = QtGui.QLabel('for programmers', self)
label3.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()

二、布局管理

1、用布局类来进行布局管理相当灵活而且很实用，基本的布局类是 QtGui.QHBoxLayout 和 QtGui.QVBoxLayout ，它们按照行和列对其工具（widgets）

假设我们想在右下角放置两个button，为了实现这样一个布局，我们会用到一个水平和一个竖直框，为了创建这两个button所需要的空间，还要一个 stretch factor.

# -*- coding: utf-8 -*-

"""
ZetCode PySide 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: August 2011
"""
import sys
from PySide 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") # 创建两个button

hbox = QtGui.QHBoxLayout() # 创建水平框布局
hbox.addStretch(1) # 在水平方向上添加一个stretch factor参数,以及两个按钮,如此会将按钮放到窗口右边
hbox.addWidget(okButton)
hbox.addWidget(cancelButton)

vbox = QtGui.QVBoxLayout() # 创建竖直框布局
vbox.addStretch(1) # 在竖直方向上添加一个stretch factor参数,以及两个按钮,如此会将按钮放到窗口下边
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()

2、网格布局

下面是一个利用网格布局类（QtGui.QGridLayout ）做的一个计算器的demo

# -*- coding: utf-8 -*-

"""
ZetCode PySide tutorial
In this example, we create a skeleton
of a calculator using a QGridLayout.
author: Jan Bodnar
website: zetcode.com
last edited: August 2011
"""
import sys
from PySide import QtGui

class Example(QtGui.QWidget):
def __init__(self):
super(Example, self).__init__()

self.initUI()

def initUI(self):
names = ['Cls', 'Bck', '', 'Close', '7', '8', '9', '/',
'4', '5', '6', '*', '1', '2', '3', '-',
'0', '.', '=', '+']
grid = QtGui.QGridLayout() # 创建grid

j = 0
pos = [(0, 0), (0, 1), (0, 2), (0, 3),
(1, 0), (1, 1), (1, 2), (1, 3),
(2, 0), (2, 1), (2, 2), (2, 3),
(3, 0), (3, 1), (3, 2), (3, 3 ),
(4, 0), (4, 1), (4, 2), (4, 3)]
for i in names: # 定义grid
button = QtGui.QPushButton(i)
if j == 2:
grid.addWidget(QtGui.QLabel(''), 0, 2)
else: grid.addWidget(button, pos[j][0], pos[j][1])
j = j + 1

self.setLayout(grid) # 显示 grid

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()

3、回顾：

Widgets can span multiple columns or rows in a grid. Widgets类在网格中可以跨越不同的列和行

# -*- coding: utf-8 -*-

"""
ZetCode PySide tutorial
In this example, we create a bit
more complicated window layout using
the QGridLayout manager.
author: Jan Bodnar
website: zetcode.com
last edited: August 2011
"""
import sys
from PySide import QtGui

class Example(QtGui.QWidget):
def __init__(self):
super(Example, self).__init__()

self.initUI()

def initUI(self):
title = QtGui.QLabel('Title')# 在QtGui.QWidget中,创建3个lable
author = QtGui.QLabel('Author')
review = QtGui.QLabel('Review')

titleEdit = QtGui.QLineEdit() # 在QtGui.QWidget中,创建2个lineEdit以及一个TextEdit
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) # 在不同的工具间设置空间,如果我们在网格里添加工具,我们可以指定该工具占行以及列的个数,这里指定reviewEdit占5行

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()