博主PyQt5新手，最近在寫一個可視化展示界面，第一個遇到的坑就是布局管理。
其實可以不用相對布局，直接用QtDesigner進行傻瓜式的拖控件也不是不可以，高級一點，也可以用絕對布局，定義控件的絕對位置，就可以避免踏入這個坑了。
但是，還是建議大家，尤其是新手使用相對布局，一個感受，就是相對布局美觀整齊，控件不會亂。
寫在前面
如果大家完全初學(xué)，建議大家買本書看看，我發(fā)現(xiàn)網(wǎng)上能搜到的關(guān)于PyQt5教程都是從書上來的，而且網(wǎng)上的教程都是書本的搬運工，少有自己的思考，比如如何活用布局，也就是這篇博文要解決的內(nèi)容。建議大家看看《PyQt5快速開發(fā)與實戰(zhàn)這本書》，總體不錯，博主的很多解決方案都是從這本書上來。
下面是編譯環(huán)境：
- python3.7，編譯器是pycharm，特別說明，不要用Spyder，如果只是常規(guī)的控件用Spyder沒啥問題，但是如果你用了QWebEngineView，會讓你崩潰到懷疑人生，遇到的問題無法解決，一度想要從入門到放棄。博主也是從matlab過來的，大愛Spyder的編譯風(fēng)格，但是建議還是趁早換了，pycharm的代碼自動填充功能不要太爽；
- 要實現(xiàn)的功能：設(shè)置兩排橫向的按鈕，一個網(wǎng)頁展示區(qū)，和網(wǎng)頁并排展示的文本框用來展示數(shù)據(jù)，展示效果如下：
用到的包
常規(guī)包導(dǎo)入
|
1
2
3
4
|
from PyQt5.QtWidgets import *from PyQt5.QtWebEngineWidgets import QWebEngineViewfrom PyQt5.QtCore import Qt, QUrlimport sys |
QWebEngineView是用來展示百度首頁的，用Spyder編譯的話，一直會報錯，報錯如下：
QtWebEngineWidgets must be imported before a QCoreApplication instance is created
界面生成
編寫初始化函數(shù)，代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
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 定義一個瀏覽器控件<br>#2 定義一個文本編輯框，個人用于展示網(wǎng)頁顯示的數(shù)據(jù)<br>#3 初始化瀏覽器設(shè)置<br>#4 布局設(shè)置 |
布局設(shè)置
不說廢話，直接上代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
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) |
下面對重要代碼進行逐行解釋：
#wwg = QWidget(self)這里定義了一個全局的布局，接下來，所有的布局都會放在這個布局里進行設(shè)置
#wl = QVBoxLayout(wwg)這里將wwg這個全局布局設(shè)置為整體的垂直布局，接下來所有的布局都是用的垂直布局
|
1
2
3
|
hlayout1 = QHBoxLayout() hlayout2 = QHBoxLayout() hlayout3 = QHBoxLayout() |
這里設(shè)置三個水平布局，第一個水平布局的控件設(shè)置的是按鈕，第二個也是按鈕，第三個左邊是網(wǎng)頁，右邊是文本編輯框。這三個水平布局按照整體垂直布局從上往下擺放。
下面依次給這三個水平布局添加控件：
第一個水平控件用了setSpacing(0)來設(shè)置按鈕間距，可以保證按鈕從左到右無間距的布滿整個橫排；
第二個水平控件用了addStretch(1)按比例來分配設(shè)置控件后的剩余控件，大家可以看最前面的兩排按鈕的區(qū)別；
第三個水平控件因為想要來放置網(wǎng)頁和文本框，所以盡量要布滿界面，所以用的是setSpacing(0)進行間距設(shè)置。
接下來就是將這三個水平布局添加到整體的垂直布局中去了，用如下的方式：
|
1
2
3
|
wl.addLayout(hlayout1)wl.addLayout(hlayout2)wl.addLayout(hlayout3) |
self.setLayout(wl)這句代碼很關(guān)鍵，書上沒有，它的作用是將窗口本身設(shè)置為全局布局，如果不寫，效果如下：
browser設(shè)置默認(rèn)展示百度首頁
我寫了個函數(shù)，當(dāng)然也可以直接寫在__init__(self)中，不過為了便于理解，建議大家還是寫函數(shù)
|
1
2
|
def browser_init(self): self.browser.load(QUrl('https://baidu.com')) |
結(jié)果展示
是不是以為已經(jīng)寫完了，圖樣圖森破，看看展示成什么鬼樣子了
這是什么鬼，為啥左邊百度首頁展示就這么窄一點點區(qū)域，完全不是想要的樣子好嗎。。。
于是博主一番網(wǎng)上搜索操作，在__init__(self)初始化函數(shù)中添加了這么一句代碼：
|
1
|
self.textEdit.setFixedWidth(200) |
這句代碼的作用是將右側(cè)的文本框設(shè)置寬度為200，這樣就可以了，展示效果就是最上面那張圖，如此簡單啊。。
學(xué)會布局后，就可以隨心所欲的添加自己想要的控件了，也完全不用擔(dān)心美工UI設(shè)計出來的花里胡哨的東西了。
當(dāng)然，博主的開發(fā)工作要比這個界面復(fù)雜得多，遇到的坑遠不止這個布局設(shè)置，待相關(guān)開發(fā)完成后，再一一介紹。
完整代碼
最后照舊上完整代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
# -*- coding: utf-8 -*-"""Created on Wed Apr 10 08:52:37 2020@author: HG"""from PyQt5.QtWidgets import *from PyQt5.QtWebEngineWidgets import QWebEngineViewfrom PyQt5.QtCore import Qt, QUrlimport 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的相對布局管理的實現(xiàn)的文章就介紹到這了,更多相關(guān)PyQt5 相對布局內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/u012848304/article/details/105416091
