2.2 Layout management
Layout is how to manage the elements and windows in the application. There are two ways to do it: absolute positioning and layout class
2.2.1 Absolute positioning
Each program distinguishes the position of an element in pixels and measures the size of the element. So we can use absolute positioning to determine the position of each element and window. But this also has limitations:
- Elements will not change with the position and size of the window
- Not applicable to different platforms and different resolution monitors
- Changing the app font size will destroy the layout
- If you refactor this application, you need to calculate the position and size of each element
Program display
In this example, use absolute positioning layout application
import sys
from PyQt5.QtWidgets import QWidget, QApplication, QLabel
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
lab1 = QLabel("Hello world", self)
lab1.move(20, 20)
lab2 = QLabel("人生苦短", self)
lab2.move(40, 40)
lab3 = QLabel("我用Python", self)
lab3.move(60, 60)
self.setGeometry(300, 300, 250, 150)
self.setWindowTitle('绝对定位')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
e = Example()
sys.exit(app.exec_())
Program preview:
Code explanation
move(): To locate the element, use x and y coordinates, the origin of x and y coordinates is the upper left corner of the program
lab1 = QLabel("Hello world", self)
lab1.move(20, 20)
2.2.2 Box layout
The use of box layout can make the program more adaptable, QHBoxLayoutand QVBoxLayoutis the basic layout type, which are horizontal layout and vertical layout.
If we need to put two buttons in the lower right corner of the program to create such a layout, we only need a horizontal layout and a vertical layout box, and then use the flexible layout to add a little gap.
Program display
In this example, the application is laid out in a box layout. When the window size is changed, they can still remain in relative position
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QHBoxLayout, QVBoxLayout
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
ok = QPushButton("OK")
cancle = QPushButton("cancle")
# 水平布局
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(ok)
hbox.addWidget(cancle)
# 垂直布局
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
self.setLayout(vbox)
self.setGeometry(300, 300, 300, 150)
self.setWindowTitle('盒子布局')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
e = Example()
sys.exit(app.exec_())
Program preview:
Code explanation
Create two buttons
ok = QPushButton("OK")
cancle = QPushButton("cancle")
Create a horizontal layout object, the stretchfunction of the function is to increase the elastic space in front of the two buttons, it will squeeze the buttons to the right side of the window
# 水平布局
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(ok)
hbox.addWidget(cancle)
For layout needs, we put this horizontal layout in the vertical layout box, and the elastic elements will squeeze the horizontal layout to the bottom of the window
# 垂直布局
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
Finally, set the layout in the window
self.setLayout(vbox)
2.2.3 Grid layout
The most commonly used is the grid layout, which divides the window into rows and columns. To create and use a grid layout, you need to use the QGridLayout module.
Program display
In this example, create a rasterized button
import sys
from PyQt5.QtWidgets import QWidget, QApplication, QGridLayout, QPushButton
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
names = [
'cls', 'back', '<-', '=',
'9', '8', '7', '+',
'6', '5', '4', '-',
'3', '2', '1', '*',
'sin', '0', '.', '/'
]
positions = [(i, j) for i in range(5) for j in range(4)]
g = QGridLayout()
for name, position in zip(names, positions):
b = QPushButton(name)
g.addWidget(b, *position)
self.setLayout(g)
self.move(300, 150)
self.setWindowTitle('Calculator')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
e = Example()
sys.exit(app.exec_())
Program preview:
Code explanation
Create a QGridLayout instance
g = QGridLayout()
This is the name of the button that will be used
names = [
'cls', 'back', '<-', '=',
'9', '8', '7', '+',
'6', '5', '4', '-',
'3', '2', '1', '*',
'sin', '0', '.', '/'
]
Create a list of button locations
positions = [(i,j) for i in range(5) for j in range(4)]
Create buttons and use addWidget()methods to put them in the layout
for name, position in zip(names, positions):
b = QPushButton(name)
g.addWidget(b, *position)
Put the grid layout in the program window
self.setLayout(grid)
2.2.4 Grid layout example
Create a layout for submitting feedback information
Program display
In this example, create a window with three tabs. Two line editing and one text editing, this is done with QGridLayoutmodules
import sys
from PyQt5.QtWidgets import QWidget, QGridLayout, QApplication, QLabel, QLineEdit, QTextEdit
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
title = QLabel('title')
author = QLabel('author')
review = QLabel('review')
dtitle = QLineEdit()
dauthor = QLineEdit()
dreview = QTextEdit()
g = QGridLayout()
g.setSpacing(15)
g.addWidget(title, 0, 0)
g.addWidget(author, 1, 0)
g.addWidget(review, 2, 0)
g.addWidget(dtitle, 0, 1)
g.addWidget(dauthor, 1, 1)
g.addWidget(dreview, 2, 1, 5, 1)
self.setLayout(g)
self.setGeometry(300, 300, 350, 300)
self.setWindowTitle('Review')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
x = Example()
sys.exit(app.exec_())
Program preview:
Code explanation
Create three label controls
title = QLabel('title')
author = QLabel('author')
review = QLabel('review')
Create text edit box
dtitle = QLineEdit()
dauthor = QLineEdit()
dreview = QTextEdit()
Set 15 spaces between controls
g.setSpacing(15)
Specify the cross-row and cross-column size of the component, here specify that this element is displayed across 5 rows
g.addWidget(reviewEdit, 3, 1, 5, 1)