首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

PyQt5的相对布局管理的实现

Posted in Python onAugust 07, 2020

博主PyQt5新手，最近在写一个可视化展示界面，第一个遇到的坑就是布局管理。

其实可以不用相对布局，直接用QtDesigner进行傻瓜式的拖控件也不是不可以，高级一点，也可以用绝对布局，定义控件的绝对位置，就可以避免踏入这个坑了。

但是，还是建议大家，尤其是新手使用相对布局，一个感受，就是相对布局美观整齐，控件不会乱。

写在前面

如果大家完全初学，建议大家买本书看看，我发现网上能搜到的关于PyQt5教程都是从书上来的，而且网上的教程都是书本的搬运工，少有自己的思考，比如如何活用布局，也就是这篇博文要解决的内容。建议大家看看《PyQt5快速开发与实战这本书》，总体不错，博主的很多解决方案都是从这本书上来。
下面是编译环境：

  • python3.7，编译器是pycharm，特别说明，不要用Spyder，如果只是常规的控件用Spyder没啥问题，但是如果你用了QWebEngineView，会让你崩溃到怀疑人生，遇到的问题无法解决，一度想要从入门到放弃。博主也是从matlab过来的，大爱Spyder的编译风格，但是建议还是趁早换了，pycharm的代码自动填充功能不要太爽；
  • 要实现的功能：设置两排横向的按钮，一个网页展示区，和网页并排展示的文本框用来展示数据，展示效果如下：

PyQt5的相对布局管理的实现

用到的包

常规包导入

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) #1
		self.textEdit = QTextEdit(self) #2
		self.browser_init() #3
		self.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)这句代码很关键，书上没有，它的作用是将窗口本身设置为全局布局，如果不写，效果如下：

PyQt5的相对布局管理的实现

browser设置默认展示百度首页

我写了个函数，当然也可以直接写在__init__(self)中，不过为了便于理解，建议大家还是写函数

def browser_init(self):
		self.browser.load(QUrl('https://baidu.com'))

结果展示

是不是以为已经写完了，图样图森破，看看展示成什么鬼样子了

PyQt5的相对布局管理的实现

这是什么鬼，为啥左边百度首页展示就这么窄一点点区域，完全不是想要的样子好吗。。。
于是博主一番网上搜索操作，在__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的相对布局管理的实现的文章就介绍到这了,更多相关PyQt5 相对布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

PyQt5的相对布局管理的实现

- Author -

黄钢

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
Python操作列表的常用方法分享
Feb 13 Python
python使用心得之获得github代码库列表
Jun 25 Python
Python基于有道实现英汉字典功能
Jul 25 Python
Python argv用法详解
Jan 08 Python
Python实现递归遍历文件夹并删除文件
Apr 18 Python
对python list 遍历删除的正确方法详解
Jun 29 Python
使用python验证代理ip是否可用的实现方法
Jul 25 Python
selenium+python自动化测试环境搭建步骤
Jun 03 Python
Pycharm如何运行.py文件的方法步骤
Mar 03 Python
python实现opencv+scoket网络实时图传
Mar 20 Python
python删除指定列或多列单个或多个内容实例
Jun 28 Python
python实现Nao机器人的单目测距
Sep 04 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
Aug 07 #Python
Python configparser模块封装及构造配置文件
Aug 07 #Python
Python logging模块进行封装实现原理解析
Aug 07 #Python
Python定时任务APScheduler安装及使用解析
Aug 07 #Python
Python如何解除一个装饰器
Aug 07 #Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
Aug 07 #Python
Python实现上下文管理器的方法
Aug 07 #Python
灵敏度(1) RP-F11(1) TOSHIBA(1) 数调机(1) 手调机(1) 东芝(1) 高放电路(1) 德劲(5) 频率(1) 鉴频器(1)
You might like
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP中list方法用法示例
2016/12/01 PHP
php判断目录存在的简单方法
2019/09/26 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
解决jquery插件：TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
javascript时间差插件分享
2016/07/18 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
用python代码做configure文件
2014/07/20 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
详解Python 爬取13个旅游城市，告诉你五一大家最爱去哪玩？
2019/05/07 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
法国太阳镜店：Sunglasses Shop
2016/08/27 全球购物
Dower & Hall官网：英国小众轻奢珠宝品牌
2019/01/31 全球购物
餐厅采购员岗位职责
2014/03/06 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
保护水资源的标语
2014/06/17 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
自主招生英文自荐信
2015/03/25 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
Django+Celery实现定时任务的示例
2021/06/23 Python
MySQL数据库 任意ip连接方法
2022/05/20 MySQL