【PyQt5-Qt Designer】工具箱(QToolBox)控制元件的使用
阿新 • • 發佈：2019-01-05
工具箱（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_())ui介面程式碼
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邏輯介面