QGridLayout介紹

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

還可以選擇性填寫部分網(wǎng)格，生產(chǎn)錯(cuò)位的組件排列，QGridLayout也支持一下的組件布局方式:

QGridLayout類與方法

往QGridLayout網(wǎng)格布局中添加QWidget對(duì)象的函數(shù)為：

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

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

?

?

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

運(yùn)行演示與代碼

代碼實(shí)現(xiàn)部分，通過(guò)一個(gè)自定義GridLayout布局支持的面板，結(jié)合QLabel組件，完成了個(gè)多圖像大圖預(yù)覽的布局排序。主要代碼可以參考這里：

PyQT5開(kāi)發(fā)案例之簡(jiǎn)易圖像瀏覽器

運(yùn)行結(jié)果演示

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?=?[]
????????#?文本標(biāo)簽
????????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)
????????#?圖像總數(shù)
????????self.numLabel?=?QtWidgets.QLabel()
????????self.numLabel.setText("圖像總數(shù):?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)

????????#?圖像標(biāo)簽
????????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("圖像總數(shù):?"?+?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

選擇一個(gè)文件夾之后運(yùn)行結(jié)果如下：

總結(jié)

本文主要是演示了PyQT5網(wǎng)格布局使用，同時(shí)結(jié)合多個(gè)QLabel，顯示更新多張圖像。實(shí)現(xiàn)了圖像的網(wǎng)格化顯示預(yù)覽功能。

編輯：黃飛

?