快速入门pyqt三剑客之（1）---布局

最新推荐文章于 2025-02-27 16:49:42 发布

东写西读李老湿

最新推荐文章于 2025-02-27 16:49:42 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： python pyqt 文章标签： python pyqt5

本文链接：https://blog.youkuaiyun.com/u013044310/article/details/80881535

python 同时被 2 个专栏收录

40 篇文章

订阅专栏

pyqt

3 篇文章

订阅专栏

本文介绍了PyQt中的三种布局方式：绝对布局、盒布局和网格布局。详细解释了每种布局的特点及适用场景，并通过示例代码展示了如何实现这些布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、绝对布局

每个程序都是以像素为单位区分元素的位置，衡量元素的大小。所以我们完全可以使用绝对定位搞定每个元素和窗口的位置。
比如，我们想要设计下面这一个布局。

这里写图片描述

代码如下：

import sys
from PyQt5.QtWidgets import QApplication,  QWidget, QPushButton
class Example(QWidget):

    def __init__(self):
        super().__init__()

        self.initUI()

    def initUI(self):

        #主界面的属性
        self.setGeometry(90, 90, 600, 300)#从屏幕上左上角（90，90）开始，显示一个1024*768的界面
        self.setWindowTitle('绝对布局测试程序')#主界面标题栏


        button1 = QPushButton('第一个button', self)
        button1.move(0, 0)    #button位置（左上角坐标）
        button1.resize(100, 50)  #button大小

        button2 = QPushButton('第二个button', self)
        button2.move(100, 50)  # button位置（左上角坐标）
        button2.resize(100, 50)  # button大小

        button3 = QPushButton('第三个button', self)
        button3.move(200, 100)  # button位置（左上角坐标）
        button3.resize(100, 50)  # button大小

        button4 = QPushButton('第四个button', self)
        button4.move(300, 150)  # button位置（左上角坐标）
        button4.resize(100, 50)  # button大小

        button5 = QPushButton('第五个button', self)
        button5.move(400, 200)  # button位置（左上角坐标）
        button5.resize(100, 50)  # button大小

        button6 = QPushButton('第六个button', self)
        button6.move(500, 250)  # button位置（左上角坐标）
        button6.resize(100, 50)  # button大小

        self.show()#显示窗口

if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

其中，

self.setGeometry(90, 90, 600, 300)#从屏幕上左上角（90，90）开始，显示一个1024*768的界面
self.setWindowTitle('绝对布局测试程序')#主界面标题栏
是比较常用的两个函数。

设计过程中我们可以看到绝对布局的局限性：

元素不会随着我们更改窗口的位置和大小而变化。
不能适用于不同的平台和不同分辨率的显示器
更改应用字体大小会破坏布局
如果我们决定重构这个应用，需要全部计算一下每个元素的位置和大小

二、盒布局。

盒布局名字虽然听起来怪怪的，但是却非常形象，主要借助两个函数QHBoxLayout（水平方向）和QVBoxLayout（竖直方向），建立一个个水平方向或者是竖直方向的“盒子”，盒子本身整齐排列，同时把盒子内部的组件也整齐排列，这样整体来看就显得会很整齐。就像小时候写作业一样，放置内容之前之间先给你把区域划好了。
一个盒布局实例

import sys
from PyQt5.QtWidgets import (QWidget, QPushButton,
    QHBoxLayout, QVBoxLayout, QApplication,QMainWindow)

class Example(QWidget):

    def __init__(self):
        super().__init__()
        self.initUI()


    def initUI(self):
        # 添加5个按钮
        Button1 = QPushButton("按钮1")
        Button2 = QPushButton("按钮2")
        Button3 = QPushButton("按钮3")
        Button4 = QPushButton("按钮4")
        Button5 = QPushButton("按钮5")

        #添加一个竖直盒子，两个水平盒子
        hbox1 = QHBoxLayout()
        hbox2 = QHBoxLayout()
        # hbox = QHBoxLayout()
        vbox = QVBoxLayout()


        #把按钮放在盒子里
        vbox.addWidget(Button1)
        vbox.addWidget(Button2)
        vbox.addWidget(Button3)
        hbox2.addWidget(Button4)
        hbox2.addWidget(Button5)

        #把竖直盒子和水平盒子嵌套在水平盒子中
        hbox1.addLayout(vbox)
        hbox1.addLayout(hbox2)

        self.setLayout(hbox1)
        self.setGeometry(400, 400, 600, 300)
        self.setWindowTitle('盒布局示例')
        self.show()


if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

效果如下：

这里写图片描述
最后，在盒布局里，还有一个特别有用的函数：布局.addStretch(int)。这个函数很形象，就是在布局之内添加一个弹簧，使组件之间有空隙。int值代表“弹簧”的长度。

在QT Designer中，你可以看到这个组件就是一个弹簧样子的。
这里写图片描述

需要注意的是：弹簧控件是按照这个弹簧的比例分的，比如：

hbox.addStretch(1)#hbox是一个水平“盒子”
hbox.addWidget(Button1)
hbox.addStretch(1)
hbox.addWidget(Button2)
hbox.addStretch(1)

就是把hbox这个盒子剩余空间等分成三份，如果把中间的弹簧改成2，那么就是把这个盒子剩余空间等分成4分，中间的空间占两份。对比如下：
这里写图片描述

下面，我们接着上边的代码，添加几个“弹簧”。使布局更为宽松一点。(虽然只改动了几行，为了方便调试，还是附上整体的代码，读者可以把代码复制到自己的环境中，调整各个弹簧的比例看看效果)

import sys
from PyQt5.QtWidgets import (QWidget, QPushButton,
    QHBoxLayout, QVBoxLayout, QApplication,QMainWindow)

class Example(QWidget):

    def __init__(self):
        super().__init__()
        self.initUI()


    def initUI(self):
        # 添加5个按钮
        Button1 = QPushButton("按钮1")
        Button2 = QPushButton("按钮2")
        Button3 = QPushButton("按钮3")
        Button4 = QPushButton("按钮4")
        Button5 = QPushButton("按钮5")

        #添加一个竖直盒子，两个水平盒子
        hbox1 = QHBoxLayout()
        hbox2 = QHBoxLayout()
        # hbox = QHBoxLayout()
        vbox = QVBoxLayout()


        #把按钮放在盒子里
        vbox.addStretch(2)#比重为2的弹簧
        vbox.addWidget(Button1)
        vbox.addStretch(1)#比重为1的弹簧
        vbox.addWidget(Button2)
        vbox.addStretch(1)#比重为1的弹簧
        vbox.addWidget(Button3)
        vbox.addStretch(2)#比重为2的弹簧

        hbox2.addStretch(1)#比重为1的弹簧
        hbox2.addWidget(Button4)
        hbox2.addStretch(1)#比重为1的弹簧
        hbox2.addWidget(Button5)
        hbox2.addStretch(1)#比重为1的弹簧

        #把竖直盒子和水平盒子嵌套在水平盒子中
        hbox1.addLayout(vbox)
        hbox1.addLayout(hbox2)

        self.setLayout(hbox1)
        self.setGeometry(400, 400, 600, 300)
        self.setWindowTitle('盒布局示例')
        self.show()


if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())