PyQt5的相对布局管理的实现

2024-09-29 10:34:28

博主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 相对布局内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Pyqt5 关于流式布局和滚动条的综合使用示例代码

流式布局所谓流式布局指的是容器中的元素像流水一样,是可以浮动的,当元素一行或者一列占满的时候,它会自动流入到下一行或者下一列. pyqt5流式布局 pyqt中采用流式布局的方法原理是,通过contentsMargins获取到子元素距离布局的上下左右宽度,然后我们将所有子元素进行遍历,如果它加上边距可以在一行放入的话,那么就放在一行内,如果不能,就放入到下一行,具体代码如下: m = self.contentsMargins() effective_rect = rect.adjusted(+m
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例

PyQt5布局控件QHBoxLayout简介采用QBOXLayout类可以在水平和垂直方向上排列控件,QHBoxLayout和QVBoxLayout类继承自QBoxLayout 采用QHBoxLayout类,按照从左到右的顺序来添加控件 QHBoxLayout类中常用的方法如下方法描述 addLayout(self,stretch=0) 在窗口的右边添加布局,使用stretch(伸缩量)进行伸缩,伸缩量默认为0 addWidget(self,QWidget.stretch,Qt.Align
Pyqt5自适应布局实例

在pyqt5中要做到自适应布局,必须应用Layout类下面列出类似于 html 中 float 功能的布局方法: 实现原理: PyQt5中的布局中,stretch 属性类似于一个可自适应的空白布局.会尽可能将周围的组件布局向外挤压 from PyQt5.QtWidgets import QVBoxLayout, QHBoxLayout # 垂直居中 def vcenter_layout(*widgets): vbox = QVBoxLayout() vbox.addStretch() for
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例

PyQt5布局控件QVBoxLayout简介采用QVBoxLayout类,按照从上到下的顺序添加控件本节内容较少,演示两个实例,便于明白QVBoxLayout(垂直布局)的使用 QVBoxLayout的正常使用实例 import sys from PyQt5.QtWidgets import QApplication ,QWidget ,QVBoxLayout , QPushButton class Winform(QWidget): def __init__(self,parent=Non
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例

PyQt5布局控件QFormLayout简介 QFormLayout是label-field式的表单布局,顾明思议,就是实现表单方式的布局,表单是提示用户进行交互的一种模式,主要有两列组成,第一列用于显示信息,给用户提示,一般叫做label域,第二列需要用户进行选择或输入,一般叫做field域,label与field的关系就是label关联field QFormLayout表单布局的使用实例 import sys from PyQt5.QtWidgets import QApplication
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例

PyQt5布局控件QGridLayout简介 QGridLayout(网格布局)是将窗口分割成行和列的网格来进行排列,通常可以使用函数addWidget()将被管理的控件(Widget)添加到窗口中,或者使用addLayout()函数将布局(layout)添加到窗口中,也可以通过addWIdget()函数对所添加的控件设置行数与列数的跨越,最后实现网格占据多个窗格 QGridLayout类中常用的方法方法描述 addWidget(QWidget Widget,int row,int col,
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法

PyQt5窗口布局控件QStackedWidget介绍 QTackedWidget是一个堆栈窗口控件,可以填充一些小控件,但是同一时间只有一个小控件可以显示,QStackedWidget使用QStackedLayout布局.QSTackedWidget控件与QTabWidget类似,可以有效的显示窗口的控件 QStackedWidget的使用实例 import sys from PyQt5.QtGui import * from PyQt5.QtCore import * from PyQt5.
PyQt5的相对布局管理的实现

博主PyQt5新手,最近在写一个可视化展示界面,第一个遇到的坑就是布局管理. 其实可以不用相对布局,直接用QtDesigner进行傻瓜式的拖控件也不是不可以,高级一点,也可以用绝对布局,定义控件的绝对位置,就可以避免踏入这个坑了. 但是,还是建议大家,尤其是新手使用相对布局,一个感受,就是相对布局美观整齐,控件不会乱. 写在前面如果大家完全初学,建议大家买本书看看,我发现网上能搜到的关于PyQt5教程都是从书上来的,而且网上的教程都是书本的搬运工,少有自己的思考,比如如何活用布局,也就是这篇博
PyQt5每天必学之布局管理

在GUI编程中有一个不容忽视的部分,那就是布局管理.布局管理掌控着我们的控件在应用程序窗口如何摆放.布局管理可以通过两种方式来完成.我们可以使用绝对定位或布局类两种方法控制程序窗口中的控件位置. 绝对定位每个控件按程序员指定的位置放置.当您使用绝对定位,我们要了解以下限制: 如果我们调整窗口的大小控件的大小和位置保持不变在不同平台上应用程序看起来可能会不同更改字体可能会破坏应用程序的布局如果决定改变布局,我们必须每个控件彻底的加以修改,这是繁琐和耗时的下面的例子就是控件的绝对坐标定位方
Python深度学习实战PyQt5布局管理项目示例详解

目录 1. 从绝对定位到布局管理 1.1 什么是布局管理 1.2 Qt 中的布局管理方法 2. 水平布局(Horizontal Layout) 3. 垂直布局(Vertical Layout) 4. 栅格布局(Grid Layout) 5. 表格布局(Form Layout) 6. 嵌套布局 7. 容器布局布局管理就是管理图形窗口中各个部件的位置和排列.图形窗口中的大量部件也需要通过布局管理,对部件进行整理分组.排列定位,才能使界面整齐有序.美观大方. 1. 从绝对定位到布局管理 1.1 什么
Java卡片布局管理器解释及实例

由 CardLayout 类实现的布局管理器称为卡片布局管理器,用来操纵其所管理容器中包含的容器或组件.每个直接添加到其所管理容器中的容器或组件为一个卡片,最先被添加的容器或组件被认为是第一个卡片,最后被添加的则为最后一个卡片,初次运行时将显示第一个卡片.下面,我们就来通过一个实例看看它是怎么用的. 源码: import java.awt.BorderLayout; import java.awt.CardLayout; import java.awt.Color; import java.aw
java Swing布局管理之BoxLayout布局

本文为大家解析java Swing布局管理中的BoxLayout布局,供大家参考,具体内容如下 BoxLayout:可以指定在容器中是否对控件进行水平或者垂直放置,比 FlowLayout 要更为灵活 BoxLayout与其他布局管理器稍有不同,必须向其构造函数中传递容器实例的引用,由该容器使用BoxLayout.另外必须指定BoxLayout中组件的布局方式:垂直排列(按列)或水平排列(按行).用水平组件和垂直组件的不同组合嵌套多面板的作用类似于 GridBagLayout,但没那么复杂. 1
Java 最重要布局管理器GridBagLayout的使用方法

GridBagLayout是java里面最重要的布局管理器之一,可以做出很复杂的布局,可以说GridBagLayout是必须要学好的的, GridBagLayout 类是一个灵活的布局管理器,它不要求组件的大小相同便可以将组件垂直.水平或沿它们的基线对齐. 每个 GridBagLayout 对象维持一个动态的矩形单元网格,每个组件占用一个或多个这样的单元,该单元被称为显示区域. 下面就通过一个记事本案例去说明GridBagLayout的使用方法. 分析: 带有箭头的说明可以拉伸的. 4占用4个格
Java弹簧布局管理器使用方法详解

由 SpringLayout 类实现的布局管理器称为弹簧布局管理器.利用该布局管理器管理组件,当改变窗体的大小时,能够在不改变组件间相对位置的前提下自动调整组件大小,使组件依旧布满整个窗体,从而保证了窗体的整体效果.下面,通过一个实例来看看弹簧布局管理器的使用方法和效果. 弹簧布局管理器以容器和组件的边缘为操作对象,通过为组件和容器边缘以及组件和组件边缘建立约束,实现对组件布局的管理.通过方法 putConstraint(String e1,Conponet c1,int pad,String
Java Swing组件布局管理器之FlowLayout（流式布局）入门教程

本文实例讲述了Java Swing组件布局管理器之FlowLayout(流式布局).分享给大家供大家参考,具体如下: FlowLayout应该是Swing布局管理器学习中最简单.最基础的一个.所谓流式,就是内部控件像水流一样,从前到后按顺序水平排列,直到达到容器的宽度时跳转到第二行.既然是水平排列,那么就存在三种基本的对齐方式:居中对齐(CENTER ).左对齐(LEFT )和右对齐(RIGHT ).然而,FlowLayout还提供两种对齐方式:LEADING,表示控件与容器方向开始边对应:TR
Java编程使用箱式布局管理器示例【基于swing组件】

本文实例讲述了Java编程使用箱式布局管理器.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整代码如下: package awtDemo; import java.awt.BorderLayout; import java.awt.Container; import javax.swing.Box; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JLabel; import javax

PyQt5的相对布局管理的实现

相关推荐

随机推荐