布局管理器

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

-QHBoxLayout
- QVBoxLayout
- QGridLayout
- QStackedLayout

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

PyQT5開發之QLabel顯示文本圖像技巧

垂直布局-QVBoxLayout

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

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

水平布局-QHBoxLayout

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

QVBoxLayout演示

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

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

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

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

#?文本標簽
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開發...")
txtLabel.setAlignment(QtCore.Qt.AlignCenter)

#?圖像標簽
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()
#?設置APP窗口名稱
main_win.setWindowTitle("OpenCV開發者聯盟?-?PyQT5圖像顯示")
#?設置窗口大小
main_win.setMinimumSize(640,?500)
main_win.setCentralWidget(widget)

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

QHBoxLayout演示

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

圖中左右兩側是兩個QLabel的文本組件，中間是QLabel的圖像組件。相關演示代碼如下：

#?文本標簽
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開發者聯盟")
txtLabel.setAlignment(QtCore.Qt.AlignCenter)

#?圖像標簽
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)

#?文本標簽
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學堂")
xtLabel.setAlignment(QtCore.Qt.AlignCenter)

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

總結

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

編輯：黃飛

?