PyQt5 布局管理器学习

0 知识点思维导图

1. 手动布局代码，三个横向标签竖直排列：

from PyQt5.Qt import *


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("布局管理的学习")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        # 创建三个子控件
        label1 = QLabel("标签1", self)
        label1.setStyleSheet("background-color: cyan;")
        label2 = QLabel("标签2", self)
        label2.setStyleSheet("background-color: yellow;")
        label3 = QLabel("标签3", self)
        label3.setStyleSheet("background-color: red;")

        # 垂直排列，
        label_width = self.width()
        label_height = self.height()/3
        label1.resize(label_width, label_height)
        label2.resize(label_width, label_height)
        label3.resize(label_width, label_height)

        label1.move(0,0)
        label2.move(0,label1.height())
        label3.move(0,label1.height()+label2.height())
if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = Window()
    window.show()
    sys.exit(app.exec_())

2. 布局管理器应用代码：

from PyQt5.Qt import *


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("布局管理的学习")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        # 创建三个子控件
        label1 = QLabel("标签1", self)
        label1.setStyleSheet("background-color: cyan;")
        label2 = QLabel("标签2", self)
        label2.setStyleSheet("background-color: yellow;")
        label3 = QLabel("标签3", self)
        label3.setStyleSheet("background-color: red;")

        # 竖直方向布局管理器
        v_layout = QVBoxLayout()
        v_layout.addWidget(label1)
        v_layout.addWidget(label2)
        v_layout.addWidget(label3)
        self.setLayout(v_layout)



if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = Window()
    window.show()
    sys.exit(app.exec_())

3. 向标签中添加内容，布局管理器动态展示效果

from PyQt5.Qt import *


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("布局管理的学习")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        # 创建三个子控件
        label1 = QLabel("标签1", self)
        label1.setStyleSheet("background-color: cyan;")
        label2 = QLabel("标签2", self)
        label2.setStyleSheet("background-color: yellow;")
        label3 = QLabel("标签3", self)
        label3.setStyleSheet("background-color: red;")

        # 竖直方向布局管理器
        v_layout = QVBoxLayout()
        v_layout.addWidget(label1)
        v_layout.addWidget(label2)
        v_layout.addWidget(label3)
        self.setLayout(v_layout)

        timer = QTimer(self)
        timer.timeout.connect(lambda: label1.setText(label1.text() + "\nted here"))
        timer.start(1000)



if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = Window()
    window.show()
    sys.exit(app.exec_())

4. 修改布局管理和参数

from PyQt5.Qt import *


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("布局管理的学习")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        # 创建三个子控件
        label1 = QLabel("标签1")
        label1.setStyleSheet("background-color: cyan;")
        label2 = QLabel("标签2")
        label2.setStyleSheet("background-color: yellow;")
        label3 = QLabel("标签3")
        label3.setStyleSheet("background-color: red;")

        # 竖直方向布局管理器
        h_layout = QHBoxLayout()
        h_layout.addWidget(label1)
        h_layout.addWidget(label2)
        h_layout.addWidget(label3)

        # 外边距 左上右下 与 父控件边界距离
        h_layout.setContentsMargins(20,30,40,50)
        # 子控件间距
        h_layout.setSpacing(10)
        # 设置布局管理器
        self.setLayout(h_layout)
        # 从右到左方向
        self.setLayoutDirection(Qt.RightToLeft)


if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = Window()
    window.show()
    sys.exit(app.exec_())

5. 布局管理器设置流程及替换子控件

from PyQt5.Qt import *


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("PyQt5 的学习")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        label1 = QLabel("标签1")
        label1.setStyleSheet("background-color: cyan;")
        label2 = QLabel("标签2")
        label2.setStyleSheet("background-color: yellow;")
        label3 = QLabel("标签3")
        label3.setStyleSheet("background-color: red;")
        label4 = QLabel("标签4")
        label4.setStyleSheet("background-color: orange;")

        # 1. 创建一个布局管理器对象
        layout = QBoxLayout(QBoxLayout.BottomToTop)

        # 2. 直接把布局管理器对象设置给需要布局的父控件
        self.setLayout(layout)

        # 3. 把需要布局的子控件添加到布局管理器中
        layout.addWidget(label1)
        layout.addWidget(label2)
        layout.addWidget(label3)

        # 设置布局属性
        layout.setSpacing(60)

        # 获取边距值
        print(layout.contentsMargins().left())
        print(layout.contentsMargins().right())
        print(layout.contentsMargins().top())

        layout.setContentsMargins(20,40,60,80)

        # 替换子控件
        layout.replaceWidget(label2, label4)
        # 被替换子控件不再被布局管理，应该隐藏、删除或添加新的布局管理
        # 隐藏
        label2.hide()
        # 检测该控件是否被释放
        label2.destroyed.connect(lambda :print("label2 is destroyed..."))
        # 删除控件，原理是不让其父控件引用该控件，引用计数器会自动释放该控件
        label2.setParent(None)


if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = Window()
    window.show()
    sys.exit(app.exec_())

6. 添加子布局

from PyQt5.Qt import *


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("PyQt5 的学习")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        label1 = QLabel("标签1")
        label1.setStyleSheet("background-color: cyan;")
        label2 = QLabel("标签2")
        label2.setStyleSheet("background-color: yellow;")
        label3 = QLabel("标签3")
        label3.setStyleSheet("background-color: red;")
        label4 = QLabel("标签4")
        label4.setStyleSheet("background-color: orange;")

        # 1. 创建一个布局管理器对象
        layout = QBoxLayout(QBoxLayout.TopToBottom)

        # 2. 直接把布局管理器对象设置给需要布局的父控件
        self.setLayout(layout)

        # 布局的嵌套
        label5 = QLabel("标签5")
        label5.setStyleSheet("background-color: pink;")
        label6 = QLabel("标签2")
        label6.setStyleSheet("background-color: blue;")
        label7 = QLabel("标签3")
        label7.setStyleSheet("background-color: green;")

        h_layout = QBoxLayout(QBoxLayout.LeftToRight)
        h_layout.addWidget(label5)
        h_layout.addWidget(label6)
        h_layout.addWidget(label7)

        # 3. 把需要布局的子控件添加到布局管理器中
        layout.addWidget(label1)
        # 添加子布局
        layout.addLayout(h_layout)
        layout.addWidget(label2)
        layout.addWidget(label3)


if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = Window()
    window.show()
    sys.exit(app.exec_())

7. 小应用：每隔一秒变换一次布局方向

from PyQt5.Qt import *


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QBoxLayout 的学习")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        label1 = QLabel("标签1")
        label1.setStyleSheet("background-color: cyan;")
        label2 = QLabel("标签2")
        label2.setStyleSheet("background-color: yellow;")
        label3 = QLabel("标签3")
        label3.setStyleSheet("background-color: red;")
        label4 = QLabel("标签4")
        label4.setStyleSheet("background-color: orange;")

        # 1. 创建一个布局管理器对象
        layout = QBoxLayout(QBoxLayout.LeftToRight)

        # 2. 直接把布局管理器对象设置给需要布局的父控件
        self.setLayout(layout)

        # 3. 把需要布局的子控件添加到布局管理器中
        layout.addWidget(label1)
        layout.addWidget(label2)
        layout.addWidget(label3)
        layout.addWidget(label4)


        # 通过定时器设置每隔一秒变换一次布局方向
        def test():
            layout.setDirection((layout.direction()+1)%4)

        timer = QTimer(self)
        timer.timeout.connect(test)
        timer.start(1000)


if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = Window()
    window.show()
    sys.exit(app.exec_())

8. 按比例布局，设置伸缩因子

from PyQt5.Qt import *


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QBoxLayout 的学习")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        label1 = QLabel("标签1")
        label1.setStyleSheet("background-color: cyan;")
        label2 = QLabel("标签2")
        label2.setStyleSheet("background-color: yellow;")
        label3 = QLabel("标签3")
        label3.setStyleSheet("background-color: red;")
        label4 = QLabel("标签4")
        label4.setStyleSheet("background-color: orange;")

        # 1. 创建一个布局管理器对象
        layout = QBoxLayout(QBoxLayout.LeftToRight)

        # 2. 直接把布局管理器对象设置给需要布局的父控件
        self.setLayout(layout)

        # 3. 把需要布局的子控件添加到布局管理器中
        # 默认伸缩因子 stretch 为 0
        layout.addWidget(label1, 1)
        layout.addStretch(2)
        layout.addWidget(label2, 2)
        layout.addStretch(1)
        layout.addWidget(label3, 3)
        layout.addWidget(label4, 4)


if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = Window()
    window.show()
    sys.exit(app.exec_())

9. 表单布局

from PyQt5.Qt import *


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QFromLayout 的学习")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        name_label = QLabel("姓名：")
        age_label = QLabel("年龄:")
        sex_label = QLabel("性别：")

        name_le = QLineEdit()
        age_sb = QSpinBox()
        male_rb = QRadioButton("男")
        female_rb = QRadioButton("女")
        h_layout = QHBoxLayout()
        h_layout.addWidget(male_rb)
        h_layout.addWidget(female_rb)
        job_le = QLineEdit()

        submit = QPushButton("提交")

        # 1. 创建布局管理器
        layout = QFormLayout()
        # 2. 把布局管理器赋值给需要布局的父控件
        layout.addRow(name_label, name_le)
        layout.addRow(age_label, age_sb)
        layout.addRow(sex_label, h_layout)
        layout.addRow("职业：", job_le)
        layout.addRow(submit)
        # 3. 把需要布局的子控件交给布局管理器
        self.setLayout(layout)

        QFormLayout.RowWrapPolicy

        print("当前总行数：",layout.rowCount())
        print("年龄输入框第几行、角色值",layout.getWidgetPosition( age_sb))


        layout.setLabelAlignment(Qt.AlignLeft)
        layout.setVerticalSpacing(60)


if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = Window()
    window.show()
    sys.exit(app.exec_())

10. 网格布局

from PyQt5.Qt import *


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QGridLayout 的学习")
        self.resize(500, 500)
        self.setup_ui()

    def setup_ui(self):
        gl = QGridLayout()

        self.setLayout(gl)

        label1 = QLabel("标签1")
        label1.setStyleSheet("background-color: cyan;")
        label2 = QLabel("标签2")
        label2.setStyleSheet("background-color: yellow;")
        label3 = QLabel("标签3")
        label3.setStyleSheet("background-color: red;")
        label4 = QLabel("标签4")
        label4.setStyleSheet("background-color: orange;")
		
		# 根据网格坐标分配布局
        gl.addWidget(label1, 0, 0)
        gl.addWidget(label2, 0, 1)
        gl.addWidget(label3, 1, 0, 3, 3)
        gl.addWidget(label4, 4, 0, 1, 2)


if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    window = Window()
    window.show()
    sys.exit(app.exec_())