This article mainly introduces in detail the relevant information about layout management that must be learned every day in PyQt5. It has a certain reference value. Interested friends can refer to it.
There is a guide in GUI programming The part that cannot be ignored is layout management. Layout management controls how our controls are placed in the application window. Layout management can be done in two ways. We can use absolute positioning or layout class methods to control the position of controls in the program window.
Absolute positioning
Each control is placed at the position specified by the programmer. When you use absolute positioning, we need to be aware of the following limitations:
If we resize the window the size and position of the control remain the same
The application may look different on different platforms
Changing fonts may break the layout of the application
If you decide to change the layout, we Each control must be completely modified, which is tedious and time-consuming
The following example is the absolute coordinate positioning method of the control.
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
PyQt5 教程
这个例子显示了在窗口中使用绝对定位的三个标签。
作者：我的世界你曾经来过
博客：http://blog.csdn.net/weiaitaowang
最后编辑：2016年7月31日
"""
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
lbl1 = QLabel('我的世界你曾经来过', self)
lbl1.move(15, 10)
lbl2 = QLabel('CSND博客', self)
lbl2.move(35, 40)
lbl3 = QLabel('程序员', self)
lbl3.move(55, 70)
self.setGeometry(300, 300, 250, 150)
self.setWindowTitle('绝对定位')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
Copy after login
In our examples, labels are used. We position them by providing x and y coordinate values. The origin of the coordinate system is the upper left corner of the control. The x value increases from left to right. The y value increases from top to bottom.
lbl1 = QLabel('我的世界你曾经来过', self)
lbl1.move(15, 10)
Copy after login
The label control is placed at x=15 and y=10.
After program execution
Box layout box layout
How to use layout class for layout management More flexible and practical. It is the preferred way to place a control in a window. QHBoxLayout and QVBoxLayout are the basic layout classes for horizontally and vertically aligned controls respectively.
Just imagine, we want to put two buttons in the lower right corner of the program. To create such a layout, we can use two boxes, one horizontal and one vertical. To create the necessary free space, we will add a stretch factor.
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
PyQt5 教程
在这个例子中，我们在窗口的右下角放置两个按钮。
作者：我的世界你曾经来过
博客：http://blog.csdn.net/weiaitaowang
最后编辑：2016年7月31日
"""
import sys
from PyQt5.QtWidgets import (QApplication, QWidget,
QPushButton, QVBoxLayout, QHBoxLayout)
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
okButton = QPushButton('确定')
cancelButton = QPushButton('取消')
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, 350, 150)
self.setWindowTitle('Box布局')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
Copy after login
This example places two buttons in the lower right corner of the window. When we resize application windows, they are fixed to the lower right corner. We use both HBoxLayout and QVBoxLayout layouts.
okButton = QPushButton('确定')
cancelButton = QPushButton('取消')
Copy after login
Here we have created two buttons.
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(okButton)
hbox.addWidget(cancelButton)
Copy after login
We created a horizontal box layout, increased the stretch factor (addStretch), and added (addWidget) two buttons. Added a stretch factor before adding the two buttons, which will push the two buttons to the right side of the window.
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
Copy after login
To get the layout we want, we also need to put the horizontal layout into a vertical layout. A stretch factor on the vertical box will push the horizontal box, including the controls inside it, to the bottom of the window.
self.setLayout(vbox)
Copy after login
Finally, we set the main layout of the window.
After program execution
QGridLayout Grid layout
The most commonly used layout class is grid layout . This layout divides the space into rows and columns. To create a grid layout, we use the QGridLayout class.
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
PyQt5 教程
在这个例子中，我们使用网格布局创建一个计算器的框架。
作者：我的世界你曾经来过
博客：http://blog.csdn.net/weiaitaowang
最后编辑：2016年7月31日
"""
import sys
from PyQt5.QtWidgets import (QApplication, QWidget,
QPushButton, QGridLayout)
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('计算器')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())Copy after login
In our example, we will place the created button control in a grid.
grid = QGridLayout()
self.setLayout(grid)
Copy after login
Instantiate QGridLayout and set the layout of the application window.
names = ['Cls', 'Bck', '', 'Close',
'7', '8', '9', '/',
'4', '5', '6', '*',
'1', '2', '3', '-',
'0', '.', '=', '+',]
Copy after login
This is the button label that will be used in the future.
positions = [(i, j) for i in range(5) for j in range(4)]
Copy after login
xWe create a list of grid locations.
for position, name in zip(positions, names):
if name == '':
continue
button = QPushButton(name)
grid.addWidget(button, *position)Copy after login
Create a button and add (addWidget) to the layout.
After the program is executed
Expand the grid layout
The controls in the window can span across the grid Multiple columns or rows. In the following example we illustrate this.
#!/usr/bin/python3
# -*- coding: utf-8 -*-
"""
PyQt5 教程
在这个例子中，我们使用GridLayout的跨行创建了一个更复杂的窗口布局。
作者：我的世界你曾经来过
博客：http://blog.csdn.net/weiaitaowang
最后编辑：2016年7月31日
"""
import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QLabel,
QTextEdit, QLineEdit, QGridLayout)
class Example(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
title = QLabel('标题')
author = QLabel('作者')
review = QLabel('评论')
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('评论')
self.show()
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
Copy after login
The program we created contains three labels, two single-line text input boxes and a text editing control. Use QGridLayout layout.
grid =QGridLayout()
grid.setSpacing(10)
Copy after login
Instance the grid layout and set the spacing.
grid.addWidget(reviewEdit, 3, 1, 5, 1)
Copy after login
Add a control to the grid layout, we can use row span or column span for this control. In our example, we require the reviewEdit control to span 5 rows.
After program execution
This part of the PyQt5 tutorial is dedicated to layout management. The event-related content of PyQt5 will be introduced later.
related suggestion:
PyQt5 Must Learn Every Day Check Boxes with Labels
PyQt5 Must Learn Every Day Create Window Centering Effect
PyQt5 Must learn to close the window every day
The above is the detailed content of Layout management that you must learn every day in PyQt5. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
