pyqt5 学习笔记四（布局：QBoxLayout）

pyqt5 学习笔记四 (QBoxLayout) 垂直布局器与水平布局器

写在前面：
①本教程使用pycharm编译器进行pyqt5的学习，安装教程请大家自行百度
②本系列博客根据B站王铭东博主教程学习学习代码笔记4
链接：https://pan.baidu.com/s/1i3y4mI_9N84iAC6tav-j8Q
提取码：gupx
资料：
【1】B站教程
【2】B站教程配套课件
【3】PyQt官网的所有模块（有部分内容没有补充进去）
【4】C++具体实现的API文档

布局器

共有四种：
QBoxLayout：垂直水平布局器
QGridLayout：网格布局器
QFormLayout：表单布局器
QStackedLayout：抽屉布局器

（一）类的写法

1、类的写法

本次代码引入类的概念，类的含义参考链接：https://blog.csdn.net/m0_54162026/article/details/113184990

import sys
from PyQt5.QtWidgets import QApplication, QVBoxLayout, QWidget, QPushButton, QGroupBox, QMainWindow
from PyQt5.QtCore import Qt
class MyWindow(QWidget):
   # 重写init方法
   def __init__(self): 
       # 切记一定要调用父类的__init__方法，因为它里面有很多对UI空间的初始化操作
       super().__init__()
if __name__ == '__main__':
   app = QApplication(sys.argv)
   # 创建一个QWidget子类
   w = MyWindow()
   w.show()
   app.exec()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

① QApplication(sys.argv)
② class MyWindow(QWidget)：新建一个类，继承QWidget (ps:Object类为所有类的父类)
③ def init(self): super().__init__() 一定要调用父类的__init__方法，因为它里面有很多对UI空间的初始化操作（PS:python的深度学习很多模型的类也是要调用父类的init方法的）
如果不写调用父类的方法会报错：RuntimeError: super-class __init__() of type MyWindow was never called
④ w = MyWindow()：
⑤ 类的实例化，生成一个w对象
⑥ w.show() app.exec()

2、快捷键 ctrl

ctrl+左键:快速跳转，如：想要查看QWidget类的代码，鼠标指向QWidget,同时按ctrl并点击QWidget
跳转到此处：
在这里插入图片描述

（二）垂直布局窗口 QVBoxLayout

1、垂直布局器的初步写法

layout = QVBoxLayout() ：创建垂直布局器
layout.addWidget(btn1) ：将控件添加到布局器中
self.setLayout(layout) ：让当前窗口使用layout布局器
代码：

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton
 # 创建MyWindow,继承了QWidget父类
class MyWindow(QWidget):
    # 重写init方法
    def __init__(self):
        # 切记一定要调用父类的__init__方法，因为它里面有很多对UI空间的初始化操作
        super().__init__()
        self.resize(300,300)
        self.setWindowTitle("垂直布局")

        # 创建垂直布局器
        layout = QVBoxLayout()
        # 生成按钮
        btn1 = QPushButton("按钮1")
        btn2 = QPushButton("按钮2")
        btn3 = QPushButton("按钮3")
        # 按钮添加到布局器中(有布局器直接放到布局器中)
        layout.addWidget(btn1)
        layout.addWidget(btn2)
        layout.addWidget(btn3)    
        # 让当前窗口使用设置好的layout布局
        self.setLayout(layout)
if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = MyWindow()
    w.show()
    app.exec()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

输出结果：
在这里插入图片描述

2、layout.addStretch() 伸缩器“弹簧”

layout.addStretch() ：可伸缩的间隔，在垂直布局下就是垂直方向的控件之间的间隔。作用是在布局器中增加一个伸缩量，里面的参数表示QSpacerItem的个数，默认值为零

(1) addStretch() 没有设置值

代码：

import sys
from PyQt5.QtWidgets import QApplication, QVBoxLayout, QWidget, QPushButton, QGroupBox, QMainWindow
from PyQt5.QtCore import Qt
class MyWindow(QWidget):
   def __init__(self):
       # 切记一定要调用父类的__init__方法，因为它里面有很多对UI空间的初始化操作
       super().__init__()
       self.resize(300, 300)
       self.setWindowTitle("垂直布局")
       # 垂直布局
       layout = QVBoxLayout()  
       # 按钮1
       btn1 = QPushButton("按钮1")
       # 添加到布局器中
       # layout.addWidget(btn1, Qt.AlignmentFlag.AlignTop)
       layout.addWidget(btn1)
       layout.addStretch()
       # 按钮2
       btn2 = QPushButton("按钮2")
       layout.addWidget(btn2)
       layout.addStretch()
       # 按钮3
       btn3 = QPushButton("按钮3")
       layout.addWidget(btn3)
       layout.addStretch()
       self.setLayout(layout)
if __name__ == '__main__':
   app = QApplication(sys.argv)
   w = MyWindow()
   w.show()
   app.exec()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

输出结果：
在这里插入图片描述
如果函数layout.addStretch() 没有参数，则按照“弹簧”的个数，将间隔等分，a=b=c，如上图所示。

(2) addStretch(1) 设置值

代码:

     # 垂直布局
       layout = QVBoxLayout()
       layout.addStretch(1)
       # 按钮1
       btn1 = QPushButton("按钮1")
       layout.addWidget(btn1)
       layout.addStretch(1)
       # 按钮2
       btn2 = QPushButton("按钮2")
       layout.addWidget(btn2)
       layout.addStretch(1)
       # 按钮3
       btn3 = QPushButton("按钮3")
       layout.addWidget(btn3)
       layout.addStretch(2)
       self.setLayout(layout)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

输出结果：
在这里插入图片描述
按照设定的值将间隔按照比例分为1：1：1：2

(3) addStretch() 有的设置值；有的不设置

        layout = QVBoxLayout()
        layout.addStretch(1)
        # 按钮1
        btn1 = QPushButton("按钮1")
        layout.addWidget(btn1)
        layout.addStretch(1)
        # 按钮2
        btn2 = QPushButton("按钮2")
        layout.addWidget(btn2)
        layout.addStretch(1)
        # 按钮3
        btn3 = QPushButton("按钮3")
        layout.addWidget(btn3)
        layout.addStretch()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

输出结果： 1：1：1：0 不设置值的没有分配
在这里插入图片描述

（三）水平布局窗口 QHBoxLayout

1、QGroupBox

QGroupBox必须使用布局才能正确显示，否则会挤在一起

(1) 错误写法

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QGroupBox, QRadioButton
class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.initui()
    def initui(self):
        container = QVBoxLayout()
        h_box = QGroupBox("hobby")
        QRadioButton("sing",h_box)
        QRadioButton("dance",h_box)
        QRadioButton("rap",h_box)
        container.addWidget(h_box)
        self.setLayout(container)
if __name__== '__main__':
    app = QApplication(sys.argv)
    w = MyWindow()
    w.show()
    app.exec()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19