【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/')
        #...下面的代碼和上面差不多，不再描述

在這個例子當中我們實現了以下的功能：

1. 將按鈕分類搜索和視頻兩類，並分別集合到不同選項卡中。
2. 點擊按鈕會打開對應的網址

• 代碼解析

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）​zhuanlan.zhihu.com  中介紹過，這里就不在詳解了。

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）​zhuanlan.zhihu.com

    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 敲了一遍

效果如下：

完整代碼：

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'D:\360Downloads\Python編程\PyQt5教程\PyQt5學習資料\PyQt5內容顯示系列控件\eric6-QToolBox\toolBox.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName("Dialog")
        Dialog.resize(513, 465)
        Dialog.setSizeGripEnabled(True)
        self.verticalLayout = QtWidgets.QVBoxLayout(Dialog)
        self.verticalLayout.setObjectName("verticalLayout")
        self.tabWidget = QtWidgets.QTabWidget(Dialog)
        self.tabWidget.setMinimumSize(QtCore.QSize(0, 361))
        self.tabWidget.setStyleSheet("font: 75 14pt \"微軟雅黑\";")
        self.tabWidget.setObjectName("tabWidget")
        self.tabWidgetPage1 = QtWidgets.QWidget()
        self.tabWidgetPage1.setObjectName("tabWidgetPage1")
        self.gridLayout_2 = QtWidgets.QGridLayout(self.tabWidgetPage1)
        self.gridLayout_2.setObjectName("gridLayout_2")
        self.toolButton = QtWidgets.QToolButton(self.tabWidgetPage1)
        icon = QtGui.QIcon()
        icon.addPixmap(QtGui.QPixmap("../image/se/百度.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolButton.setIcon(icon)
        self.toolButton.setIconSize(QtCore.QSize(80, 80))
        self.toolButton.setPopupMode(QtWidgets.QToolButton.InstantPopup)
        self.toolButton.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolButton.setAutoRaise(True)
        self.toolButton.setObjectName("toolButton")
        self.gridLayout_2.addWidget(self.toolButton, 1, 0, 1, 1)
        self.toolButton_2 = QtWidgets.QToolButton(self.tabWidgetPage1)
        icon1 = QtGui.QIcon()
        icon1.addPixmap(QtGui.QPixmap("../image/se/360.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolButton_2.setIcon(icon1)
        self.toolButton_2.setIconSize(QtCore.QSize(80, 80))
        self.toolButton_2.setPopupMode(QtWidgets.QToolButton.InstantPopup)
        self.toolButton_2.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolButton_2.setAutoRaise(True)
        self.toolButton_2.setObjectName("toolButton_2")
        self.gridLayout_2.addWidget(self.toolButton_2, 1, 1, 1, 1)
        self.toolButton_3 = QtWidgets.QToolButton(self.tabWidgetPage1)
        icon2 = QtGui.QIcon()
        icon2.addPixmap(QtGui.QPixmap("../image/se/bing.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolButton_3.setIcon(icon2)
        self.toolButton_3.setIconSize(QtCore.QSize(80, 80))
        self.toolButton_3.setPopupMode(QtWidgets.QToolButton.InstantPopup)
        self.toolButton_3.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolButton_3.setAutoRaise(True)
        self.toolButton_3.setObjectName("toolButton_3")
        self.gridLayout_2.addWidget(self.toolButton_3, 1, 2, 1, 1)
        self.toolButton_4 = QtWidgets.QToolButton(self.tabWidgetPage1)
        icon3 = QtGui.QIcon()
        icon3.addPixmap(QtGui.QPixmap("../image/se/sougo.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolButton_4.setIcon(icon3)
        self.toolButton_4.setIconSize(QtCore.QSize(80, 80))
        self.toolButton_4.setPopupMode(QtWidgets.QToolButton.InstantPopup)
        self.toolButton_4.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolButton_4.setAutoRaise(True)
        self.toolButton_4.setObjectName("toolButton_4")
        self.gridLayout_2.addWidget(self.toolButton_4, 2, 0, 1, 1)
        self.toolButton_5 = QtWidgets.QToolButton(self.tabWidgetPage1)
        icon4 = QtGui.QIcon()
        icon4.addPixmap(QtGui.QPixmap("../image/se/谷歌.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolButton_5.setIcon(icon4)
        self.toolButton_5.setIconSize(QtCore.QSize(80, 80))
        self.toolButton_5.setPopupMode(QtWidgets.QToolButton.InstantPopup)
        self.toolButton_5.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolButton_5.setAutoRaise(True)
        self.toolButton_5.setObjectName("toolButton_5")
        self.gridLayout_2.addWidget(self.toolButton_5, 2, 1, 1, 1)
        self.toolButton_6 = QtWidgets.QToolButton(self.tabWidgetPage1)
        icon5 = QtGui.QIcon()
        icon5.addPixmap(QtGui.QPixmap("../image/se/yahoo.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolButton_6.setIcon(icon5)
        self.toolButton_6.setIconSize(QtCore.QSize(80, 80))
        self.toolButton_6.setPopupMode(QtWidgets.QToolButton.InstantPopup)
        self.toolButton_6.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolButton_6.setAutoRaise(True)
        self.toolButton_6.setObjectName("toolButton_6")
        self.gridLayout_2.addWidget(self.toolButton_6, 2, 2, 1, 1)
        icon6 = QtGui.QIcon()
        icon6.addPixmap(QtGui.QPixmap("../image/ico/China Flag.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.tabWidget.addTab(self.tabWidgetPage1, icon6, "")
        self.tabWidgetPage11 = QtWidgets.QWidget()
        self.tabWidgetPage11.setObjectName("tabWidgetPage11")
        self.gridLayout = QtWidgets.QGridLayout(self.tabWidgetPage11)
        self.gridLayout.setObjectName("gridLayout")
        self.toolButton_7 = QtWidgets.QToolButton(self.tabWidgetPage11)
        icon7 = QtGui.QIcon()
        icon7.addPixmap(QtGui.QPixmap("../image/v/tengxun.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolButton_7.setIcon(icon7)
        self.toolButton_7.setIconSize(QtCore.QSize(80, 80))
        self.toolButton_7.setPopupMode(QtWidgets.QToolButton.InstantPopup)
        self.toolButton_7.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolButton_7.setAutoRaise(True)
        self.toolButton_7.setObjectName("toolButton_7")
        self.gridLayout.addWidget(self.toolButton_7, 0, 0, 1, 1)
        self.toolButton_8 = QtWidgets.QToolButton(self.tabWidgetPage11)
        icon8 = QtGui.QIcon()
        icon8.addPixmap(QtGui.QPixmap("../image/se/搜狐.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolButton_8.setIcon(icon8)
        self.toolButton_8.setIconSize(QtCore.QSize(80, 80))
        self.toolButton_8.setPopupMode(QtWidgets.QToolButton.InstantPopup)
        self.toolButton_8.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolButton_8.setAutoRaise(True)
        self.toolButton_8.setObjectName("toolButton_8")
        self.gridLayout.addWidget(self.toolButton_8, 0, 1, 1, 1)
        self.toolButton_9 = QtWidgets.QToolButton(self.tabWidgetPage11)
        icon9 = QtGui.QIcon()
        icon9.addPixmap(QtGui.QPixmap("../image/se/優酷.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolButton_9.setIcon(icon9)
        self.toolButton_9.setIconSize(QtCore.QSize(80, 80))
        self.toolButton_9.setPopupMode(QtWidgets.QToolButton.InstantPopup)
        self.toolButton_9.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolButton_9.setAutoRaise(True)
        self.toolButton_9.setObjectName("toolButton_9")
        self.gridLayout.addWidget(self.toolButton_9, 0, 2, 1, 1)
        self.toolButton_10 = QtWidgets.QToolButton(self.tabWidgetPage11)
        icon10 = QtGui.QIcon()
        icon10.addPixmap(QtGui.QPixmap("../image/se/bilibli.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolButton_10.setIcon(icon10)
        self.toolButton_10.setIconSize(QtCore.QSize(80, 80))
        self.toolButton_10.setPopupMode(QtWidgets.QToolButton.InstantPopup)
        self.toolButton_10.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolButton_10.setAutoRaise(True)
        self.toolButton_10.setObjectName("toolButton_10")
        self.gridLayout.addWidget(self.toolButton_10, 1, 0, 1, 1)
        self.toolButton_11 = QtWidgets.QToolButton(self.tabWidgetPage11)
        icon11 = QtGui.QIcon()
        icon11.addPixmap(QtGui.QPixmap("../image/se/土豆.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolButton_11.setIcon(icon11)
        self.toolButton_11.setIconSize(QtCore.QSize(80, 80))
        self.toolButton_11.setPopupMode(QtWidgets.QToolButton.InstantPopup)
        self.toolButton_11.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolButton_11.setAutoRaise(True)
        self.toolButton_11.setObjectName("toolButton_11")
        self.gridLayout.addWidget(self.toolButton_11, 1, 1, 1, 1)
        self.toolButton_12 = QtWidgets.QToolButton(self.tabWidgetPage11)
        icon12 = QtGui.QIcon()
        icon12.addPixmap(QtGui.QPixmap("../image/se/acfun.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolButton_12.setIcon(icon12)
        self.toolButton_12.setIconSize(QtCore.QSize(80, 80))
        self.toolButton_12.setPopupMode(QtWidgets.QToolButton.InstantPopup)
        self.toolButton_12.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolButton_12.setAutoRaise(True)
        self.toolButton_12.setObjectName("toolButton_12")
        self.gridLayout.addWidget(self.toolButton_12, 1, 2, 1, 1)
        icon13 = QtGui.QIcon()
        icon13.addPixmap(QtGui.QPixmap("../image/ico/UK Flag.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.tabWidget.addTab(self.tabWidgetPage11, icon13, "")
        self.verticalLayout.addWidget(self.tabWidget)

        self.retranslateUi(Dialog)
        self.tabWidget.setCurrentIndex(1)
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "toolButton+tabWidget控件"))
        self.toolButton.setText(_translate("Dialog", "百度"))
        self.toolButton_2.setText(_translate("Dialog", "360"))
        self.toolButton_3.setText(_translate("Dialog", "必應"))
        self.toolButton_4.setText(_translate("Dialog", "搜狗"))
        self.toolButton_5.setText(_translate("Dialog", "谷歌"))
        self.toolButton_6.setText(_translate("Dialog", "雅虎"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tabWidgetPage1), _translate("Dialog", "搜索引擎"))
        self.toolButton_7.setText(_translate("Dialog", "騰訊視頻"))
        self.toolButton_8.setText(_translate("Dialog", "搜狐視頻"))
        self.toolButton_9.setText(_translate("Dialog", "優酷視頻"))
        self.toolButton_10.setText(_translate("Dialog", "Bilibili"))
        self.toolButton_11.setText(_translate("Dialog", "土豆"))
        self.toolButton_12.setText(_translate("Dialog", "AcFun"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tabWidgetPage11), _translate("Dialog", "視頻網站"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    Dialog = QtWidgets.QDialog()
    ui = Ui_Dialog()
    ui.setupUi(Dialog)
    Dialog.show()
    sys.exit(app.exec_())

 

# -*- coding: utf-8 -*-
from PyQt5.QtCore import pyqtSlot
from PyQt5.QtWidgets import QDialog, QApplication
from Ui_toolBox import Ui_Dialog
import sys, webbrowser


class Dialog(QDialog, Ui_Dialog):

    def __init__(self, parent=None):
        super(Dialog, self).__init__(parent)
        self.setupUi(self)
    
    @pyqtSlot()
    def on_toolButton_clicked(self):
        webbrowser.open('https://www.baidu.com')

    @pyqtSlot()
    def on_toolButton_2_clicked(self):
        webbrowser.open('https://www.so.com/')
    
    @pyqtSlot()
    def on_toolButton_3_clicked(self):
        webbrowser.open('http://cn.bing.com/')
        
    @pyqtSlot()
    def on_toolButton_4_clicked(self):
        webbrowser.open('https://www.sogou.com/')
    
    @pyqtSlot()
    def on_toolButton_5_clicked(self):
        webbrowser.open('https://www.google.com/')

    @pyqtSlot()
    def on_toolButton_6_clicked(self):
        webbrowser.open('https://www.yahoo.com/')

    @pyqtSlot()
    def on_toolButton_7_clicked(self):
        webbrowser.open('https://v.qq.com/')
        
    @pyqtSlot()
    def on_toolButton_8_clicked(self):
        webbrowser.open('https://film.sohu.com')
    
    @pyqtSlot()
    def on_toolButton_9_clicked(self):
        webbrowser.open('http://www.youku.com/')
    
    @pyqtSlot()
    def on_toolButton_10_clicked(self):
        webbrowser.open('https://www.bilibili.com/')
    
    @pyqtSlot()
    def on_toolButton_11_clicked(self):
        webbrowser.open('http://www.tudou.com/')
    
    @pyqtSlot()
    def on_toolButton_12_clicked(self):
        webbrowser.open('http://www.acfun.cn/')
    

if __name__ == "__main__":
    app = QApplication(sys.argv)
    ui = Dialog()
    ui.show()
    sys.exit(app.exec_())