QGridLayout介紹

之前的文章介紹了PyQT5的水平與垂直兩種布局方式，本文介紹網格布局方式，網格布局同樣是PyQT5中常用的布局管理方式之一，網格布局方式支持相同尺寸網格跟自定義網格大小。按順序填充每個網格，從左到右、從上到下

還可以選擇性填寫部分網格，生產錯位的組件排列，QGridLayout也支持一下的組件布局方式:

QGridLayout類與方法

往QGridLayout網格布局中添加QWidget對象的函數為：

QtWidgets.QGridLayout.addWidget(widget, row, column）

void setColumnStretch ( int column, int stretch )
void setRowStretch ( int row, int stretch )

?

?

上圖是每一列設置不同顯示比率，以此類推對行也可以這樣設置。

運行演示與代碼

代碼實現部分，通過一個自定義GridLayout布局支持的面板，結合QLabel組件，完成了個多圖像大圖預覽的布局排序。主要代碼可以參考這里：

PyQT5開發案例之簡易圖像瀏覽器

運行結果演示

GridLayout面板界面類代碼如下

import?os

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


class?ImageBrowserPanel(QtWidgets.QWidget):
????def?__init__(self,?parent=None):
????????super().__init__(parent)
????????self.image_files?=?[]
????????self.current_index?=?-1
????????self.grid_labels?=?[]
????????#?文本標簽
????????self.pathLabel?=?QtWidgets.QLabel()
????????self.pathLabel.setText("文件名稱:?test.png")
????????self.pathLabel.setStyleSheet("background-color:deeppink;?color:?blue;?border-radius:5px")
????????self.pathLabel.setAlignment(QtCore.Qt.AlignCenter)
????????#?圖像總數
????????self.numLabel?=?QtWidgets.QLabel()
????????self.numLabel.setText("圖像總數:?0")
????????self.pathLabel.setStyleSheet("background-color:deeppink;?color:?blue;?border-radius:5px")
????????self.numLabel.setAlignment(QtCore.Qt.AlignCenter)

????????fileBtn?=?QtWidgets.QPushButton("選擇...")
????????hbox_layout?=?QtWidgets.QHBoxLayout()
????????hbox_layout.addWidget(self.pathLabel)
????????hbox_layout.addWidget(self.numLabel)
????????hbox_layout.addWidget(fileBtn)
????????hbox_layout.addStretch(1)
????????panel1?=?QtWidgets.QGroupBox("圖像信息")
????????panel1.setLayout(hbox_layout)

????????#?圖像標簽
????????panel3?=?QtWidgets.QWidget()
????????grid_layout?=?QtWidgets.QGridLayout()
????????for?i?in?range(9):
????????????item_label?=?QtWidgets.QLabel()
????????????item_label.setStyleSheet("background-color:royalblue;?border-radius:5px")
????????????pixmap?=?QtGui.QPixmap("test3.png")
????????????pix?=?pixmap.scaled(QtCore.QSize(210,?160),?QtCore.Qt.KeepAspectRatio)
????????????item_label.setPixmap(pix)
????????????item_label.setAlignment(QtCore.Qt.AlignCenter)
????????????grid_layout.addWidget(item_label,?int(i/3),?int(i%3))
????????????self.grid_labels.append(item_label)
????????panel3.setLayout(grid_layout)

????????#?添加到布局管理器中
????????vbox_layout?=?QtWidgets.QVBoxLayout()
????????vbox_layout.addWidget(panel1)
????????vbox_layout.addWidget(panel3)
????????vbox_layout.addStretch(1)

????????#?面板容器
????????self.setLayout(vbox_layout)

????????#?setup?listener
????????fileBtn.clicked.connect(self.on_select_image_dir)

????def?on_select_image_dir(self):
????????img_dir?=?QtWidgets.QFileDialog.getExistingDirectory(self,?"圖像文件夾",?".")
????????files?=?os.listdir(img_dir)
????????self.image_files.clear()
????????self.current_index?=?-1
????????for?f?in?files:
????????????if?f.endswith(".png")?or?f.endswith(".jpg")?or?f.endswith(".bmp"):
????????????????self.image_files.append(os.path.join(img_dir,?f))
????????if?len(self.image_files)?>?0:
????????????self.current_index?=?0
????????????self.numLabel.setText("圖像總數:?"?+?str(len(self.image_files)))
????????????for?im_file?in?self.image_files:
????????????????pixmap?=?QtGui.QPixmap(im_file)
????????????????pix?=?pixmap.scaled(QtCore.QSize(210,?160),?QtCore.Qt.KeepAspectRatio)
????????????????self.grid_labels[self.current_index?%?9].setPixmap(pix)
????????????????self.current_index?=?self.current_index?+?1

選擇一個文件夾之后運行結果如下：

總結

本文主要是演示了PyQT5網格布局使用，同時結合多個QLabel，顯示更新多張圖像。實現了圖像的網格化顯示預覽功能。

編輯：黃飛

?