使用QPushButton與QLabel組件實(shí)現(xiàn)一個(gè)簡(jiǎn)單的批量圖像瀏覽

引言

基于前面幾篇文章介紹的知識(shí)點(diǎn)，使用QPushButton與QLabel組件結(jié)合水平與垂直布局管理器，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的批量圖像瀏覽，支持圖像文件夾選擇、按鈕信號(hào)觸發(fā)與槽函數(shù)響應(yīng)、支持上一張、下一張圖像瀏覽，實(shí)現(xiàn)一個(gè)最簡(jiǎn)化版本的圖像瀏覽器

垂直與水平布局混合使用

PyQT5中的QWidget對(duì)象支持嵌套方式，在一個(gè)QWidget中可以支持多個(gè)子QWidget對(duì)象，每個(gè)QWidget都有自己的布局方式，這樣通過(guò)多重QWidget嵌套與疊加就可以實(shí)現(xiàn)復(fù)雜界面設(shè)計(jì)。在我開(kāi)發(fā)OpenMV工具軟件過(guò)程中，多數(shù)子界面都是通過(guò)水平跟垂直布局嵌入實(shí)現(xiàn)的界面設(shè)計(jì)。這樣做的好處是避免使用絕對(duì)定位方式布局組件元素導(dǎo)致不同分辨率的顯示差異與用戶體驗(yàn)不一致。



上圖中第一行有三個(gè)組元素，兩個(gè)QLabel，分別顯示當(dāng)前文件路徑與文件夾總圖像數(shù)目；一個(gè)按鈕實(shí)現(xiàn)圖像文件夾選擇功能，三個(gè)組件元素在一個(gè)子QWidget對(duì)象（panel1）中通過(guò)水平布局方式(QHBoxLayout)從左到右排列。

內(nèi)置圖標(biāo)ICON使用

PyQT5的QStyle支持內(nèi)置圖標(biāo)ICON支持，支持常見(jiàn)應(yīng)用程序開(kāi)發(fā)所需要的圖標(biāo)，直接使用這些圖標(biāo)可以省去很多麻煩。支持的圖標(biāo)列表請(qǐng)看下圖說(shuō)明：



采用下面的相似代碼即可獲取需要的ICON圖標(biāo)使用。

back_pix = QtWidgets.QStyle.SP_ArrowBack
back_icon = self.style().standardIcon(back_pix)

中間是一個(gè)QLabel組件實(shí)現(xiàn)圖像顯示與更新功能 最后一行基于PyQT5的QStyle中內(nèi)置圖標(biāo)引用實(shí)現(xiàn)了兩個(gè)ICON按鈕功能，支持Tooltip提示功能，分別實(shí)現(xiàn)顯示上一張與下一張圖像切換顯示功能。兩個(gè)ICON按鈕通過(guò)水平布局方式同樣放在一個(gè)QWidget對(duì)象(panel2)中。

最終把panel1、imageLabel、panel2三個(gè)子元素通過(guò)垂直布局（QVBoxLayout）添加到自定義的QWidget對(duì)象-ImageBrowserPanel。

最后在主程序中初始化ImageBrowserPanel對(duì)象實(shí)例，設(shè)置為QMainWindow的CenteralWidget即可完成。

按鈕信號(hào)與響應(yīng)

三個(gè)按鈕分別完成圖像文件夾選擇、上一張更新顯示、下一張更新顯示。默認(rèn)選擇圖像文件夾之后會(huì)顯示該文件夾中第一張圖像，同時(shí)更新文件顯示QLabel上顯示信息與imageLabel上顯示的圖像內(nèi)容。

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

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

主面板界面類代碼如下：

class ImageBrowserPanel(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.image_files = []
        self.current_index = -1
        # 文本標(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)簽
        self.imgLabel = QtWidgets.QLabel()
        pixmap = QtGui.QPixmap("test3.png")
        pix = pixmap.scaled(QtCore.QSize(620, 500), QtCore.Qt.KeepAspectRatio)
        self.imgLabel.setPixmap(pix)
        self.imgLabel.setAlignment(QtCore.Qt.AlignCenter)


        # 左右瀏覽
        back_pix = QtWidgets.QStyle.SP_ArrowBack
        back_icon = self.style().standardIcon(back_pix)


        forward_pix = QtWidgets.QStyle.SP_ArrowForward
        forward_icon = self.style().standardIcon(forward_pix)


        backBtn = QtWidgets.QPushButton(back_icon, "")
        backBtn.setIconSize(QtCore.QSize(48, 48))
        backBtn.setToolTip("上一張")


        forwardBtn = QtWidgets.QPushButton(forward_icon, "")
        forwardBtn.setIconSize(QtCore.QSize(48, 48))
        forwardBtn.setToolTip("下一張")


        panel2 = QtWidgets.QWidget()
        hbox_layout2 = QtWidgets.QHBoxLayout()
        hbox_layout2.addWidget(backBtn)
        hbox_layout2.addWidget(forwardBtn)
        panel2.setLayout(hbox_layout2)


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


        # 面板容器
        self.setLayout(vbox_layout)


        # setup listener
        fileBtn.clicked.connect(self.on_select_image_dir)
        backBtn.clicked.connect(self.on_back_image_view)
        forwardBtn.clicked.connect(self.on_forward_image_view)


    def on_back_image_view(self):
        if self.current_index > 0:
            self.current_index = self.current_index - 1
            filename = self.image_files[self.current_index]
            self.pathLabel.setText("文件名稱: " + filename)
            print(filename)
            pixmap = QtGui.QPixmap(filename)
            pix = pixmap.scaled(QtCore.QSize(620, 500), QtCore.Qt.KeepAspectRatio)
            self.imgLabel.setPixmap(pix)


    def on_forward_image_view(self):
        last = len(self.image_files) - 1
        if self.current_index < last:
            self.current_index = self.current_index + 1
            filename = self.image_files[self.current_index]
            self.pathLabel.setText("文件名稱: " + filename)
            print(filename)
            pixmap = QtGui.QPixmap(filename)
            pix = pixmap.scaled(QtCore.QSize(620, 500), QtCore.Qt.KeepAspectRatio)
            self.imgLabel.setPixmap(pix)


    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
            filename = self.image_files[0]
            print(filename)
            self.pathLabel.setText("文件名稱: " + filename)
            self.numLabel.setText("圖像總數(shù): " + str(len(self.image_files)))
            pixmap = QtGui.QPixmap(filename)
            pix = pixmap.scaled(QtCore.QSize(620, 500), QtCore.Qt.KeepAspectRatio)
            self.imgLabel.setPixmap(pix)

# 初始化APP實(shí)例
app = QtWidgets.QApplication(sys.argv)
# 初始化桌面容器
main_win = QtWidgets.QMainWindow()
# 設(shè)置APP窗口名稱
main_win.setWindowTitle("PyQT5圖像瀏覽器-2號(hào)高手")
# 初始化內(nèi)容面板
content_panel = ImageBrowserPanel()
# 設(shè)置窗口大小
main_win.setMinimumSize(640, 500)
main_win.setCentralWidget(content_panel)


# 請(qǐng)求顯示
main_win.show()
# 加載窗口并啟動(dòng)App
app.exec()

運(yùn)行結(jié)果如下：

?總結(jié)

本文主要是演示了PyQT5中水平與垂直布局組合，多個(gè)QWidget組件嵌套使用排版，按鈕事件觸發(fā)與槽函數(shù)更新UI組件的各種PyQT5基本編程技能與技巧。

審核編輯：劉清