實(shí)現(xiàn)多組件顯示面板的PyQT5開發(fā)方案解析

布局管理器

桌面應(yīng)用程序開發(fā)，每個(gè)界面上不可能只顯示一個(gè)組件元素（文字或者圖像或者各種按鈕與選擇組件元素、輸入組件元素），當(dāng)需要顯示多個(gè)UI控件（組件元素）時(shí)，就需要把這些組件元素按行、列、網(wǎng)格、盒子等方式填充到面板（QWidget）上的不同位置，控制這些組件元素填充方式與位置的控件被稱為布局管理器。

-QHBoxLayout
- QVBoxLayout
- QGridLayout
- QStackedLayout

使用布局管理器來完成組件合理布局與對齊顯示，可以實(shí)現(xiàn)在不同設(shè)備上的自適應(yīng)窗口顯示，避免絕對定位方式顯示控件導(dǎo)致的各種弊端。我在OpenMV工具軟件平臺(tái)開發(fā)中，都是通過布局管理器實(shí)現(xiàn)組件布局與合理定位顯示，軟件可以適配到不同的操作系統(tǒng)與顯示分辨率上。

本文是上一篇文章的繼續(xù)，本文通過創(chuàng)建面板（QWidget）使用水平與垂直布局管理器實(shí)現(xiàn)多QLabel組件元素的顯示。上一篇QLabel顯示圖文的文章鏈接如下：

PyQT5開發(fā)之QLabel顯示文本圖像技巧

垂直布局-QVBoxLayout

PyQT5中垂直布局管理器(QVBoxLayout)是最常用的布局方式之一，如果有多個(gè)QWidget的組件，就可以直接通過QVBoxLayout的addWidget函數(shù)添加到垂直布局中，它們的顯示方式如下圖：

組件從上到下，垂直排列，順序顯示。開發(fā)者可以創(chuàng)建一個(gè)垂直布局管理器，然后添加多個(gè)組件到里面，最后把創(chuàng)建的垂直布局管理器通過QWidget的setLayout函數(shù)關(guān)聯(lián)到指定的QWidget實(shí)例面板。把實(shí)例面板通過setCentralWidget函數(shù)設(shè)置到QMainWindow中心面板上即可顯示。

水平布局-QHBoxLayout

水平布局跟垂直布局一樣，它支持在同一行顯示多個(gè)組件元素（UI控件），同樣支持通過addWidget函數(shù)把組件元素添加到布局中。 水平布局的元素從左到右順序排列，同樣可以通過setLayout方法綁定到指定的QWidget實(shí)例對象。

QVBoxLayout演示

演示通過QVBoxLayout實(shí)現(xiàn)多個(gè)QLabel組件布局，顯示圖像與文字信息，同時(shí)學(xué)習(xí)如何通過CSS方式修改QLabel背景顏色與字體顏色，首先看一下運(yùn)行界面效果：

該界面是基于兩個(gè)QLabel使用QVBoxLayout布局創(chuàng)建一個(gè)面板Widget實(shí)例完成。實(shí)現(xiàn)代碼如下：

from?PyQt5?import?QtWidgets,?QtCore,?QtGui
import?sys

#?初始化APP實(shí)例
app?=?QtWidgets.QApplication(sys.argv)

#?文本標(biāo)簽
txtLabel?=?QtWidgets.QLabel()
txtLabel.setStyleSheet("background-color:deeppink;?color:?blue;?border-radius:5px")
font?=?txtLabel.font()
font.setPixelSize(32)
txtLabel.setFont(font)
txtLabel.setText("Hello?World,?PyQT5開發(fā)...")
txtLabel.setAlignment(QtCore.Qt.AlignCenter)

#?圖像標(biāo)簽
imgLabel?=?QtWidgets.QLabel()
pixmap?=?QtGui.QPixmap("test3.png")
pix?=?pixmap.scaled(QtCore.QSize(620,?500),?QtCore.Qt.KeepAspectRatio)
imgLabel.setPixmap(pix)
imgLabel.setAlignment(QtCore.Qt.AlignCenter)

#?添加到布局管理器中
vbox_layout?=?QtWidgets.QVBoxLayout()
vbox_layout.addWidget(txtLabel)
vbox_layout.addWidget(imgLabel)

#?面板容器
widget?=?QtWidgets.QWidget()
widget.setLayout(vbox_layout)

#?初始化桌面容器
main_win?=?QtWidgets.QMainWindow()
#?設(shè)置APP窗口名稱
main_win.setWindowTitle("OpenCV開發(fā)者聯(lián)盟?-?PyQT5圖像顯示")
#?設(shè)置窗口大小
main_win.setMinimumSize(640,?500)
main_win.setCentralWidget(widget)

#?請求顯示
main_win.show()
#?加載窗口并啟動(dòng)App
app.exec()

其中QLabel的setStyleSheet函數(shù)支持CSS風(fēng)格修改QLabel的前景顏色、背景顏色、邊框大小、是否圓角顯示等屬性修改。

QHBoxLayout演示

通過三個(gè)QLabel組件分別顯示文本、圖像、文本，QHBoxLayout水平布局管理，創(chuàng)建一個(gè)QWidget實(shí)例，然后設(shè)置到QMainWindow的中心面板顯示，代碼運(yùn)行結(jié)果如下：

圖中左右兩側(cè)是兩個(gè)QLabel的文本組件，中間是QLabel的圖像組件。相關(guān)演示代碼如下：

#?文本標(biāo)簽
txtLabel?=?QtWidgets.QLabel()
txtLabel.setStyleSheet("background-color:deeppink;?color:?blue;?border-radius:5px")
font?=?txtLabel.font()
font.setPixelSize(32)
txtLabel.setFont(font)
txtLabel.setText("OpenCV開發(fā)者聯(lián)盟")
txtLabel.setAlignment(QtCore.Qt.AlignCenter)

#?圖像標(biāo)簽
imgLabel?=?QtWidgets.QLabel()
pixmap?=?QtGui.QPixmap("test1.png")
pix?=?pixmap.scaled(QtCore.QSize(620,?500),?QtCore.Qt.KeepAspectRatio)
imgLabel.setPixmap(pix)
imgLabel.setAlignment(QtCore.Qt.AlignCenter)

#?文本標(biāo)簽
xtLabel?=?QtWidgets.QLabel()
xtLabel.setStyleSheet("background-color:lightgreen;?color:?red;?border-radius:5px")
font?=?txtLabel.font()
font.setPixelSize(32)
xtLabel.setFont(font)
xtLabel.setText("OpenCV學(xué)堂")
xtLabel.setAlignment(QtCore.Qt.AlignCenter)

#?添加到布局管理器中
hbox_layout?=?QtWidgets.QHBoxLayout()
hbox_layout.addWidget(txtLabel)
hbox_layout.addWidget(imgLabel)
hbox_layout.addWidget(xtLabel)

用hbox_layout?替換vbox_layout 即可顯示結(jié)果

總結(jié)

本文介紹了PyQT5中最常見兩種布局管理器QVBoxLayout與QHBoxLayout，完成它們的代碼演示，通過演示代碼可以學(xué)習(xí)到如何創(chuàng)建水平與垂直布局，如何把布局綁定到QWidget實(shí)例上，如何顯示QWidget實(shí)例面板，同時(shí)復(fù)習(xí)了QLabel的相關(guān)知識(shí)點(diǎn)，演示了如何設(shè)置QLabel的文字顏色、背景顏色等風(fēng)格屬性。

編輯：黃飛

?