溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

PyQt5實(shí)現(xiàn)相對(duì)布局管理的方法

發(fā)布時(shí)間：2020-08-10 10:35:35 來源：億速云 閱讀：274 作者：小新 欄目：開發(fā)技術(shù)

這篇文章給大家分享的是有關(guān)PyQt5實(shí)現(xiàn)相對(duì)布局管理的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

博主PyQt5新手，最近在寫一個(gè)可視化展示界面，第一個(gè)遇到的坑就是布局管理。

其實(shí)可以不用相對(duì)布局，直接用QtDesigner進(jìn)行傻瓜式的拖控件也不是不可以，高級(jí)一點(diǎn)，也可以用絕對(duì)布局，定義控件的絕對(duì)位置，就可以避免踏入這個(gè)坑了。

但是，還是建議大家，尤其是新手使用相對(duì)布局，一個(gè)感受，就是相對(duì)布局美觀整齊，控件不會(huì)亂。

寫在前面

如果大家完全初學(xué)，建議大家買本書看看，我發(fā)現(xiàn)網(wǎng)上能搜到的關(guān)于PyQt5教程都是從書上來的，而且網(wǎng)上的教程都是書本的搬運(yùn)工，少有自己的思考，比如如何活用布局，也就是這篇博文要解決的內(nèi)容。建議大家看看《PyQt5快速開發(fā)與實(shí)戰(zhàn)這本書》，總體不錯(cuò)，博主的很多解決方案都是從這本書上來。
下面是編譯環(huán)境：

  • python3.7，編譯器是pycharm，特別說明，不要用Spyder，如果只是常規(guī)的控件用Spyder沒啥問題，但是如果你用了QWebEngineView，會(huì)讓你崩潰到懷疑人生，遇到的問題無法解決，一度想要從入門到放棄。博主也是從matlab過來的，大愛Spyder的編譯風(fēng)格，但是建議還是趁早換了，pycharm的代碼自動(dòng)填充功能不要太爽；
  • 要實(shí)現(xiàn)的功能：設(shè)置兩排橫向的按鈕，一個(gè)網(wǎng)頁展示區(qū)，和網(wǎng)頁并排展示的文本框用來展示數(shù)據(jù)，展示效果如下：

PyQt5實(shí)現(xiàn)相對(duì)布局管理的方法

用到的包

常規(guī)包導(dǎo)入

from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtCore import Qt, QUrl
import sys

QWebEngineView是用來展示百度首頁的，用Spyder編譯的話，一直會(huì)報(bào)錯(cuò)，報(bào)錯(cuò)如下：
QtWebEngineWidgets must be imported before a QCoreApplication instance is created

界面生成

編寫初始化函數(shù)，代碼如下：

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 定義一個(gè)瀏覽器控件
#2 定義一個(gè)文本編輯框，個(gè)人用于展示網(wǎng)頁顯示的數(shù)據(jù)
#3 初始化瀏覽器設(shè)置
#4 布局設(shè)置

布局設(shè)置

不說廢話，直接上代碼

def layout_init(self):

    # 全局部件（注意參數(shù) self），用于"承載"全局布局
		wwg = QWidget(self)


    
     # 全局布局（注意參數(shù) 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)) )
    
    # 這里向局部布局內(nèi)添加部件,將他加到全局布局
		wl.addLayout(hlayout1)
		wl.addLayout(hlayout2)
		wl.addLayout(hlayout3)
		#wl.addLayout(vlayout)
		#wl.addLayout(glayout)
		#wl.addLayout(formlayout)

		self.setLayout(wl)

下面對(duì)重要代碼進(jìn)行逐行解釋：

#wwg = QWidget(self)這里定義了一個(gè)全局的布局，接下來，所有的布局都會(huì)放在這個(gè)布局里進(jìn)行設(shè)置

#wl = QVBoxLayout(wwg)這里將wwg這個(gè)全局布局設(shè)置為整體的垂直布局，接下來所有的布局都是用的垂直布局

hlayout1 = QHBoxLayout()
		hlayout2 = QHBoxLayout()
		hlayout3 = QHBoxLayout()

這里設(shè)置三個(gè)水平布局，第一個(gè)水平布局的控件設(shè)置的是按鈕，第二個(gè)也是按鈕，第三個(gè)左邊是網(wǎng)頁，右邊是文本編輯框。這三個(gè)水平布局按照整體垂直布局從上往下擺放。

下面依次給這三個(gè)水平布局添加控件：

第一個(gè)水平控件用了setSpacing(0)來設(shè)置按鈕間距，可以保證按鈕從左到右無間距的布滿整個(gè)橫排；

第二個(gè)水平控件用了addStretch(1)按比例來分配設(shè)置控件后的剩余控件，大家可以看最前面的兩排按鈕的區(qū)別；

第三個(gè)水平控件因?yàn)橄胍獊矸胖镁W(wǎng)頁和文本框，所以盡量要布滿界面，所以用的是setSpacing(0)進(jìn)行間距設(shè)置。

接下來就是將這三個(gè)水平布局添加到整體的垂直布局中去了，用如下的方式：

wl.addLayout(hlayout1)
wl.addLayout(hlayout2)
wl.addLayout(hlayout3)

self.setLayout(wl)這句代碼很關(guān)鍵，書上沒有，它的作用是將窗口本身設(shè)置為全局布局，如果不寫，效果如下：

PyQt5實(shí)現(xiàn)相對(duì)布局管理的方法

browser設(shè)置默認(rèn)展示百度首頁

我寫了個(gè)函數(shù)，當(dāng)然也可以直接寫在__init__(self)中，不過為了便于理解，建議大家還是寫函數(shù)

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

結(jié)果展示

是不是以為已經(jīng)寫完了，圖樣圖森破，看看展示成什么鬼樣子了

PyQt5實(shí)現(xiàn)相對(duì)布局管理的方法

這是什么鬼，為啥左邊百度首頁展示就這么窄一點(diǎn)點(diǎn)區(qū)域，完全不是想要的樣子好嗎。。。
于是博主一番網(wǎng)上搜索操作，在__init__(self)初始化函數(shù)中添加了這么一句代碼：

self.textEdit.setFixedWidth(200)

這句代碼的作用是將右側(cè)的文本框設(shè)置寬度為200，這樣就可以了，展示效果就是最上面那張圖，如此簡單啊。。
學(xué)會(huì)布局后，就可以隨心所欲的添加自己想要的控件了，也完全不用擔(dān)心美工UI設(shè)計(jì)出來的花里胡哨的東西了。
當(dāng)然，博主的開發(fā)工作要比這個(gè)界面復(fù)雜得多，遇到的坑遠(yuǎn)不止這個(gè)布局設(shè)置，待相關(guān)開發(fā)完成后，再一一介紹。

完整代碼

最后照舊上完整代碼

# -*- 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):

    # 全局部件（注意參數(shù) self），用于"承載"全局布局
		wwg = QWidget(self)


    
     # 全局布局（注意參數(shù) 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)) )
    
    # 這里向局部布局內(nèi)添加部件,將他加到全局布局
		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_())


感謝各位的閱讀！關(guān)于PyQt5實(shí)現(xiàn)相對(duì)布局管理的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手