PyQt5的相对布局管理
PyQt5的相对布局管理
博主PyQt5新手,最近在写一个可视化展示界面,第一个遇到的坑就是布局管理。
其实可以不用相对布局,直接用QtDesigner进行傻瓜式的拖控件也不是不可以,高级一点,也可以用绝对布局,定义控件的绝对位置,就可以避免踏入这个坑了。
但是,还是建议大家,尤其是新手使用相对布局,一个感受,就是相对布局美观整齐,控件不会乱。
写在前面
如果大家完全初学,建议大家买本书看看,我发现网上能搜到的关于PyQt5教程都是从书上来的,而且网上的教程都是书本的搬运工,少有自己的思考,比如如何活用布局,也就是这篇博文要解决的内容。建议大家看看《PyQt5快速开发与实战这本书》,总体不错,博主的很多解决方案都是从这本书上来。
下面是编译环境:
- python3.7,编译器是pycharm,特别说明,不要用Spyder,如果只是常规的控件用Spyder没啥问题,但是如果你用了QWebEngineView,会让你崩溃到怀疑人生,遇到的问题无法解决,一度想要从入门到放弃。博主也是从matlab过来的,大爱Spyder的编译风格,但是建议还是趁早换了,pycharm的代码自动填充功能不要太爽;
- 要实现的功能:设置两排横向的按钮,一个网页展示区,和网页并排展示的文本框用来展示数据,展示效果如下:
用到的包
常规包导入
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtCore import Qt, QUrl
import sys
QWebEngineView是用来展示百度首页的,用Spyder编译的话,一直会报错,报错如下:
QtWebEngineWidgets must be imported before a QCoreApplication instance is created
界面生成
编写初始化函数,代码如下:
class MyWindow(QWidget): def __init__(self): super(MyWindow,self).__init__()self.setWindowTitle('嵌套布局示例')self.resize(1000, 800)self.browser = QWebEngineView(self) #1self.textEdit = QTextEdit(self) #2self.browser_init() #3self.layout_init() #4
#1 定义一个浏览器控件
#2 定义一个文本编辑框,个人用于展示网页显示的数据
#3 初始化浏览器设置
#4 布局设置
布局设置
不说废话,直接上代码
def layout_init(self):# 全局部件(注意参数 self),用于"承载"全局布局wwg = QWidget(self)# 全局布局(注意参数 wwg)wl = QVBoxLayout(wwg) hlayout1 = QHBoxLayout()hlayout2 = QHBoxLayout()hlayout3 = QHBoxLayout()#vlayout = QVBoxLayout()#glayout = QGridLayout()#formlayout = QFormLayout()# 局部布局添加部件(例如:按钮)hlayout1.setSpacing(0)#hlayout1.addStretch(1)hlayout1.addWidget( QPushButton(str(1)) )#hlayout1.addStretch(1)hlayout1.addWidget( QPushButton(str(2)) )#hlayout1.addStretch(1)hlayout1.addWidget( QPushButton(str(3)) )#hlayout1.addStretch(1)hlayout1.addWidget( QPushButton(str(4)) )#hlayout1.addStretch(1)hlayout2.addStretch(1)hlayout2.addWidget( QPushButton(str(1)) )hlayout2.addStretch(1)hlayout2.addWidget( QPushButton(str(2)) )hlayout2.addStretch(1)hlayout2.addWidget( QPushButton(str(3)) )hlayout2.addStretch(1)hlayout2.addWidget( QPushButton(str(4)) )hlayout2.addStretch(1)#hlayout3.addStretch(1)hlayout3.setSpacing(0)hlayout3.addWidget(self.browser)#hlayout3.addStretch(1)hlayout3.addWidget(self.textEdit)#hlayout3.addStretch(1)#self.setLayout(hlayout)#vlayout.addWidget( QPushButton(str(3)) )#vlayout.addWidget( QPushButton(str(4)) )#glayout.addWidget( QPushButton(str(5)) , 0, 0 )#glayout.addWidget( QPushButton(str(6)) , 0, 1 )#glayout.addWidget( QPushButton(str(7)) , 1, 0)#glayout.addWidget( QPushButton(str(8)) , 1, 1)#formlayout.addWidget( QPushButton(str(9)) )#formlayout.addWidget( QPushButton(str(10)) )#formlayout.addWidget( QPushButton(str(11)) )#formlayout.addWidget( QPushButton(str(12)) )# 这里向局部布局内添加部件,将他加到全局布局wl.addLayout(hlayout1)wl.addLayout(hlayout2)wl.addLayout(hlayout3)#wl.addLayout(vlayout)#wl.addLayout(glayout)#wl.addLayout(formlayout)self.setLayout(wl)
下面对重要代码进行逐行解释:
#wwg = QWidget(self)这里定义了一个全局的布局,接下来,所有的布局都会放在这个布局里进行设置
#wl = QVBoxLayout(wwg)这里将wwg这个全局布局设置为整体的垂直布局,接下来所有的布局都是用的垂直布局
hlayout1 = QHBoxLayout()hlayout2 = QHBoxLayout()hlayout3 = QHBoxLayout()
这里设置三个水平布局,第一个水平布局的控件设置的是按钮,第二个也是按钮,第三个左边是网页,右边是文本编辑框。这三个水平布局按照整体垂直布局从上往下摆放。
下面依次给这三个水平布局添加控件:
- 第一个水平控件用了setSpacing(0)来设置按钮间距,可以保证按钮从左到右无间距的布满整个横排;
- 第二个水平控件用了addStretch(1)按比例来分配设置控件后的剩余控件,大家可以看最前面的两排按钮的区别;
- 第三个水平控件因为想要来放置网页和文本框,所以尽量要布满界面,所以用的是setSpacing(0)进行间距设置。
接下来就是将这三个水平布局添加到整体的垂直布局中去了,用如下的方式:
wl.addLayout(hlayout1)wl.addLayout(hlayout2)wl.addLayout(hlayout3)
self.setLayout(wl)这句代码很关键,书上没有,它的作用是将窗口本身设置为全局布局,如果不写,效果如下:
browser设置默认展示百度首页
我写了个函数,当然也可以直接写在__init__(self)中,不过为了便于理解,建议大家还是写函数
def browser_init(self):self.browser.load(QUrl('https://baidu.com'))
结果展示
是不是以为已经写完了,图样图森破,看看展示成什么鬼样子了
这是什么鬼,为啥左边百度首页展示就这么窄一点点区域,完全不是想要的样子好吗。。。
于是博主一番网上搜索操作,在__init__(self)初始化函数中添加了这么一句代码:
self.textEdit.setFixedWidth(200)
这句代码的作用是将右侧的文本框设置宽度为200,这样就可以了,展示效果就是最上面那张图,如此简单啊。。
学会布局后,就可以随心所欲的添加自己想要的控件了,也完全不用担心美工UI设计出来的花里胡哨的东西了。
当然,博主的开发工作要比这个界面复杂得多,遇到的坑远不止这个布局设置,待相关开发完成后,再一一介绍。
完整代码
最后照旧上完整代码
# -*- coding: utf-8 -*-
"""
Created on Wed Apr 10 08:52:37 2020@author: HG
"""from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtCore import Qt, QUrl
import sys class MyWindow(QWidget): def __init__(self): super(MyWindow,self).__init__()self.setWindowTitle('嵌套布局示例')self.resize(1000, 800)self.browser = QWebEngineView(self)self.textEdit = QTextEdit(self)self.browser_init()self.layout_init()self.textEdit.setFixedWidth(200)def layout_init(self):# 全局部件(注意参数 self),用于"承载"全局布局wwg = QWidget(self)# 全局布局(注意参数 wwg)wl = QVBoxLayout(wwg)hlayout1 = QHBoxLayout()hlayout2 = QHBoxLayout()hlayout3 = QHBoxLayout()#vlayout = QVBoxLayout()#glayout = QGridLayout()#formlayout = QFormLayout()# 局部布局添加部件(例如:按钮)hlayout1.setSpacing(0)#hlayout1.addStretch(1)hlayout1.addWidget( QPushButton(str(1)) )#hlayout1.addStretch(1)hlayout1.addWidget( QPushButton(str(2)) )#hlayout1.addStretch(1)hlayout1.addWidget( QPushButton(str(3)) )#hlayout1.addStretch(1)hlayout1.addWidget( QPushButton(str(4)) )#hlayout1.addStretch(1)hlayout2.addStretch(1)hlayout2.addWidget( QPushButton(str(1)) )hlayout2.addStretch(1)hlayout2.addWidget( QPushButton(str(2)) )hlayout2.addStretch(1)hlayout2.addWidget( QPushButton(str(3)) )hlayout2.addStretch(1)hlayout2.addWidget( QPushButton(str(4)) )hlayout2.addStretch(1)#hlayout3.addStretch(1)hlayout3.setSpacing(0)hlayout3.addWidget(self.browser)#hlayout3.addStretch(1)hlayout3.addWidget(self.textEdit)#hlayout3.addStretch(1)#self.setLayout(hlayout)#vlayout.addWidget( QPushButton(str(3)) )#vlayout.addWidget( QPushButton(str(4)) )#glayout.addWidget( QPushButton(str(5)) , 0, 0 )#glayout.addWidget( QPushButton(str(6)) , 0, 1 )#glayout.addWidget( QPushButton(str(7)) , 1, 0)#glayout.addWidget( QPushButton(str(8)) , 1, 1)#formlayout.addWidget( QPushButton(str(9)) )#formlayout.addWidget( QPushButton(str(10)) )#formlayout.addWidget( QPushButton(str(11)) )#formlayout.addWidget( QPushButton(str(12)) )# 这里向局部布局内添加部件,将他加到全局布局wl.addLayout(hlayout1)wl.addLayout(hlayout2)wl.addLayout(hlayout3)#wl.addLayout(vlayout)#wl.addLayout(glayout)#wl.addLayout(formlayout)self.setLayout(wl)def browser_init(self):self.browser.load(QUrl('https://baidu.com'))if __name__=="__main__": app = QApplication(sys.argv) win = MyWindow() win.show() sys.exit(app.exec_())
完
PyQt5的相对布局管理相关推荐
- python PyQt5 QHBoxLayout 水平布局管理
参考文章:PyQt5布局管理之QHBoxLayout(一) https://doc.qt.io/qtforpython/PySide2/QtWidgets/QHBoxLayout.html?highl ...
- PyQt5教程(三)——布局管理
2019独角兽企业重金招聘Python工程师标准>>> 原文:http://zetcode.com/gui/pyqt5/layout/ 布局管理是GUI编程中的重要部分.布局管理是如 ...
- python PyQt5 QVBoxLayout 垂直布局管理
https://doc.qt.io/qtforpython/PySide2/QtWidgets/QVBoxLayout.html?highlight=qvboxlayout#PySide2.QtWid ...
- PyQt5学习Ⅱ(菜单,工具栏和布局管理)
在PyQt5教程的这一部分中,我们创建了创建状态栏,菜单栏和工具栏.菜单是位于菜单栏中的一组命令.工具栏上有按钮,其中包含应用程序中的一些常用命令 状态栏显示状态信息,通常位于应用程序窗口的底部. Q ...
- PyQt5——布局管理
PyQt5布局管理使用方法详见:https://blog.csdn.net/jia666666/article/list/3?t=1& PyQt5布局管理汇总: 1.QHBoxLayout 2 ...
- pyqt5讲解10:布局管理讲解大全
一.绝对布局 使用move(x,y)的方法. 绝对布局: 如果改变屏膜的大小,控件的位置不会发生变化, 不同 屏膜显示有区别 # -*- coding: utf-8 -*-'''[简介]PyQT5中A ...
- Python 小白从零开始 PyQt5 项目实战(5)布局管理
本系列面向 Python 小白,从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战. 什么叫从零开始?从软件安装.环境配置开始.不跳过一个细节,不漏掉一行代码,不省略一个例图. ...
- PyQt5 第二章 窗口布局管理(二)
2.2 布局管理 <零基础入门玩转 PyQt5> 邀请码: LWskm3AS 布局就是如何管理应用中的元素和窗口,有两种方式可以搞定:绝对定位和layout类 2.2.1 绝对定位 每个程 ...
- 10. PyQt5布局管理器
PyQt5布局管理器 PyQt5布局管理器 1. QBoxLayout 及其子类 (盒式布局) 2. QGridLayout 类(网格布局) 3. QFormLayout 类(表单布局) PyQt5布 ...
最新文章
- 国内42所一流大学综合排名出炉!清北之后谁是国内第三?
- Swift 反射Mirror的使用
- 当postgres的主键序列不同步时,如何重置?
- Openstack_通用模块_Oslo_vmware 创建 vCenter 虚拟机快照
- 思科基本配置脚本命令
- [原创]django+ldap实现统一认证部分一(django-auth-ldap实践)
- python关闭图像_Python关闭
- 字符编码(1)-- 基本概念
- 基于SpringBoot 学生成绩管理系统的设计与实现
- java经典源码_java经典源代码
- 淘宝数据库,主键如何设计以及自增ID的问题
- java横向导出excel_JavaWeb POI 导出Excel
- 【论文笔记】Program synthesis using natural language
- C++ strcpy、strcat、strcmp和strlen的实现
- 操作系统——(9)磁盘存储器的管理
- NOIP2008 ISBN号码(一桶水)【A005】
- 技术沙龙|这期我们聊聊软件工程师的区块链升级挑战(杭州)
- 不动产纠纷包括房屋买卖合同吗
- 【JavaScript】事件相关知识详解
- 阿里云OSS对象存储服务上传失败问题之一