PyQt5的相对布局管理的实现

 更新时间:2020年8月7日 18:22  点击:2115

博主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) #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)这句代码很关键,书上没有,它的作用是将窗口本身设置为全局布局,如果不写,效果如下:

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的相对布局管理的实现的文章就介绍到这了,更多相关PyQt5 相对布局内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

[!--infotagslink--]

相关文章

  • pyqt5 textEdit、lineEdit操作的示例代码

    这篇文章主要介绍了pyqt5 textEdit、lineEdit操作的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-12
  • python编程PyQt5创建按钮及触发点击事件示例解析

    这篇文章主要为大家介绍了python编程使用PyQt5如何创建按钮及触发点击事件的示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步...2021-10-29
  • Pyqt5 实现窗口缩放,控件在窗口内自动伸缩的操作

    这篇文章主要介绍了Pyqt5 实现窗口缩放,控件在窗口内自动伸缩的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
  • PyQt5结合matplotlib绘图的实现示例

    这篇文章主要介绍了PyQt5结合matplotlib绘图的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-15
  • PyQt5-QDateEdit的简单使用操作

    这篇文章主要介绍了PyQt5-QDateEdit的简单使用操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-12
  • PyQt5实现多张图片显示并滚动

    最近要做个网页图片批量下载工具,然后需要一个页面显示网页上的所有图片供用户勾选,再根据勾选的内容来下载指定图片,其中就涉及到要到同时显示多张图片,本文就来介绍一下...2021-06-11
  • PyQt5 实现给无边框widget窗口添加背景图片

    这篇文章主要介绍了PyQt5 实现给无边框widget窗口添加背景图片的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
  • pyqt5打包成exe可执行文件的方法

    最近做了一个窗口程序,那么能不能将其生成一个可执行文件,本文就介绍一下pyqt5打包成exe可执行文件的方法,感兴趣的可以了解一下...2021-05-15
  • 详解PyQt5中textBrowser显示print语句输出的简单方法

    这篇文章主要介绍了详解PyQt5中textBrowser显示print语句输出的简单方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-07
  • PyQt5使用mimeData实现拖拽事件教程示例解析下

    这篇文章主要为大家介绍了PyQt5使用mimeData实现拖拽事件的教程示例解析,系列文章详见文中跳转链接,有需要的朋友可以借鉴参考下,希望能够有所帮助...2021-10-29
  • PyQt5 显示超清高分辨率图片的方法

    这篇文章主要介绍了PyQt5 显示超清高分辨率图片的方法,帮助大家更好的理解和阿学习使用pyqt5,感兴趣的朋友可以了解下...2021-04-10
  • Pycharm配置PyQt5环境的教程

    这篇文章主要介绍了Pycharm配置PyQt5环境的教程,本文通过图文实例详解给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-10
  • 解决PyQt5 无边框后窗口的移动问题

    这篇文章主要介绍了解决PyQt5 无边框后窗口的移动问题,具有很好的参考价值,希望对大家有所帮助,一起跟随小编过来看看吧...2021-03-09
  • Python3中PyQt5简单实现文件打开及保存

    本文将结合实例代码,介绍Python3中PyQt5简单实现文件打开及保存,具有一定的参考价值,需要的朋友们下面随着小编来一起学习学习吧...2021-06-10
  • Python+PyQt5实现灭霸响指功能

    这篇文章主要介绍了Python+PyQt5实现灭霸响指功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-25
  • pyqt5中动画的使用详解

    这篇文章主要介绍了pyqt5中动画的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-10
  • Python深度学习实战PyQt5信号与槽的连接

    本文讲解信号与槽的连接机制,详细示范各种类型的信号/槽连接的实现方法,这是图形用户界面的核心内容。还将介绍面向对象的程序设计,这是图形用户界面的基本思想...2021-10-18
  • PyQt5多线程防卡死和多窗口用法的实现

    这篇文章主要介绍了PyQt5多线程防卡死和多窗口用法的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-15
  • 详解PyQt5 GUI 接收UDP数据并动态绘图的过程(多线程间信号传递)

    这篇文章主要介绍了PyQt5 GUI 接收UDP数据并动态绘图(多线程间信号传递),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-08
  • PyQt 5 设置Logo图标和Title标题的操作

    这篇文章主要介绍了PyQt 5 设置Logo图标和Title标题的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09