『pyqt5 从0基础开始项目实战』02. 页面布局设计（保姆级图文）-Toy模板网

这篇具有很好参考价值的文章主要介绍了『pyqt5 从0基础开始项目实战』02. 页面布局设计（保姆级图文）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

欢迎关注『pyqt5 从0基础开始项目实战』专栏，持续更新中
欢迎关注『pyqt5 从0基础开始项目实战』专栏，持续更新中

弹性布局介绍

当然你也可以用可视化工具designer设计ui然后转为为py文件，本专栏注重学习基础，就不再做这方面的介绍了。

并不是采用安卓开发中的绝对定位布局（画坐标系，按照x，y坐标布局，这样很容易因为空间的大小造成重叠控件等问题）

一般设计思路是首先窗口整体是垂直布局，然后每一行是水平布局，在每一行内部通过空白占位的弹簧设置各个控件的位置。
pyqt5分页布局,# pyqt5 从0基础开始项目实战,python,qt,ui,python,pyqt5,毕业设计

导包和框架代码

在上一文的基础框架上加入了本节需要用到的包

import sys
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication, QWidget, QDesktopWidget, QHBoxLayout, QVBoxLayout
from PyQt5.QtWidgets import QPushButton, QLineEdit, QTableWidget, QTableWidgetItem, QLabel

class MainWindow(QWidget):
    def __init__(self):
        # 用super 继承父类的初始化
        super().__init__()

        # 设置窗口的窗体标题
        self.setWindowTitle('发现你走远了的xx系统')

        # 设置窗体的尺寸
        self.resize(1000, 450)

        # 设置窗体位置
        #获取整个窗口部分的宽高和左上角坐标信息，返回值是一个QRect类型，(x,y width,height)
        qr = self.frameGeometry()
        cp = QDesktopWidget().availableGeometry().center()#得到屏幕中间的位置信息
        qr.moveCenter(cp)#让我们的窗体移动到屏幕中间


if __name__ == '__main__':
    app = QApplication(sys.argv)#实例化一个Application应用，所有的窗口均在其下运行

    window = MainWindow()  # 实例化窗口对象
    window.show()  # 窗口展示

    sys.exit(app.exec_())
    # app.exec_()运行主循环，并在退出时返回状态代码。
    # sys.exit(n)退出您的应用程序并返回n到父进程（通常是您的shell）

布局框架搭建

我们的窗口布局下有4个部分的子布局

1. 总体布局框架

pyqt5分页布局,# pyqt5 从0基础开始项目实战,python,qt,ui,python,pyqt5,毕业设计

        # 创建窗口总布局
        layout = QVBoxLayout()

        # 1.顶部菜单布局
        header_layout = QHBoxLayout()  # 创建顶部菜单布局
        layout.addLayout(header_layout)  # 将顶部菜单布局添加到总布局

        # 2.添加内容布局
        form_layout = QHBoxLayout()  # 创建添加内容布局
        layout.addLayout(form_layout)  # 将添加内容布局添加到总布局

        # 3.表格数据展示布局
        table_layout = QHBoxLayout()
        layout.addLayout(table_layout)

        # 4.底部菜单
        footer_layout = QHBoxLayout()
        layout.addLayout(footer_layout)

        # 给窗体设置元素的排列方式
        self.setLayout(layout)

不要忘记最后给窗体设置元素的排列方式（不然布局不会生效，我一开始学找了半天的bug······）
- self.setLayout(layout)

2. 顶部菜单布局

pyqt5分页布局,# pyqt5 从0基础开始项目实战,python,qt,ui,python,pyqt5,毕业设计
顶部菜单布局代码修改为：

        # 1.顶部菜单布局
        header_layout = QHBoxLayout()  # 创建顶部菜单布局
        # 1.1 放入按钮
        btn_start =QPushButton("开始")#新建一个开始按钮
        header_layout.addWidget(btn_start)#将开始按钮添加到顶部菜单布局
        btn_stop =QPushButton("停止")#新建一个开始按钮
        header_layout.addWidget(btn_stop)#将开始按钮添加到顶部菜单布局
        # 1.2 加入弹簧
        header_layout.addStretch()
        layout.addLayout(header_layout)  # 将顶部菜单布局添加到总布局

pyqt5分页布局,# pyqt5 从0基础开始项目实战,python,qt,ui,python,pyqt5,毕业设计

3. form添加内容布局

        # 2.添加内容布局
        form_layout = QHBoxLayout()  # 创建添加内容布局

        # 2.1 输入框
        txt_asin=QLineEdit()#新建一个输入框对象
        txt_asin.setText("B07YN82X3B=100")#设置默认的form数据
        txt_asin.setPlaceholderText("请输入商品ID和价格，例如：B0818JJQQ8=88")#设置灰色的提示信息
        form_layout.addWidget(txt_asin)#将输入框加入到布局中

        # 2.2 添加按钮
        btn_add = QPushButton("添加")#新建一个添加按钮
        form_layout.addWidget(btn_add)#将添加按钮添加到form布局

        layout.addLayout(form_layout)  # 将添加内容布局添加到总布局

pyqt5分页布局,# pyqt5 从0基础开始项目实战,python,qt,ui,python,pyqt5,毕业设计

4. table数据展示布局

因为表格比较多，修改一下前文提到的窗体尺寸

        # 窗体的尺寸
        self.resize(1228, 450)

给表格添加单个行索引或者列索引的值

        # 3.表格数据展示布局
        table_layout = QHBoxLayout()
        # 3.1 创建表格
        table_widget=QTableWidget(2,8)#新建一个2行8列的表格

        # 修改表格索引名
        item=QTableWidgetItem()
        item.setText("标题0")
        table_widget.setHorizontalHeaderItem(0,item)
        table_widget.setColumnWidth(0,150)#设置水平单元格0号位置的宽度 150


        item2=QTableWidgetItem()
        item2.setText("网址1")
        table_widget.setHorizontalHeaderItem(1,item2)
        table_widget.setColumnWidth(1,400)#设置水平单元格1号位置的宽度 400

        item3=QTableWidgetItem()
        item3.setText("行索引0")
        table_widget.setVerticalHeaderItem(0,item3)
        table_layout.addWidget(table_widget)#把表格添加到表格布局中

        layout.addLayout(table_layout)

pyqt5分页布局,# pyqt5 从0基础开始项目实战,python,qt,ui,python,pyqt5,毕业设计

给表格批量添加行索引列索引的值，通过字典键值对和循环实现，不会用enumerate循环的话也可以用for循环代替
注意新建表格的时候，因为没有数据，所以新建0行的表格

# 3.表格数据展示布局
        table_layout = QHBoxLayout()
        # 3.1 创建表格
        table_widget=QTableWidget(0,8)#新建一个0行2列的表格

        table_header = [
            {"field": "asin", "text": "ASIN", 'width': 120},
            {"field": "title", "text": "标题", 'width': 150},
            {"field": "url", "text": "URL", 'width': 400},
            {"field": "price", "text": "底价", 'width': 100},
            {"field": "success", "text": "成功次数", 'width': 100},
            {"field": "error", "text": "503次数", 'width': 100},
            {"field": "status", "text": "状态", 'width': 100},
            {"field": "frequency", "text": "频率（N秒/次）", 'width': 100},
        ]
        for idx,info in enumerate(table_header):
            item=QTableWidgetItem()
            item.setText(info['text'])
            table_widget.setHorizontalHeaderItem(idx,item)
            table_widget.setColumnWidth(idx,info['width'])

        table_layout.addWidget(table_widget)#把表格添加到表格布局中

        layout.addLayout(table_layout)

pyqt5分页布局,# pyqt5 从0基础开始项目实战,python,qt,ui,python,pyqt5,毕业设计

5. footer底部菜单

        # 4.底部菜单
        footer_layout = QHBoxLayout()

        label_status = QLabel("未检测", self)
        footer_layout.addWidget(label_status)

        footer_layout.addStretch()#添加弹簧，更加美观

        btn_reset = QPushButton("重新初始化")
        footer_layout.addWidget(btn_reset)

        btn_recheck = QPushButton("重新检测")
        footer_layout.addWidget(btn_recheck)

        btn_reset_count = QPushButton("次数清零")
        footer_layout.addWidget(btn_reset_count)

        btn_delete = QPushButton("删除检测项")
        footer_layout.addWidget(btn_delete)

        btn_alert = QPushButton("SMTP报警配置")
        footer_layout.addWidget(btn_alert)

        btn_proxy = QPushButton("代理IP")
        footer_layout.addWidget(btn_proxy)

        layout.addLayout(footer_layout)

我们在没有新增弹簧时，所有的按钮平均宽度。
pyqt5分页布局,# pyqt5 从0基础开始项目实战,python,qt,ui,python,pyqt5,毕业设计
新增宽度后，按钮会自适应文本内容，相对而言更加美观

完整项目代码

import os
import sys
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication, QWidget, QDesktopWidget, QHBoxLayout, QVBoxLayout
from PyQt5.QtWidgets import QPushButton, QLineEdit, QTableWidget, QTableWidgetItem, QLabel


class MainWindow(QWidget):
    def __init__(self):
        # 用super 继承父类的初始化
        super().__init__()

        # 设置窗口的窗体标题
        self.setWindowTitle('发现你走远了的xx系统')

        # 设置窗体的尺寸
        self.resize(1228, 450)

        # 设置窗体位置
        # 获取整个窗口部分的宽高和左上角坐标信息，返回值是一个QRect类型，(x,y width,height)
        qr = self.frameGeometry()
        cp = QDesktopWidget().availableGeometry().center()  # 得到屏幕中间的位置信息
        qr.moveCenter(cp)  # 让我们的窗体移动到屏幕中间

        # 创建窗口总布局
        layout = QVBoxLayout()

        # 1.顶部菜单布局
        header_layout = QHBoxLayout()  # 创建顶部菜单布局
        # 1.1 放入按钮
        btn_start =QPushButton("开始")#新建一个开始按钮
        header_layout.addWidget(btn_start)#将开始按钮添加到顶部菜单布局
        btn_stop =QPushButton("停止")#新建一个开始按钮
        header_layout.addWidget(btn_stop)#将开始按钮添加到顶部菜单布局
        # 1.2 加入弹簧
        header_layout.addStretch()
        layout.addLayout(header_layout)  # 将顶部菜单布局添加到总布局

        # 2.添加内容布局
        form_layout = QHBoxLayout()  # 创建添加内容布局

        # 2.1 输入框
        txt_asin=QLineEdit()#新建一个输入框对象
        txt_asin.setText("B07YN82X3B=100")#设置默认的form数据
        txt_asin.setPlaceholderText("请输入商品ID和价格，例如：B0818JJQQ8=88")#设置灰色的提示信息
        form_layout.addWidget(txt_asin)#将输入框加入到布局中

        # 2.2 添加按钮
        btn_add = QPushButton("添加")#新建一个添加按钮
        form_layout.addWidget(btn_add)#将添加按钮添加到form布局

        layout.addLayout(form_layout)  # 将添加内容布局添加到总布局

        # 3.表格数据展示布局
        table_layout = QHBoxLayout()
        # 3.1 创建表格
        table_widget=QTableWidget(0,8)#新建一个0行8列的表格

        # # 修改表格索引名
        # item=QTableWidgetItem()
        # item.setText("标题0")
        # table_widget.setHorizontalHeaderItem(0,item)
        # table_widget.setColumnWidth(0,150)#设置水平单元格0号位置的宽度 150
        #
        # item2=QTableWidgetItem()
        # item2.setText("网址1")
        # table_widget.setHorizontalHeaderItem(1,item2)
        # table_widget.setColumnWidth(1,400)#设置水平单元格1号位置的宽度 400
        #
        # item3=QTableWidgetItem()
        # item3.setText("行索引0")
        # table_widget.setVerticalHeaderItem(0,item3)

        table_header = [
            {"field": "asin", "text": "ASIN", 'width': 120},
            {"field": "title", "text": "标题", 'width': 150},
            {"field": "url", "text": "URL", 'width': 400},
            {"field": "price", "text": "底价", 'width': 100},
            {"field": "success", "text": "成功次数", 'width': 100},
            {"field": "error", "text": "503次数", 'width': 100},
            {"field": "status", "text": "状态", 'width': 100},
            {"field": "frequency", "text": "频率（N秒/次）", 'width': 100},
        ]
        for idx,info in enumerate(table_header):
            item=QTableWidgetItem()
            item.setText(info['text'])
            table_widget.setHorizontalHeaderItem(idx,item)
            table_widget.setColumnWidth(idx,info['width'])

        table_layout.addWidget(table_widget)#把表格添加到表格布局中

        layout.addLayout(table_layout)

        # 4.底部菜单
        footer_layout = QHBoxLayout()

        label_status = QLabel("未检测", self)
        footer_layout.addWidget(label_status)

        footer_layout.addStretch()#添加弹簧，更加美观

        btn_reset = QPushButton("重新初始化")
        footer_layout.addWidget(btn_reset)

        btn_recheck = QPushButton("重新检测")
        footer_layout.addWidget(btn_recheck)

        btn_reset_count = QPushButton("次数清零")
        footer_layout.addWidget(btn_reset_count)

        btn_delete = QPushButton("删除检测项")
        footer_layout.addWidget(btn_delete)

        btn_alert = QPushButton("SMTP报警配置")
        footer_layout.addWidget(btn_alert)

        btn_proxy = QPushButton("代理IP")
        footer_layout.addWidget(btn_proxy)

        layout.addLayout(footer_layout)



        # 给窗体设置元素的排列方式
        self.setLayout(layout)



if __name__ == '__main__':
    app = QApplication(sys.argv)  # 实例化一个Application应用，所有的窗口均在其下运行

    window = MainWindow()  # 实例化窗口对象
    window.show()  # 窗口展示

    sys.exit(app.exec_())
    # app.exec_()运行主循环，并在退出时返回状态代码。
    # sys.exit(n)退出您的应用程序并返回n到父进程（通常是您的shell）