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