布局管理

    每个程序都是以像素为单位区分元素的位置，衡量元素的大小。所以我们完全可以使用绝对定位搞定每个元素和窗口的位置。但是这也有局限性：

    • 元素不会随着我们更改窗口的位置和大小而变化。
    • 不能适用于不同的平台和不同分辨率的显示器
    • 更改应用字体大小会破坏布局
    • 如果我们决定重构这个应用，需要全部计算一下每个元素的位置和大小

    下面这个就是绝对定位的应用

    我们使用move()方法定位了每一个元素，使用x、y坐标。x、y坐标的原点是程序的左上角。

    2. lbl1.move(15, 10)

    这个元素的左上角就在这个程序的左上角开始的(15, 10)的位置。

    程序展示：

    使用盒布局能让程序具有更强的适应性。这个才是布局一个应用的更合适的方式。QHBoxLayout和QVBoxLayout是基本的布局类，分别是水平布局和垂直布局。

    如果我们需要把两个按钮放在程序的右下角，创建这样的布局，我们只需要一个水平布局加一个垂直布局的盒子就可以了。再用弹性布局增加一点间隙。

    1. #!/usr/bin/python3
    2. # -*- coding: utf-8 -*-
    4. """
    5. ZetCode PyQt5 tutorial 
    7. In this example, we position two push
    8. buttons in the bottom-right corner 
    9. of the window. 
    11. Author: Jan Bodnar
    12. Website: zetcode.com 
    13. Last edited: August 2017
    14. """
    16. import sys
    17. from PyQt5.QtWidgets import (QWidget, QPushButton, 
    18.     QHBoxLayout, QVBoxLayout, QApplication)
    21. class Example(QWidget):
    23.     def __init__(self):
    24.         super().__init__()
    26.         self.initUI()
    29.     def initUI(self):
    31.         okButton = QPushButton("OK")
    32.         cancelButton = QPushButton("Cancel")
    34.         hbox = QHBoxLayout()
    35.         hbox.addStretch(1)
    36.         hbox.addWidget(okButton)
    37.         hbox.addWidget(cancelButton)
    39.         vbox = QVBoxLayout()
    40.         vbox.addStretch(1)
    41.         vbox.addLayout(hbox)
    43.         self.setLayout(vbox)    
    45.         self.setGeometry(300, 300, 300, 150)
    46.         self.setWindowTitle('Buttons')    
    47.         self.show()
    50. if __name__ == '__main__':
    52.     app = QApplication(sys.argv)
    53.     ex = Example()
    54.     sys.exit(app.exec_())

    上面的例子完成了在应用的右下角放了两个按钮的需求。当改变窗口大小的时候，它们能依然保持在相对的位置。我们同时使用了QHBoxLayout和QVBoxLayout。

    1. okButton = QPushButton("OK")
    2. cancelButton = QPushButton("Cancel")
    1. hbox = QHBoxLayout()
    2. hbox.addWidget(okButton)
    3. hbox.addWidget(cancelButton)

    创建一个水平布局，增加两个按钮和弹性空间。stretch函数在两个按钮前面增加了一些弹性空间。下一步我们把这些元素放在应用的右下角。

    为了布局需要，我们把这个水平布局放到了一个垂直布局盒里面。弹性元素会把所有的元素一起都放置在应用的右下角。

    1. self.setLayout(vbox)

    最后，我们就得到了我们想要的布局。

    程序预览：

    buttons

    最常用的还是栅格布局了。这种布局是把窗口分为行和列。创建和使用栅格布局，需要使用QGridLayout模块。

    2. # -*- coding: utf-8 -*-
    4. """
    5. ZetCode PyQt5 tutorial 
    7. In this example, we create a skeleton
    8. of a calculator using a QGridLayout.
    10. author: Jan Bodnar
    11. website: zetcode.com 
    12. last edited: January 2015
    13. """
    15. import sys
    16. from PyQt5.QtWidgets import (QWidget, QGridLayout, 
    17.     QPushButton, QApplication)
    20. class Example(QWidget):
    22.     def __init__(self):
    23.         super().__init__()
    25.         self.initUI()
    28.     def initUI(self):
    30.         grid = QGridLayout()
    31.         self.setLayout(grid)
    33.         names = ['Cls', 'Bck', '', 'Close',
    34.                  '7', '8', '9', '/',
    35.                 '4', '5', '6', '*',
    36.                  '1', '2', '3', '-',
    37.                 '0', '.', '=', '+']
    39.         positions = [(i,j) for i in range(5) for j in range(4)]
    41.         for position, name in zip(positions, names):
    43.             if name == '':
    44.                 continue
    45.             button = QPushButton(name)
    46.             grid.addWidget(button, *position)
    48.         self.move(300, 150)
    49.         self.setWindowTitle('Calculator')
    50.         self.show()
    53. if __name__ == '__main__':
    55.     app = QApplication(sys.argv)
    56.     ex = Example()
    57.     sys.exit(app.exec_())

    这个例子里，我们创建了栅格化的按钮。

    1. grid = QGridLayout()
    2. self.setLayout(grid)

    创建一个QGridLayout实例，并把它放到程序窗口里。

    1. names = ['Cls', 'Bck', '', 'Close',
    2.         '7', '8', '9', '/',
    3.         '4', '5', '6', '*',
    4.         '1', '2', '3', '-',
    5.         '0', '.', '=', '+']

    这是我们将要使用的按钮的名称。

    2.     if name == '':
    4.     button = QPushButton(name)
    5.     grid.addWidget(button, *position)

    创建按钮，并使用addWidget()方法把按钮放到布局里面。

    程序预览：

    组件能跨列和跨行展示，这个例子里，我们就试试这个功能。

    1. #!/usr/bin/python3
    2. # -*- coding: utf-8 -*-
    4. """
    5. ZetCode PyQt5 tutorial 
    7. In this example, we create a more 
    8. complicated window layout using
    9. the QGridLayout manager. 
    11. Author: Jan Bodnar
    12. Website: zetcode.com 
    13. Last edited: August 2017
    14. """
    16. import sys
    17. from PyQt5.QtWidgets import (QWidget, QLabel, QLineEdit, 
    18.     QTextEdit, QGridLayout, QApplication)
    20. class Example(QWidget):
    22.     def __init__(self):
    23.         super().__init__()
    25.         self.initUI()
    28.     def initUI(self):
    30.         title = QLabel('Title')
    31.         author = QLabel('Author')
    32.         review = QLabel('Review')
    34.         titleEdit = QLineEdit()
    35.         authorEdit = QLineEdit()
    36.         reviewEdit = QTextEdit()
    38.         grid = QGridLayout()
    39.         grid.setSpacing(10)
    41.         grid.addWidget(title, 1, 0)
    42.         grid.addWidget(titleEdit, 1, 1)
    44.         grid.addWidget(author, 2, 0)
    45.         grid.addWidget(authorEdit, 2, 1)
    47.         grid.addWidget(review, 3, 0)
    48.         grid.addWidget(reviewEdit, 3, 1, 5, 1)
    50.         self.setLayout(grid) 
    52.         self.setGeometry(300, 300, 350, 300)
    53.         self.setWindowTitle('Review')    
    54.         self.show()
    57. if __name__ == '__main__':
    59.     app = QApplication(sys.argv)
    60.     ex = Example()
    61.     sys.exit(app.exec_())

    我们创建了一个有三个标签的窗口。两个行编辑和一个文版编辑，这是用QGridLayout模块搞定的。

    1. grid = QGridLayout()

    创建标签之间的空间。

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

    我们可以指定组件的跨行和跨列的大小。这里我们指定这个元素跨5行显示。

    程序预览：

    review example