使用QPushButton与QLabel组件实现一个简单的批量图像浏览
引言
基于前面几篇文章介绍的知识点，使用qpushbutton与qlabel组件结合水平与垂直布局管理器，实现一个简单的批量图像浏览，支持图像文件夹选择、按钮信号触发与槽函数响应、支持上一张、下一张图像浏览，实现一个最简化版本的图像浏览器
垂直与水平布局混合使用
pyqt5中的qwidget对象支持嵌套方式，在一个qwidget中可以支持多个子qwidget对象，每个qwidget都有自己的布局方式，这样通过多重qwidget嵌套与叠加就可以实现复杂界面设计。在我开发openmv工具软件过程中，多数子界面都是通过水平跟垂直布局嵌入实现的界面设计。这样做的好处是避免使用绝对定位方式布局组件元素导致不同分辨率的显示差异与用户体验不一致。
上图中第一行有三个组元素，两个qlabel，分别显示当前文件路径与文件夹总图像数目；一个按钮实现图像文件夹选择功能，三个组件元素在一个子qwidget对象（panel1）中通过水平布局方式(qhboxlayout)从左到右排列。
内置图标icon使用
pyqt5的qstyle支持内置图标icon支持，支持常见应用程序开发所需要的图标，直接使用这些图标可以省去很多麻烦。支持的图标列表请看下图说明：
采用下面的相似代码即可获取需要的icon图标使用。
back_pix = qtwidgets.qstyle.sp_arrowbackback_icon = self.style().standardicon(back_pix)图表文件名称列表如下：
中间是一个qlabel组件实现图像显示与更新功能 最后一行基于pyqt5的qstyle中内置图标引用实现了两个icon按钮功能，支持tooltip提示功能，分别实现显示上一张与下一张图像切换显示功能。两个icon按钮通过水平布局方式同样放在一个qwidget对象(panel2)中。
最终把panel1、imagelabel、panel2三个子元素通过垂直布局（qvboxlayout）添加到自定义的qwidget对象-imagebrowserpanel。
最后在主程序中初始化imagebrowserpanel对象实例，设置为qmainwindow的centeralwidget即可完成。
按钮信号与响应
三个按钮分别完成图像文件夹选择、上一张更新显示、下一张更新显示。默认选择图像文件夹之后会显示该文件夹中第一张图像，同时更新文件显示qlabel上显示信息与imagelabel上显示的图像内容。
运行演示与代码
运行结果演示：
主面板界面类代码如下：
class imagebrowserpanel(qtwidgets.qwidget): def __init__(self, parent=none): super().__init__(parent) self.image_files = [] self.current_index = -1 # 文本标签 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) # 图像标签 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 0: self.current_index = 0 filename = self.image_files[0] print(filename) self.pathlabel.settext(文件名称: + filename) self.numlabel.settext(图像总数: + str(len(self.image_files))) pixmap = qtgui.qpixmap(filename) pix = pixmap.scaled(qtcore.qsize(620, 500), qtcore.qt.keepaspectratio) self.imglabel.setpixmap(pix)上述代码演示了如何打开文件夹，遍历图像文件、如何更新qlabel上显示的图像与文字信息，如何构建一个自定义的qwidget对象。
qapplication应用程序代码如下：# 初始化app实例app = qtwidgets.qapplication(sys.argv)# 初始化桌面容器main_win = qtwidgets.qmainwindow()# 设置app窗口名称main_win.setwindowtitle(pyqt5图像浏览器-2号高手)# 初始化内容面板content_panel = imagebrowserpanel()# 设置窗口大小main_win.setminimumsize(640, 500)main_win.setcentralwidget(content_panel)# 请求显示main_win.show()# 加载窗口并启动appapp.exec()
运行结果如下：
总结
本文主要是演示了pyqt5中水平与垂直布局组合，多个qwidget组件嵌套使用排版，按钮事件触发与槽函数更新ui组件的各种pyqt5基本编程技能与技巧。
索尼首款电动车Vision-S已上路 并非意味着其要进军汽车制造业
一位软件工程师辛酸历程
铠侠与西数218层3D NANDFlash出货 年内量产
爱特梅尔发布综合式应用商店和协作工作平台
促成储能产业真正商业化发展的条件是什么？
使用QPushButton与QLabel组件实现一个简单的批量图像浏览
利元亨研发团队现已攻克高效激光清洗技术
电力运维无从着手？物联网开启新入口
Telaeris推出XPID系列手持式徽章阅读器 可读取安全徽章
嵌入式行业沟通交流新平台正式开启-首期“百家E坛”成功举办
5G接下来该如何发展?
简易手势探测器制作教程
5G时代中国移动即将未战先输？
从政策角度一览我国人工智能建设的轨迹
激光焊接机在焊接0.9mm镍钴合金的技术工艺
智慧物流必须拥有哪些技术
酷冷mk750机械键盘评测 爱灯人士必备利器
物联网布局正当时，看700家企业如何布局IoT业务
Acrel-5010重点能耗在线监测系统在湖南三立集团的应用
0-10V输出0-5V转换器DIN11-1BF-U2-P1-O4电压应用方式
基于前面几篇文章介绍的知识点，使用qpushbutton与qlabel组件结合水平与垂直布局管理器，实现一个简单的批量图像浏览，支持图像文件夹选择、按钮信号触发与槽函数响应、支持上一张、下一张图像浏览，实现一个最简化版本的图像浏览器
垂直与水平布局混合使用
pyqt5中的qwidget对象支持嵌套方式，在一个qwidget中可以支持多个子qwidget对象，每个qwidget都有自己的布局方式，这样通过多重qwidget嵌套与叠加就可以实现复杂界面设计。在我开发openmv工具软件过程中，多数子界面都是通过水平跟垂直布局嵌入实现的界面设计。这样做的好处是避免使用绝对定位方式布局组件元素导致不同分辨率的显示差异与用户体验不一致。
上图中第一行有三个组元素，两个qlabel，分别显示当前文件路径与文件夹总图像数目；一个按钮实现图像文件夹选择功能，三个组件元素在一个子qwidget对象（panel1）中通过水平布局方式(qhboxlayout)从左到右排列。
内置图标icon使用
pyqt5的qstyle支持内置图标icon支持，支持常见应用程序开发所需要的图标，直接使用这些图标可以省去很多麻烦。支持的图标列表请看下图说明：
采用下面的相似代码即可获取需要的icon图标使用。
back_pix = qtwidgets.qstyle.sp_arrowbackback_icon = self.style().standardicon(back_pix)图表文件名称列表如下：
中间是一个qlabel组件实现图像显示与更新功能 最后一行基于pyqt5的qstyle中内置图标引用实现了两个icon按钮功能，支持tooltip提示功能，分别实现显示上一张与下一张图像切换显示功能。两个icon按钮通过水平布局方式同样放在一个qwidget对象(panel2)中。
最终把panel1、imagelabel、panel2三个子元素通过垂直布局（qvboxlayout）添加到自定义的qwidget对象-imagebrowserpanel。
最后在主程序中初始化imagebrowserpanel对象实例，设置为qmainwindow的centeralwidget即可完成。
按钮信号与响应
三个按钮分别完成图像文件夹选择、上一张更新显示、下一张更新显示。默认选择图像文件夹之后会显示该文件夹中第一张图像，同时更新文件显示qlabel上显示信息与imagelabel上显示的图像内容。
运行演示与代码
运行结果演示：
主面板界面类代码如下：
class imagebrowserpanel(qtwidgets.qwidget): def __init__(self, parent=none): super().__init__(parent) self.image_files = [] self.current_index = -1 # 文本标签 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) # 图像标签 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 0: self.current_index = 0 filename = self.image_files[0] print(filename) self.pathlabel.settext(文件名称: + filename) self.numlabel.settext(图像总数: + str(len(self.image_files))) pixmap = qtgui.qpixmap(filename) pix = pixmap.scaled(qtcore.qsize(620, 500), qtcore.qt.keepaspectratio) self.imglabel.setpixmap(pix)上述代码演示了如何打开文件夹，遍历图像文件、如何更新qlabel上显示的图像与文字信息，如何构建一个自定义的qwidget对象。
qapplication应用程序代码如下：# 初始化app实例app = qtwidgets.qapplication(sys.argv)# 初始化桌面容器main_win = qtwidgets.qmainwindow()# 设置app窗口名称main_win.setwindowtitle(pyqt5图像浏览器-2号高手)# 初始化内容面板content_panel = imagebrowserpanel()# 设置窗口大小main_win.setminimumsize(640, 500)main_win.setcentralwidget(content_panel)# 请求显示main_win.show()# 加载窗口并启动appapp.exec()
运行结果如下：
总结
本文主要是演示了pyqt5中水平与垂直布局组合，多个qwidget组件嵌套使用排版，按钮事件触发与槽函数更新ui组件的各种pyqt5基本编程技能与技巧。
索尼首款电动车Vision-S已上路 并非意味着其要进军汽车制造业
一位软件工程师辛酸历程
铠侠与西数218层3D NANDFlash出货 年内量产
爱特梅尔发布综合式应用商店和协作工作平台
促成储能产业真正商业化发展的条件是什么？
使用QPushButton与QLabel组件实现一个简单的批量图像浏览
利元亨研发团队现已攻克高效激光清洗技术
电力运维无从着手？物联网开启新入口
Telaeris推出XPID系列手持式徽章阅读器 可读取安全徽章
嵌入式行业沟通交流新平台正式开启-首期“百家E坛”成功举办
5G接下来该如何发展?
简易手势探测器制作教程
5G时代中国移动即将未战先输？
从政策角度一览我国人工智能建设的轨迹
激光焊接机在焊接0.9mm镍钴合金的技术工艺
智慧物流必须拥有哪些技术
酷冷mk750机械键盘评测 爱灯人士必备利器
物联网布局正当时，看700家企业如何布局IoT业务
Acrel-5010重点能耗在线监测系统在湖南三立集团的应用
0-10V输出0-5V转换器DIN11-1BF-U2-P1-O4电压应用方式