PyQt学习笔记 02 布局

在Qt里面布局分为四个大类 :

  • QBoxLayout
  • QGridLayout
  • QFormLayout
  • QStackedLayout

1、QBoxLayout

盒子布局

两个子类QHBoxLayoutQVBoxLayout 负责水平和垂直布局

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

        # 作用是在布局器中增加一个伸缩量,里面的参数表示QSpacerItem的个数,默认值为零
        # 会将你放在layout中的空间压缩成默认的大小
        # 下面会尝试的1:2:1:2比例进行布局
        layout.addStretch(1)

        # 按钮1
        btn1 = QPushButton("按钮1")
        # 添加到布局器中
        # layout.addWidget(btn1, Qt.AlignmentFlag.AlignTop)
        layout.addWidget(btn1)
        layout.addStretch(2)

        # 按钮2
        btn2 = QPushButton("按钮2")
        # 添加到布局器
        layout.addWidget(btn2)
        layout.addStretch(1)

        # 按钮3
        btn3 = QPushButton("按钮3")
        # 添加到布局器
        layout.addWidget(btn3)
        layout.addStretch(2)

        self.setLayout(layout)

if __name__ == '__main__':
    app = QApplication(sys.argv)

    # 创建一个QWidget子类
    w = MyWindow()
    w.show()

    app.exec()

image-20230907214857368

水平布局

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QGroupBox, QVBoxLayout, QHBoxLayout, QRadioButton

class Mywindow(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()
    def init_ui(self):
        #包含两个部分的垂直布局和内部的水平布局
        container = QVBoxLayout()

        #创建第一个组命名为1,22.33.44
        #hobby保证它们在一个组当中
        hobby_box = QGroupBox("1")

        #v_layout保证垂直拜放
        v_layout = QVBoxLayout()
        btn1 = QRadioButton("22")
        btn2 = QRadioButton("33")
        btn3 = QRadioButton("44")

        #添加到v_layout中
        v_layout.addWidget(btn1)
        v_layout.addWidget(btn2)
        v_layout.addWidget(btn3)

        hobby_box.setLayout(v_layout)

        #创建第二个组件2,包含77,88
        gender_box = QGroupBox("2")
        #添加容器和选项
        h_layout = QHBoxLayout()
        btn4 = QRadioButton("77")
        h_layout.addWidget(btn4)

        btn5 = QRadioButton("88")
        h_layout.addWidget(btn5)
        # 添加到 box中
        gender_box.setLayout(h_layout)

        #添加到容器中,设置窗口显示的内容是最外层容器
        container.addWidget(hobby_box)
        container.addWidget(gender_box)
        self.setLayout(container)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Mywindow()
    w.resize(300,300)
    w.show()
    app.exec()

image-20230907220718858

水平布局器与垂直布局器是可以混合使用即嵌套使用

2、QGridLayout

网格布局,或者是九宫格布局

import sys
from PyQt5.QtGui import QIcon
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton, QLineEdit, QGridLayout
class Mywindow(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()
    def init_ui(self):
        self.setWindowTitle("计算器")

        #数据准备
        data = {
            0:["7","8","9","+"],
            1:["4","5","6","-"],
            2: ["1", "2", "3", "*"],
            3: ["0", ".", "=", "C"]
        }

        #整体垂直布局
        layout = QVBoxLayout()

        #输入框
        edit = QLineEdit()
        edit.setPlaceholderText("请输入内容")
        #添加输入框到容器中
        layout.addWidget(edit)

        #网格布局
        grid = QGridLayout()

        #创建循环加入容器中去
        for line_number, line_data in data.items():
            for col_number, number in enumerate(line_data):
                btn = QPushButton(number)
                grid.addWidget(btn,line_number,col_number)

        layout.addLayout(grid)
        self.setLayout(layout)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Mywindow()
    w.setWindowIcon(QIcon("panda.jpg"))
    w.show()
    app.exec()

image-20230907222828512