PyQt5初级教程--PyQt5中的布局管理[5/13]

想用PyQt5写GUI,但是网上的PyQt5资源太少了,找到一个英文的,翻译一下,和学习PyQt5的同学共勉!

(本系列中所有代码在windows7 64位[]/Python 3.4.3 32bit/PyQt GPL v5.5 for Python v3.4 (x32)/eric6-6.0.8下测试通过.)

原本地址:http://zetcode.com/gui/pyqt5/

================================================================================

GUI程序的重要一个方面就是布局管理.布局管理是我们如何将部件放到程序窗口内.这有两种方法.即绝对定位和布局类.

绝对定位

程序员定位每个部件的位置和大小到像素级.当你使用绝对定位时,我们需要明白以下的限制:
        如果我们改变一个窗口的大小时,一个部件的大小和定位不能更改.
       程序可能在不同平台上看起来不一样.
       在我们的程序内改变字体时可能会破坏布局
       如果我们决定修改布局,我们必须全部重做我们的布局,那可是繁琐又费时的.

下面的例子是用绝对定位布局部件.

import sysfrom PyQt5.QtWidgets import QWidget, QLabel, QApplicationclass 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_())

我们用mover()方法来定位我们的部件.在这个例子中部件是标签.我们定位他们的时候是用的坐标轴的x和y.最开始的坐标系统是在左上角.x是从左到右的,y是从上到下的.

lbl1 = QLabel('Zetcode', self)lbl1.move(15, 10)

标签部件定位在x=15,y=10的位置.

图片:绝对定位

框布局

用布局类的布局管理有着更好的灵活性和实用性.它是更好的将部件放到一个窗口中的办法.QHBoxLayout和QVBoxLayout是基本的布局类,它会让部件们水平和垂直的对齐是.

想象一下,我们想把两个按钮放到右下角.要创建一个这样的布局,我们要用到一个水平和一个垂直框.为了创建必要的空间,我们要添加一下伸缩因子.

import sysfrom 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_())

例子中我们在窗口的右下角放置了两个按钮.当我们调整程序窗口的大小时,它们的位置不变.我们用了一个HBoxLayout和一个QVBoxLayout. 

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)

最终,我们设置窗口的主布局.

图片:按钮

QGridLayout(网格布局)

最常用的布局类是网格布局.这个布局将空间分隔为行和列.要创建一个网络布局,我们会用QGridLayout这个类.

import sysfrom 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_())

在这个例子中,我们创建了网格按钮.要填补一个空位,我们就添加一个QLabel部件.

grid = QGridLayout()self.setLayout(grid)

QGridLayout的实例被创建,并设置为程序窗口的布局.

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)

按钮被创建并通过addWidget()方法被添加到布局中.

图片:计算器

复审例子

部件在网格中可以被分成多行多列.在下一个例子中我们会演示.

import sysfrom 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完成的.

grid = QGridLayout()grid.setSpacing(10)

我们创建一个网格布局并设置部件之间的间距.

grid.addWidget(reviewEdit, 3, 1, 5, 1)

如果我们添加一个部件到网格,我们可以提供部件的行宽和列宽.在这个例子中,我们用reviewEdit把部件分成5行.

图片:复审