pyqt5 学习笔记四（QBoxLayout）垂直布局器与水平布局器

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

- pyqt5 学习笔记四 (QBoxLayout) 垂直布局器与水平布局器
- - 布局器
  - （一）类的写法
  - - 1、类的写法
    - 2、快捷键 ctrl
  - （二）垂直布局窗口 QVBoxLayout
  - - 1、垂直布局器的初步写法
    - 2、layout.addStretch() 伸缩器“弹簧”
    - - (1) addStretch() 没有设置值
      - (2) addStretch(1) 设置值
      - (3) addStretch() 有的设置值；有的不设置
  - （三）水平布局窗口 QHBoxLayout
  - - 1、QGroupBox
    - - (1) 错误写法
      - (2) 正确写法1
      - (2) 正确写法2
    - 2、水平布局与垂直布局的混合使用

写在前面：
①本教程使用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()

① 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()

输出结果：

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()

输出结果：

如果函数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：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：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()

输出结果：

(2) 正确写法1

# QGroupBox
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QGroupBox, QRadioButton
if __name__== '__main__':
    app = QApplication(sys.argv)
    w = QWidget()
    container = QVBoxLayout()

    v_layout = QVBoxLayout()
    h_box = QGroupBox("hobby")
    btn1 = QRadioButton("sing")
    btn2 = QRadioButton("dance")
    btn3 = QRadioButton("rap")
    v_layout.addWidget(btn1)
    v_layout.addWidget(btn2)
    v_layout.addWidget(btn3)
    h_box.setLayout(v_layout)
    
    container.addWidget(h_box)
    w.setLayout(container)
    w.show()
    app.exec()

(2) 正确写法2

代码：

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QGroupBox, QRadioButton,QHBoxLayout
class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.initui()
    def initui(self):
        # container = QVBoxLayout()
        h_box = QGroupBox("hobby")
        v_layout = QVBoxLayout()
        btn1 = QRadioButton("sing")
        btn2 = QRadioButton("dance")
        btn3 = QRadioButton("rap")
        v_layout.addWidget(btn1)
        v_layout.addWidget(btn2)
        v_layout.addWidget(btn3)
        h_box.setLayout(v_layout)
        h_box.setParent(self)
        # container.addWidget(h_box)
        # self.setLayout(container)
if __name__== '__main__':
    app = QApplication(sys.argv)
    w = MyWindow()
    w.resize(100,100)
    w.show()
    app.exec()

输出结果：

QGroupBox步骤：
必须使用布局，将选项添加到布局当中
① h_box = QGroupBox("hobby") ：新建group对象
② v_layout = QVBoxLayout() ：新建布局
③ btn1 = QRadioButton("sing") ：新建group组中的按钮
④ v_layout.addWidget(btn1) ：将一系列按钮放入布局中
⑤ h_box.setLayout(v_layout)：group使用该布局
此时的group已经设置好了内部的按钮以及按钮的布局，就可以把这个整体作为一个控件使用了

2、水平布局与垂直布局的混合使用

代码:

import sys
from PyQt5.QtWidgets import QWidget, QGroupBox, QRadioButton, QApplication, QVBoxLayout, QHBoxLayout
class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.initui()
    def initui(self):
        container = QVBoxLayout() # 设置整体垂直布局
        # hobby_group
        h_group = QGroupBox("hobby")
        v_layout = QVBoxLayout()  # hobby的选项的垂直布局
        btn1 = QRadioButton("sing")
        btn2 = QRadioButton("dance")
        btn3 = QRadioButton("rap")
        v_layout.addWidget(btn1)
        v_layout.addWidget(btn2)
        v_layout.addWidget(btn3)
        h_group.setLayout(v_layout)

        # gender_group
        g_group = QGroupBox("gender")
        h_layout = QHBoxLayout() # gender的选项的水平布局
        btn1 = QRadioButton("male")
        btn2= QRadioButton("female")
        h_layout.addWidget(btn1)
        h_layout.addWidget(btn2)
        g_group.setLayout(h_layout)

        container.addWidget(h_group)
        container.addWidget(g_group)
        self.setLayout(container)  # 有且只有一个self.layout

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = MyWindow()
    w.show()
    app.exec()

结果显示：

(1) 设置垂直布局container
(2) hobby组：
  ① 创建hobby的group 和 组里面的button
  ② 新建hobby的布局layout1
  ③ 将hobby的按钮放入hobby布局中
  ④ 对hobby组使用layout1布局
(3) gender组：
  ① 创建gender的group 和 组里面的button
  ② 新建gender的布局layout2
  ③ 将gender的按钮放入gender布局中
  ④ 对gender组使用layout2布局
(4)  将hobby组与gender组放入整体的窗口布局container中

pyqt5 学习笔记四 （QBoxLayout）垂直布局器与水平布局器

Python相关栏目本月热门文章

pyqt5 学习笔记四（QBoxLayout）垂直布局器与水平布局器