之前聊过PyQT5的水平和垂直布局,这次来重点说说网格布局。它在日常开发中同样常见——支持固定尺寸的网格,也能自定义网格大小。填充顺序是从左到右、从上到下,逐个填满。

当然,你也可以选择性地留空某些网格,做出错位排列的效果。除此之外,QGridLayout还支持以下几种组件布局方式:

QGridLayout类与方法

往网格布局中添加QWidget对象的基本函数是:QtWidgets.QGridLayout.addWidget(widget, row, column)

默认情况下每个网格等大。如果想做出不同大小的网格,可以设置行或列的伸缩比率(stretch)。相关函数如下:
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实现了图像的网格化显示预览功能。通过自定义面板和简单的文件选择逻辑,可以快速搭建一个多图预览工具。
