布局管理器

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

-QHBoxLayout
- QVBoxLayout
- QGridLayout
- QStackedLayout

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

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

垂直布局-QVBoxLayout

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

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

水平布局-QHBoxLayout

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

QVBoxLayout演示

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

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

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

#?初始化APP實例
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()
#?加載窗口并啟動App
app.exec()

QHBoxLayout演示

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

圖中左右兩側(cè)是兩個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)

總結(jié)

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

編輯：黃飛

?