AI 助理
备案控制台
开发者社区 云计算 文章 正文

『PyQt5-Qt Designer篇』｜ 07 Qt Designer中栅格布局和表单布局的使用

2023-09-25 103
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 『PyQt5-Qt Designer篇』｜ 07 Qt Designer中栅格布局和表单布局的使用

1 栅格布局

1.1 按钮布局

  • 拖入几个按钮，如图：
    在这里插入图片描述
  • 选中所有按钮，右键点击布局-栅格布局：
    在这里插入图片描述
  • 之后可以看到栅格布局的效果，类似计算器一样：
    在这里插入图片描述

1.2 栅格布局中拖入控件

  • 先拖动栅格布局到窗口：
    在这里插入图片描述
  • 可以拖动按钮到栅格布局中：
    在这里插入图片描述

    1.3 保存并调用

  • 保存为GriLay.ui，并生成GriLay.py文件：
# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'GriLay.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.gridLayoutWidget = QtWidgets.QWidget(self.centralwidget)
        self.gridLayoutWidget.setGeometry(QtCore.QRect(110, 230, 231, 112))
        self.gridLayoutWidget.setObjectName("gridLayoutWidget")
        self.gridLayout_2 = QtWidgets.QGridLayout(self.gridLayoutWidget)
        self.gridLayout_2.setContentsMargins(0, 0, 0, 0)
        self.gridLayout_2.setObjectName("gridLayout_2")
        self.pushButton_12 = QtWidgets.QPushButton(self.gridLayoutWidget)
        self.pushButton_12.setObjectName("pushButton_12")
        self.gridLayout_2.addWidget(self.pushButton_12, 2, 0, 1, 1)
        self.pushButton_11 = QtWidgets.QPushButton(self.gridLayoutWidget)
        self.pushButton_11.setObjectName("pushButton_11")
        self.gridLayout_2.addWidget(self.pushButton_11, 0, 0, 1, 1)
        self.pushButton_13 = QtWidgets.QPushButton(self.gridLayoutWidget)
        self.pushButton_13.setObjectName("pushButton_13")
        self.gridLayout_2.addWidget(self.pushButton_13, 1, 0, 1, 1)
        self.pushButton_10 = QtWidgets.QPushButton(self.gridLayoutWidget)
        self.pushButton_10.setObjectName("pushButton_10")
        self.gridLayout_2.addWidget(self.pushButton_10, 3, 0, 1, 1)
        self.pushButton_14 = QtWidgets.QPushButton(self.gridLayoutWidget)
        self.pushButton_14.setObjectName("pushButton_14")
        self.gridLayout_2.addWidget(self.pushButton_14, 1, 1, 1, 1)
        self.pushButton_15 = QtWidgets.QPushButton(self.gridLayoutWidget)
        self.pushButton_15.setObjectName("pushButton_15")
        self.gridLayout_2.addWidget(self.pushButton_15, 0, 1, 1, 1)
        self.pushButton_16 = QtWidgets.QPushButton(self.gridLayoutWidget)
        self.pushButton_16.setObjectName("pushButton_16")
        self.gridLayout_2.addWidget(self.pushButton_16, 2, 1, 1, 1)
        self.pushButton_17 = QtWidgets.QPushButton(self.gridLayoutWidget)
        self.pushButton_17.setObjectName("pushButton_17")
        self.gridLayout_2.addWidget(self.pushButton_17, 3, 1, 1, 1)
        self.widget = QtWidgets.QWidget(self.centralwidget)
        self.widget.setGeometry(QtCore.QRect(80, 70, 320, 83))
        self.widget.setObjectName("widget")
        self.gridLayout = QtWidgets.QGridLayout(self.widget)
        self.gridLayout.setContentsMargins(0, 0, 0, 0)
        self.gridLayout.setObjectName("gridLayout")
        self.pushButton = QtWidgets.QPushButton(self.widget)
        self.pushButton.setObjectName("pushButton")
        self.gridLayout.addWidget(self.pushButton, 0, 0, 1, 1)
        self.pushButton_2 = QtWidgets.QPushButton(self.widget)
        self.pushButton_2.setObjectName("pushButton_2")
        self.gridLayout.addWidget(self.pushButton_2, 0, 1, 1, 1)
        self.pushButton_3 = QtWidgets.QPushButton(self.widget)
        self.pushButton_3.setObjectName("pushButton_3")
        self.gridLayout.addWidget(self.pushButton_3, 0, 2, 1, 2)
        self.pushButton_4 = QtWidgets.QPushButton(self.widget)
        self.pushButton_4.setObjectName("pushButton_4")
        self.gridLayout.addWidget(self.pushButton_4, 1, 0, 1, 1)
        self.pushButton_5 = QtWidgets.QPushButton(self.widget)
        self.pushButton_5.setObjectName("pushButton_5")
        self.gridLayout.addWidget(self.pushButton_5, 1, 1, 1, 2)
        self.pushButton_6 = QtWidgets.QPushButton(self.widget)
        self.pushButton_6.setObjectName("pushButton_6")
        self.gridLayout.addWidget(self.pushButton_6, 1, 3, 1, 2)
        self.pushButton_7 = QtWidgets.QPushButton(self.widget)
        self.pushButton_7.setObjectName("pushButton_7")
        self.gridLayout.addWidget(self.pushButton_7, 2, 0, 1, 1)
        self.pushButton_8 = QtWidgets.QPushButton(self.widget)
        self.pushButton_8.setObjectName("pushButton_8")
        self.gridLayout.addWidget(self.pushButton_8, 2, 1, 1, 2)
        self.pushButton_9 = QtWidgets.QPushButton(self.widget)
        self.pushButton_9.setObjectName("pushButton_9")
        self.gridLayout.addWidget(self.pushButton_9, 2, 4, 1, 1)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 22))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton_12.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_11.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_13.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_10.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_14.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_15.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_16.setText(_translate("MainWindow", "PushButton"))
        self.pushButton_17.setText(_translate("MainWindow", "PushButton"))
        self.pushButton.setText(_translate("MainWindow", "7"))
        self.pushButton_2.setText(_translate("MainWindow", "8"))
        self.pushButton_3.setText(_translate("MainWindow", "9"))
        self.pushButton_4.setText(_translate("MainWindow", "4"))
        self.pushButton_5.setText(_translate("MainWindow", "5"))
        self.pushButton_6.setText(_translate("MainWindow", "6"))
        self.pushButton_7.setText(_translate("MainWindow", "1"))
        self.pushButton_8.setText(_translate("MainWindow", "2"))
        self.pushButton_9.setText(_translate("MainWindow", "3"))
  • 创建main.py，并执行：
# -*- coding:utf-8 -*-
# 作者：虫无涯
# 日期：2023/8/28
# 文件名称：main.py
# 作用：主程序入口
# 联系：VX(NoamaNelson)
# 博客：https://blog.csdn.net/NoamaNelson

import sys
from test_case.GriLay import Ui_MainWindow
from PyQt5.QtWidgets import QApplication, QWidget, QMainWindow


if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(window)
    window.show()

    sys.exit(app.exec_())

在这里插入图片描述

2 表单布局

2.1 标签+输入控件

  • 拖入标签和输入控件，如下：
    在这里插入图片描述
  • 选中所有的控件，右键点击布局-在窗体中布局：
    在这里插入图片描述
  • 效果如下：
    在这里插入图片描述

    2.2 保存并调用

  • 保存为ForLay.ui，并生成ForLay.py文件：
# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'ForLay.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.widget = QtWidgets.QWidget(self.centralwidget)
        self.widget.setGeometry(QtCore.QRect(40, 30, 163, 121))
        self.widget.setObjectName("widget")
        self.formLayout = QtWidgets.QFormLayout(self.widget)
        self.formLayout.setContentsMargins(0, 0, 0, 0)
        self.formLayout.setObjectName("formLayout")
        self.label = QtWidgets.QLabel(self.widget)
        self.label.setObjectName("label")
        self.formLayout.setWidget(0, QtWidgets.QFormLayout.LabelRole, self.label)
        self.lineEdit = QtWidgets.QLineEdit(self.widget)
        self.lineEdit.setObjectName("lineEdit")
        self.formLayout.setWidget(0, QtWidgets.QFormLayout.FieldRole, self.lineEdit)
        self.label_2 = QtWidgets.QLabel(self.widget)
        self.label_2.setObjectName("label_2")
        self.formLayout.setWidget(1, QtWidgets.QFormLayout.LabelRole, self.label_2)
        self.lineEdit_2 = QtWidgets.QLineEdit(self.widget)
        self.lineEdit_2.setObjectName("lineEdit_2")
        self.formLayout.setWidget(1, QtWidgets.QFormLayout.FieldRole, self.lineEdit_2)
        self.label_3 = QtWidgets.QLabel(self.widget)
        self.label_3.setObjectName("label_3")
        self.formLayout.setWidget(2, QtWidgets.QFormLayout.LabelRole, self.label_3)
        self.lineEdit_4 = QtWidgets.QLineEdit(self.widget)
        self.lineEdit_4.setObjectName("lineEdit_4")
        self.formLayout.setWidget(2, QtWidgets.QFormLayout.FieldRole, self.lineEdit_4)
        self.label_4 = QtWidgets.QLabel(self.widget)
        self.label_4.setObjectName("label_4")
        self.formLayout.setWidget(3, QtWidgets.QFormLayout.LabelRole, self.label_4)
        self.lineEdit_3 = QtWidgets.QLineEdit(self.widget)
        self.lineEdit_3.setObjectName("lineEdit_3")
        self.formLayout.setWidget(3, QtWidgets.QFormLayout.FieldRole, self.lineEdit_3)
        self.label_5 = QtWidgets.QLabel(self.widget)
        self.label_5.setObjectName("label_5")
        self.formLayout.setWidget(4, QtWidgets.QFormLayout.LabelRole, self.label_5)
        self.lineEdit_5 = QtWidgets.QLineEdit(self.widget)
        self.lineEdit_5.setObjectName("lineEdit_5")
        self.formLayout.setWidget(4, QtWidgets.QFormLayout.FieldRole, self.lineEdit_5)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 22))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.label.setText(_translate("MainWindow", "姓名"))
        self.label_2.setText(_translate("MainWindow", "班级"))
        self.label_3.setText(_translate("MainWindow", "年龄"))
        self.label_4.setText(_translate("MainWindow", "分数"))
        self.label_5.setText(_translate("MainWindow", "排名"))
  • 创建main.py，并执行：
# -*- coding:utf-8 -*-
# 作者：虫无涯
# 日期：2023/8/28
# 文件名称：main.py
# 作用：主程序入口
# 联系：VX(NoamaNelson)
# 博客：https://blog.csdn.net/NoamaNelson

import sys
from test_case.ForLay import Ui_MainWindow
from PyQt5.QtWidgets import QApplication, QWidget, QMainWindow


if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(window)
    window.show()

    sys.exit(app.exec_())

在这里插入图片描述

3 组合水平和垂直布局

  • 拖入如下控件：
    在这里插入图片描述
  • 第二行，设置水平布局：
    在这里插入图片描述
  • 第3行也是水平布局：
    在这里插入图片描述
  • 全选所有的控件，选择垂直布局即可：
    在这里插入图片描述
  • 保存为Hor_Ver_Lay.ui，并生成Hor_Ver_Lay.py：
# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'Hor_Ver_Lay.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.widget = QtWidgets.QWidget(self.centralwidget)
        self.widget.setGeometry(QtCore.QRect(40, 20, 246, 76))
        self.widget.setObjectName("widget")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.widget)
        self.verticalLayout.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout.setObjectName("verticalLayout")
        self.label = QtWidgets.QLabel(self.widget)
        self.label.setObjectName("label")
        self.verticalLayout.addWidget(self.label)
        self.horizontalLayout = QtWidgets.QHBoxLayout()
        self.horizontalLayout.setObjectName("horizontalLayout")
        self.label_2 = QtWidgets.QLabel(self.widget)
        self.label_2.setObjectName("label_2")
        self.horizontalLayout.addWidget(self.label_2)
        self.lineEdit = QtWidgets.QLineEdit(self.widget)
        self.lineEdit.setObjectName("lineEdit")
        self.horizontalLayout.addWidget(self.lineEdit)
        self.pushButton = QtWidgets.QPushButton(self.widget)
        self.pushButton.setObjectName("pushButton")
        self.horizontalLayout.addWidget(self.pushButton)
        self.verticalLayout.addLayout(self.horizontalLayout)
        self.horizontalLayout_2 = QtWidgets.QHBoxLayout()
        self.horizontalLayout_2.setObjectName("horizontalLayout_2")
        self.label_3 = QtWidgets.QLabel(self.widget)
        self.label_3.setObjectName("label_3")
        self.horizontalLayout_2.addWidget(self.label_3)
        self.lineEdit_2 = QtWidgets.QLineEdit(self.widget)
        self.lineEdit_2.setObjectName("lineEdit_2")
        self.horizontalLayout_2.addWidget(self.lineEdit_2)
        self.pushButton_2 = QtWidgets.QPushButton(self.widget)
        self.pushButton_2.setObjectName("pushButton_2")
        self.horizontalLayout_2.addWidget(self.pushButton_2)
        self.verticalLayout.addLayout(self.horizontalLayout_2)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 22))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.label.setText(_translate("MainWindow", "搜索"))
        self.label_2.setText(_translate("MainWindow", "姓名"))
        self.pushButton.setText(_translate("MainWindow", "确定"))
        self.label_3.setText(_translate("MainWindow", "班级"))
        self.pushButton_2.setText(_translate("MainWindow", "确定"))
  • 创建main.py并执行：
# -*- coding:utf-8 -*-
# 作者：虫无涯
# 日期：2023/8/28
# 文件名称：main.py
# 作用：主程序入口
# 联系：VX(NoamaNelson)
# 博客：https://blog.csdn.net/NoamaNelson

import sys
from test_case.Hor_Ver_Lay import Ui_MainWindow
from PyQt5.QtWidgets import QApplication, QWidget, QMainWindow


if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(window)
    window.show()

    sys.exit(app.exec_())

在这里插入图片描述

关键词：
Qt布局
Qt布局表单
Qt表单
Qt栅格
designer Qt
虫无涯
目录
相关文章
国中之林
|
3月前
【qt】 QGridLayout布局管理器怎么用?
【qt】 QGridLayout布局管理器怎么用?
国中之林
129 0
五羟基己醛
|
1月前
【QT速成】零基础快速入门QT6简明教程之布局管理（五）
QT5
五羟基己醛
79 1
DuckBro
|
3月前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 空白项Spacer
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 空白项Spacer
DuckBro
148 2
DuckBro
|
3月前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 表单布局Form Layout
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 表单布局Form Layout
DuckBro
75 2
DuckBro
|
3月前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 网格布局Grid Layout
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 网格布局Grid Layout
DuckBro
307 2
DuckBro
|
3月前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 水平布局Horizontal Layout
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 水平布局Horizontal Layout
DuckBro
196 2
DuckBro
|
3月前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 垂直布局Vertical Layout
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 垂直布局Vertical Layout
DuckBro
271 2
好奇的菜鸟
|
5月前
|
数据安全/隐私保护
Qt布局(登录窗口实现)
Qt布局(登录窗口实现)
好奇的菜鸟
46 4
热爱嵌入式的小佳同学
|
6月前
|
开发者
Qt 布局(QSplitter 类&QDockWidget 类) 总结
Qt 布局(QSplitter 类&QDockWidget 类) 总结
热爱嵌入式的小佳同学
530 1
Qt 布局(QSplitter 类&QDockWidget 类) 总结
一只大鸽子
|
5月前
QT布局管理器
QT布局管理器
一只大鸽子
28 0

热门文章

最新文章

  • 1
    Qt编写安防视频监控系统4-删除视频
  • 2
    Qt Creator编译项目，报错，error: LNK1158: 无法运行“rc.exe”
  • 3
    Qt核心剖析：信息隐藏(2)
  • 4
    Qt Creator指定临时文件生成目录(MOC_DIR/RCC_DIR等)和PWD/OUT_PWD/.pro官方文档
  • 5
    QT刷屏函数
  • 6
    Qt开源作品1-视频流播放ffmpeg内核
  • 7
    Visual Studio下程序开发: 编译QT程序Debug正常,Release出错
  • 8
    Linux上sqlite的安装和使用方法以及在QT中如何使用sqlite&笔记总结
  • 9
    使用qt实现简易示波器功能
  • 10
    Qt编写的项目作品25-硬件综合应用(热敏打印+身份证+短信猫)
  • 1
    `pytest-qt` 是一个用于在 Qt 应用程序中进行 GUI 测试的 pytest 插件。
    180
  • 2
    好的资源-----打卡机+Arm+Qt+OpenCV嵌入式项目-基于人脸识别的考勤系统-----B站神经网络与深度学习，商城
    79
  • 3
    QT：基于QMediaPlayer制作的视频播放器(最下方有整合包，可直接运行)
    470
  • 4
    基于QT实现的拷贝文件以及实时进度条(简易版)
    485
  • 5
    【Qt应用开发】复刻经典：基于Qt实现Windows风格计算器（加减乘除、删除、归零功能全解析）
    142
  • 6
    基于QT实现的QQ聊天简易版（UDP通信版）
    103
  • 7
    基于QT实现的词典(附源码)
    89
  • 8
    Qt连接Mysql出现问题（一）：“Driver not loaded Driver not loaded“
    758
  • 9
    Qt问题（二）：无法定位程序输入点于动态链接库
    456
  • 10
    Qt中的网络编程（Tcp和Udp）运用详解以及简单示范案例
    631

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 图表样式智能美化工具

    • 推荐镜像

    更多
  • qt
  • blender
  • cygwin
    • 下一篇
    阿里云OSS设置跨域访问