【PyQt5-Qt Designer】工具箱(QToolBox)控件的使用
工具箱（QToolBox）+toolButton+tabWidget
总体介绍
QToolBox类提供了一列选项卡的小部件（选项卡内含项目）。
工具箱是一个小部件，它将选项卡一个一个的显示，当前项目显示在当前选项卡下方。每个选项卡在选项卡列中都有一个索引位置。一个选项卡的项目是一个QWidget。
每个项目都有一个itemText()，一个可选的itemIcon()，一个可选的itemToolTip()和一个widget()。项目的属性可以通过setItemText()，setItemIcon()和setItemToolTip()来改变。每个项目都可以使用setItemEnabled()单独启用或禁用。
项目使用addItem()添加，或使用insertItem()插入特定位置。项目总数由count()给出。可以删除项目，或使用removeItem()从工具箱中删除项目。通过组合removeItem()和insertItem()，您可以将项目移动到不同的位置。
当前项目小部件的索引由currentIndex()返回，并用setCurrentIndex()设置。可以使用indexOf()来找到特定项目的索引，并且item()返回给定索引处的项目。
currentChanged()信号在当前项目改变时发出。
更多详细的介绍，请见官网：QToolBox Class | Qt Widgets 5.10
类的归属
PyQt5->QtWidgets->QToolBox
继承：QFrame
小例子
我们先通过一个视频来看一下今天的完成效果：
https://v.vzuu.com/video/942417282891333632
- 核心代码
class Example(QToolBox): def initUI(self): self.resize(280,500) self.setWindowTitle('微信公众号：学点编程吧--QToolBox') self.setWindowFlags(Qt.Dialog) favorites =[ [ {'des':'百度搜索', 'pic':'image/se/baidu.ico'}, {'des':'搜狗搜索', 'pic':'image/se/sougo.ico'}, {'des':'必应搜索', 'pic':'image/se/bing.ico'}, {'des':'360搜索', 'pic':'image/se/360.ico'}, {'des':'谷歌搜索', 'pic':'image/se/google.ico'}, {'des':'雅虎搜索', 'pic':'image/se/yahoo.ico'} ], [ {'des':'腾讯视频', 'pic':'image/v/tengxun.ico'}, {'des':'搜狐视频', 'pic':'image/v/sohuvideo.ico'}, {'des':'优酷视频', 'pic':'image/v/youku.ico'}, {'des':'土豆视频', 'pic':'image/v/tudou.ico'}, {'des':'AcFun弹幕', 'pic':'image/v/acfun.ico'}, {'des':'哔哩哔哩', 'pic':'image/v/bilibili.ico'} ] ] for item in favorites: groupbox = QGroupBox() vlayout = QVBoxLayout(groupbox) vlayout.setAlignment(Qt.AlignCenter) for category in item: toolButton = QToolButton() toolButton.setText(category['des']) toolButton.setIcon(QIcon(category['pic'])) toolButton.setIconSize(QSize(64, 64)) toolButton.setAutoRaise(True) toolButton.setToolButtonStyle(Qt.ToolButtonTextUnderIcon) vlayout.addWidget(toolButton) name = category['des'] toolButton.clicked.connect(Branded Short Domain Powered by Bitly) if name == '雅虎搜索': self.addItem(groupbox,'搜索引擎') else: self.addItem(groupbox,'视频网站') def run(self): if self.sender().text() == '百度搜索': webbrowser.open('https://www.baidu.com') elif self.sender().text() == '搜狗搜索': webbrowser.open('https://www.sogou.com/') #...下面的代码和上面差不多，不再描述
在这个例子当中我们实现了以下的功能：
- 将按钮分类搜索和视频两类，并分别集合到不同选项卡中。
- 点击按钮会打开对应的网址
- 代码解析
favorites =[ [ {'des':'百度搜索', 'pic':'image/se/baidu.ico'}, {'des':'搜狗搜索', 'pic':'image/se/sougo.ico'}, {'des':'必应搜索', 'pic':'image/se/bing.ico'}, {'des':'360搜索', 'pic':'image/se/360.ico'}, {'des':'谷歌搜索', 'pic':'image/se/google.ico'}, {'des':'雅虎搜索', 'pic':'image/se/yahoo.ico'} ], [ {'des':'腾讯视频', 'pic':'image/v/tengxun.ico'}, {'des':'搜狐视频', 'pic':'image/v/sohuvideo.ico'}, {'des':'优酷视频', 'pic':'image/v/youku.ico'}, {'des':'土豆视频', 'pic':'image/v/tudou.ico'}, {'des':'AcFun弹幕', 'pic':'image/v/acfun.ico'}, {'des':'哔哩哔哩', 'pic':'image/v/bilibili.ico'} ] ]
因为在程序中我们涉及到了12个按钮，每个按钮显示的图标和名称是不一样的，如果我建立12个按钮对象，再分别设置太麻烦了。
因此 我将不同的部分抽取出来，每一个按钮对应一个字典，而每一类按钮又组合成一个列表，最后将两个不同的列表组合成一个大的列表。
for item in favorites:
将favorites列表中的item进行遍历，每个item代表一个众多按钮的集合，也就是QToolBox的选项卡。
groupbox = QGroupBox() vlayout = QVBoxLayout(groupbox) vlayout.setAlignment(Qt.AlignCenter)
我们新建一个组合框，并对其进行垂直布局，布局方式为居中。
QGroupBox小部件提供了一个带有标题的组合框。一个组合框提供了一个框架，顶部的标题，一个键盘快捷键，并显示其内部的各种其他小部件（这点就是我们用到的）。
Qt.AlignCenter是一种对齐方式，我们在
学点编程吧：PyQt5系列教程（21）：标签（QLabel）中介绍过，这里就不在详解了。
for category in item: toolButton = QToolButton() toolButton.setText(category['des']) toolButton.setIcon(QIcon(category['pic'])) toolButton.setIconSize(QSize(64, 64)) toolButton.setAutoRaise(True) toolButton.setToolButtonStyle(Qt.ToolButtonTextUnderIcon) vlayout.addWidget(toolButton)
这里我们对每个按钮集合中项目进行遍历。新建QToolBox对象，并设置其相应的属性：显示的名称（是“优酷”还是“哔哩哔哩”）、图标及大小、按钮是否自动浮起、让按钮显示的名称在按钮下方，同时将这个按钮增加到垂直布局当中。
更多关于QToolButton的介绍，请参见
学点编程吧：PyQt5系列教程（23）：工具按钮（QToolButton）
name = category['des'] if name == '雅虎搜索': self.addItem(groupbox,'搜索引擎') else: self.addItem(groupbox,'视频网站')
当我们遍历完一个按钮集合的时候，此时我们判断最后一个按钮显示的文字是“搜索引擎”还是“视频网站”，并将这一系列的按钮增加到一个选项卡中。
toolButton.clicked.connect(self.run) def run(self): if self.sender().text() == '百度搜索': webbrowser.open('https://www.baidu.com') elif self.sender().text() == '搜狗搜索': webbrowser.open('https://www.sogou.com/') #...下面的代码和上面差不多，不在描述
这个就是一个常规的信号与槽函数的调用，当我们点击按钮的时候会打开相应的网站。
我参照了上面大佬的代码自己用eric6 敲了一遍
效果如下：
完整代码：
1 # -*- coding: utf-8 -*- 2 3 # Form implementation generated from reading ui file 'D:\360Downloads\Python编程\PyQt5教程\PyQt5学习资料\PyQt5内容显示系列控件\eric6-QToolBox\toolBox.ui' 4 # 5 # Created by: PyQt5 UI code generator 5.11.3 6 # 7 # WARNING! All changes made in this file will be lost! 8 9 from PyQt5 import QtCore, QtGui, QtWidgets 10 11 class Ui_Dialog(object): 12 def setupUi(self, Dialog): 13 Dialog.setObjectName("Dialog") 14 Dialog.resize(513, 465) 15 Dialog.setSizeGripEnabled(True) 16 self.verticalLayout = QtWidgets.QVBoxLayout(Dialog) 17 self.verticalLayout.setObjectName("verticalLayout") 18 self.tabWidget = QtWidgets.QTabWidget(Dialog) 19 self.tabWidget.setMinimumSize(QtCore.QSize(0, 361)) 20 self.tabWidget.setStyleSheet("font: 75 14pt \"微软雅黑\";") 21 self.tabWidget.setObjectName("tabWidget") 22 self.tabWidgetPage1 = QtWidgets.QWidget() 23 self.tabWidgetPage1.setObjectName("tabWidgetPage1") 24 self.gridLayout_2 = QtWidgets.QGridLayout(self.tabWidgetPage1) 25 self.gridLayout_2.setObjectName("gridLayout_2") 26 self.toolButton = QtWidgets.QToolButton(self.tabWidgetPage1) 27 icon = QtGui.QIcon() 28 icon.addPixmap(QtGui.QPixmap("../image/se/百度.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 29 self.toolButton.setIcon(icon) 30 self.toolButton.setIconSize(QtCore.QSize(80, 80)) 31 self.toolButton.setPopupMode(QtWidgets.QToolButton.InstantPopup) 32 self.toolButton.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) 33 self.toolButton.setAutoRaise(True) 34 self.toolButton.setObjectName("toolButton") 35 self.gridLayout_2.addWidget(self.toolButton, 1, 0, 1, 1) 36 self.toolButton_2 = QtWidgets.QToolButton(self.tabWidgetPage1) 37 icon1 = QtGui.QIcon() 38 icon1.addPixmap(QtGui.QPixmap("../image/se/360.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 39 self.toolButton_2.setIcon(icon1) 40 self.toolButton_2.setIconSize(QtCore.QSize(80, 80)) 41 self.toolButton_2.setPopupMode(QtWidgets.QToolButton.InstantPopup) 42 self.toolButton_2.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) 43 self.toolButton_2.setAutoRaise(True) 44 self.toolButton_2.setObjectName("toolButton_2") 45 self.gridLayout_2.addWidget(self.toolButton_2, 1, 1, 1, 1) 46 self.toolButton_3 = QtWidgets.QToolButton(self.tabWidgetPage1) 47 icon2 = QtGui.QIcon() 48 icon2.addPixmap(QtGui.QPixmap("../image/se/bing.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 49 self.toolButton_3.setIcon(icon2) 50 self.toolButton_3.setIconSize(QtCore.QSize(80, 80)) 51 self.toolButton_3.setPopupMode(QtWidgets.QToolButton.InstantPopup) 52 self.toolButton_3.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) 53 self.toolButton_3.setAutoRaise(True) 54 self.toolButton_3.setObjectName("toolButton_3") 55 self.gridLayout_2.addWidget(self.toolButton_3, 1, 2, 1, 1) 56 self.toolButton_4 = QtWidgets.QToolButton(self.tabWidgetPage1) 57 icon3 = QtGui.QIcon() 58 icon3.addPixmap(QtGui.QPixmap("../image/se/sougo.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 59 self.toolButton_4.setIcon(icon3) 60 self.toolButton_4.setIconSize(QtCore.QSize(80, 80)) 61 self.toolButton_4.setPopupMode(QtWidgets.QToolButton.InstantPopup) 62 self.toolButton_4.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) 63 self.toolButton_4.setAutoRaise(True) 64 self.toolButton_4.setObjectName("toolButton_4") 65 self.gridLayout_2.addWidget(self.toolButton_4, 2, 0, 1, 1) 66 self.toolButton_5 = QtWidgets.QToolButton(self.tabWidgetPage1) 67 icon4 = QtGui.QIcon() 68 icon4.addPixmap(QtGui.QPixmap("../image/se/谷歌.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 69 self.toolButton_5.setIcon(icon4) 70 self.toolButton_5.setIconSize(QtCore.QSize(80, 80)) 71 self.toolButton_5.setPopupMode(QtWidgets.QToolButton.InstantPopup) 72 self.toolButton_5.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) 73 self.toolButton_5.setAutoRaise(True) 74 self.toolButton_5.setObjectName("toolButton_5") 75 self.gridLayout_2.addWidget(self.toolButton_5, 2, 1, 1, 1) 76 self.toolButton_6 = QtWidgets.QToolButton(self.tabWidgetPage1) 77 icon5 = QtGui.QIcon() 78 icon5.addPixmap(QtGui.QPixmap("../image/se/yahoo.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 79 self.toolButton_6.setIcon(icon5) 80 self.toolButton_6.setIconSize(QtCore.QSize(80, 80)) 81 self.toolButton_6.setPopupMode(QtWidgets.QToolButton.InstantPopup) 82 self.toolButton_6.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) 83 self.toolButton_6.setAutoRaise(True) 84 self.toolButton_6.setObjectName("toolButton_6") 85 self.gridLayout_2.addWidget(self.toolButton_6, 2, 2, 1, 1) 86 icon6 = QtGui.QIcon() 87 icon6.addPixmap(QtGui.QPixmap("../image/ico/China Flag.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 88 self.tabWidget.addTab(self.tabWidgetPage1, icon6, "") 89 self.tabWidgetPage11 = QtWidgets.QWidget() 90 self.tabWidgetPage11.setObjectName("tabWidgetPage11") 91 self.gridLayout = QtWidgets.QGridLayout(self.tabWidgetPage11) 92 self.gridLayout.setObjectName("gridLayout") 93 self.toolButton_7 = QtWidgets.QToolButton(self.tabWidgetPage11) 94 icon7 = QtGui.QIcon() 95 icon7.addPixmap(QtGui.QPixmap("../image/v/tengxun.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 96 self.toolButton_7.setIcon(icon7) 97 self.toolButton_7.setIconSize(QtCore.QSize(80, 80)) 98 self.toolButton_7.setPopupMode(QtWidgets.QToolButton.InstantPopup) 99 self.toolButton_7.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) 100 self.toolButton_7.setAutoRaise(True) 101 self.toolButton_7.setObjectName("toolButton_7") 102 self.gridLayout.addWidget(self.toolButton_7, 0, 0, 1, 1) 103 self.toolButton_8 = QtWidgets.QToolButton(self.tabWidgetPage11) 104 icon8 = QtGui.QIcon() 105 icon8.addPixmap(QtGui.QPixmap("../image/se/搜狐.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 106 self.toolButton_8.setIcon(icon8) 107 self.toolButton_8.setIconSize(QtCore.QSize(80, 80)) 108 self.toolButton_8.setPopupMode(QtWidgets.QToolButton.InstantPopup) 109 self.toolButton_8.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) 110 self.toolButton_8.setAutoRaise(True) 111 self.toolButton_8.setObjectName("toolButton_8") 112 self.gridLayout.addWidget(self.toolButton_8, 0, 1, 1, 1) 113 self.toolButton_9 = QtWidgets.QToolButton(self.tabWidgetPage11) 114 icon9 = QtGui.QIcon() 115 icon9.addPixmap(QtGui.QPixmap("../image/se/优酷.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 116 self.toolButton_9.setIcon(icon9) 117 self.toolButton_9.setIconSize(QtCore.QSize(80, 80)) 118 self.toolButton_9.setPopupMode(QtWidgets.QToolButton.InstantPopup) 119 self.toolButton_9.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) 120 self.toolButton_9.setAutoRaise(True) 121 self.toolButton_9.setObjectName("toolButton_9") 122 self.gridLayout.addWidget(self.toolButton_9, 0, 2, 1, 1) 123 self.toolButton_10 = QtWidgets.QToolButton(self.tabWidgetPage11) 124 icon10 = QtGui.QIcon() 125 icon10.addPixmap(QtGui.QPixmap("../image/se/bilibli.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 126 self.toolButton_10.setIcon(icon10) 127 self.toolButton_10.setIconSize(QtCore.QSize(80, 80)) 128 self.toolButton_10.setPopupMode(QtWidgets.QToolButton.InstantPopup) 129 self.toolButton_10.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) 130 self.toolButton_10.setAutoRaise(True) 131 self.toolButton_10.setObjectName("toolButton_10") 132 self.gridLayout.addWidget(self.toolButton_10, 1, 0, 1, 1) 133 self.toolButton_11 = QtWidgets.QToolButton(self.tabWidgetPage11) 134 icon11 = QtGui.QIcon() 135 icon11.addPixmap(QtGui.QPixmap("../image/se/土豆.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 136 self.toolButton_11.setIcon(icon11) 137 self.toolButton_11.setIconSize(QtCore.QSize(80, 80)) 138 self.toolButton_11.setPopupMode(QtWidgets.QToolButton.InstantPopup) 139 self.toolButton_11.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) 140 self.toolButton_11.setAutoRaise(True) 141 self.toolButton_11.setObjectName("toolButton_11") 142 self.gridLayout.addWidget(self.toolButton_11, 1, 1, 1, 1) 143 self.toolButton_12 = QtWidgets.QToolButton(self.tabWidgetPage11) 144 icon12 = QtGui.QIcon() 145 icon12.addPixmap(QtGui.QPixmap("../image/se/acfun.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 146 self.toolButton_12.setIcon(icon12) 147 self.toolButton_12.setIconSize(QtCore.QSize(80, 80)) 148 self.toolButton_12.setPopupMode(QtWidgets.QToolButton.InstantPopup) 149 self.toolButton_12.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) 150 self.toolButton_12.setAutoRaise(True) 151 self.toolButton_12.setObjectName("toolButton_12") 152 self.gridLayout.addWidget(self.toolButton_12, 1, 2, 1, 1) 153 icon13 = QtGui.QIcon() 154 icon13.addPixmap(QtGui.QPixmap("../image/ico/UK Flag.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off) 155 self.tabWidget.addTab(self.tabWidgetPage11, icon13, "") 156 self.verticalLayout.addWidget(self.tabWidget) 157 158 self.retranslateUi(Dialog) 159 self.tabWidget.setCurrentIndex(1) 160 QtCore.QMetaObject.connectSlotsByName(Dialog) 161 162 def retranslateUi(self, Dialog): 163 _translate = QtCore.QCoreApplication.translate 164 Dialog.setWindowTitle(_translate("Dialog", "toolButton+tabWidget控件")) 165 self.toolButton.setText(_translate("Dialog", "百度")) 166 self.toolButton_2.setText(_translate("Dialog", "360")) 167 self.toolButton_3.setText(_translate("Dialog", "必应")) 168 self.toolButton_4.setText(_translate("Dialog", "搜狗")) 169 self.toolButton_5.setText(_translate("Dialog", "谷歌")) 170 self.toolButton_6.setText(_translate("Dialog", "雅虎")) 171 self.tabWidget.setTabText(self.tabWidget.indexOf(self.tabWidgetPage1), _translate("Dialog", "搜索引擎")) 172 self.toolButton_7.setText(_translate("Dialog", "腾讯视频")) 173 self.toolButton_8.setText(_translate("Dialog", "搜狐视频")) 174 self.toolButton_9.setText(_translate("Dialog", "优酷视频")) 175 self.toolButton_10.setText(_translate("Dialog", "Bilibili")) 176 self.toolButton_11.setText(_translate("Dialog", "土豆")) 177 self.toolButton_12.setText(_translate("Dialog", "AcFun")) 178 self.tabWidget.setTabText(self.tabWidget.indexOf(self.tabWidgetPage11), _translate("Dialog", "视频网站")) 179 180 181 if __name__ == "__main__": 182 import sys 183 app = QtWidgets.QApplication(sys.argv) 184 Dialog = QtWidgets.QDialog() 185 ui = Ui_Dialog() 186 ui.setupUi(Dialog) 187 Dialog.show() 188 sys.exit(app.exec_())
1 # -*- coding: utf-8 -*- 2 from PyQt5.QtCore import pyqtSlot 3 from PyQt5.QtWidgets import QDialog, QApplication 4 from Ui_toolBox import Ui_Dialog 5 import sys, webbrowser 6 7 8 class Dialog(QDialog, Ui_Dialog): 9 10 def __init__(self, parent=None): 11 super(Dialog, self).__init__(parent) 12 self.setupUi(self) 13 14 @pyqtSlot() 15 def on_toolButton_clicked(self): 16 webbrowser.open('https://www.baidu.com') 17 18 @pyqtSlot() 19 def on_toolButton_2_clicked(self): 20 webbrowser.open('https://www.so.com/') 21 22 @pyqtSlot() 23 def on_toolButton_3_clicked(self): 24 webbrowser.open('http://cn.bing.com/') 25 26 @pyqtSlot() 27 def on_toolButton_4_clicked(self): 28 webbrowser.open('https://www.sogou.com/') 29 30 @pyqtSlot() 31 def on_toolButton_5_clicked(self): 32 webbrowser.open('https://www.google.com/') 33 34 @pyqtSlot() 35 def on_toolButton_6_clicked(self): 36 webbrowser.open('https://www.yahoo.com/') 37 38 @pyqtSlot() 39 def on_toolButton_7_clicked(self): 40 webbrowser.open('https://v.qq.com/') 41 42 @pyqtSlot() 43 def on_toolButton_8_clicked(self): 44 webbrowser.open('https://film.sohu.com') 45 46 @pyqtSlot() 47 def on_toolButton_9_clicked(self): 48 webbrowser.open('http://www.youku.com/') 49 50 @pyqtSlot() 51 def on_toolButton_10_clicked(self): 52 webbrowser.open('https://www.bilibili.com/') 53 54 @pyqtSlot() 55 def on_toolButton_11_clicked(self): 56 webbrowser.open('http://www.tudou.com/') 57 58 @pyqtSlot() 59 def on_toolButton_12_clicked(self): 60 webbrowser.open('http://www.acfun.cn/') 61 62 63 if __name__ == "__main__": 64 app = QApplication(sys.argv) 65 ui = Dialog() 66 ui.show() 67 sys.exit(app.exec_()) 68 69
