PyQT5中常用的布局管理方式运行与代码

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，显示更新多张图像。实现了图像的网格化显示预览功能。

编辑：黄飞