Skip to content

[PyQt5] 如何使用 QStyle 自帶的 Icon 來當作圖示

在 PyQt5 當中我們時常會使用到 Icon 這樣的小圖示，通常像這樣的圖示我們可以從外部讀取圖片來使用。若想要了解如何從外部讀取圖片來當作 Icon，可以參考我之前寫的《PyQt5 基本教學 (3) QMainWindow, QIcon, QPixmap, QPalette》。

但今天最重要的是，我想要紀錄我使用 PyQt5 內建的 QStyle 裡面自帶的 Icon 心得。

使用外部的圖片當然很棒，我們可以自由選擇我們想要的圖示。但是若今天我們想要將製作好的程式交給別人使用，我們可能會在打包圖片時遇到一些困難，比如我們需要連圖片一起交給別人。詳細的解說可以參閱我之前寫過的《PyInstaller 可發布並夾帶圖片的方法》。

若不想這麼麻煩，也許可以參考一下 QStyle 自帶的 Icon，或許其中就有你想要的圖片也不一定。

QStyle

要如何知道 QStyle 裡面有什麼樣的 Icon 呢？其實我找到了一個辛苦整理好的國外網站： https://python-catalin.blogspot.com/2018/11/python-qt5-default-icons-with-qstyle.html

以下的 Sample Code 也是由他們那裡來的，如開發者並不希望我直接貼在這裡 Demo，可以通知我一聲，我會馬上修改掉的。

# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import *


class Widget(QWidget):

    def __init__(self, parent=None):
        super(Widget, self).__init__()
        icons = [
            'SP_TitleBarMinButton',
            'SP_TitleBarMenuButton',
            'SP_TitleBarMaxButton',
            'SP_TitleBarCloseButton',
            'SP_TitleBarNormalButton',
            'SP_TitleBarShadeButton',
            'SP_TitleBarUnshadeButton',
            'SP_TitleBarContextHelpButton',
            'SP_MessageBoxInformation',
            'SP_MessageBoxWarning',
            'SP_MessageBoxCritical',
            'SP_MessageBoxQuestion',
            'SP_DesktopIcon',
            'SP_TrashIcon',
            'SP_ComputerIcon',
            'SP_DriveFDIcon',
            'SP_DriveHDIcon',
            'SP_DriveCDIcon',
            'SP_DriveDVDIcon',
            'SP_DriveNetIcon',
            'SP_DirHomeIcon',
            'SP_DirOpenIcon',
            'SP_DirClosedIcon',
            'SP_DirIcon',
            'SP_DirLinkIcon',
            'SP_FileIcon',
            'SP_FileLinkIcon',
            'SP_FileDialogStart',
            'SP_FileDialogEnd',
            'SP_FileDialogToParent',
            'SP_FileDialogNewFolder',
            'SP_FileDialogDetailedView',
            'SP_FileDialogInfoView',
            'SP_FileDialogContentsView',
            'SP_FileDialogListView',
            'SP_FileDialogBack',
            'SP_DockWidgetCloseButton',
            'SP_ToolBarHorizontalExtensionButton',
            'SP_ToolBarVerticalExtensionButton',
            'SP_DialogOkButton',
            'SP_DialogCancelButton',
            'SP_DialogHelpButton',
            'SP_DialogOpenButton',
            'SP_DialogSaveButton',
            'SP_DialogCloseButton',
            'SP_DialogApplyButton',
            'SP_DialogResetButton',
            'SP_DialogDiscardButton',
            'SP_DialogYesButton',
            'SP_DialogNoButton',
            'SP_ArrowUp',
            'SP_ArrowDown',
            'SP_ArrowLeft',
            'SP_ArrowRight',
            'SP_ArrowBack',
            'SP_ArrowForward',
            'SP_CommandLink',
            'SP_VistaShield',
            'SP_BrowserReload',
            'SP_BrowserStop',
            'SP_MediaPlay',
            'SP_MediaStop',
            'SP_MediaPause',
            'SP_MediaSkipForward',
            'SP_MediaSkipBackward',
            'SP_MediaSeekForward',
            'SP_MediaSeekBackward',
            'SP_MediaVolume',
            'SP_MediaVolumeMuted',
            'SP_CustomBase'
        ]
        Col_size = 6

        layout = QGridLayout()

        count = 0
        for i in icons:
            select_button = QPushButton(i)
            select_button.setIcon(self.style().standardIcon(getattr(QStyle, i)))

            layout.addWidget(select_button, count / Col_size, count % Col_size)
            count += 1

        self.setLayout(layout)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    dialog = Widget()
    dialog.show()
    app.exec_()



Output:

基本上為 Icon-Name 的組合，可以挑著看，相當不錯呢！

像我想要使用的，大約就是下面這三個元件：

很快就找到了，也能很快使用在自己的界面上。

以下是我界面原本的模樣。

然後我在我的程式裡面加了兩行，分別是在開始計時時、暫停計時時：

self.ui.pushButton.setIcon(self.style().standardIcon(QStyle.SP_MediaPlay))
self.ui.pushButton.setIcon(self.style().standardIcon(QStyle.SP_MediaPause))


開始計時前。
開始計時後。

QStyle 真的滿方便的，故在此紀錄起來，以後可以隨時查看。

Tags:

Leave a Reply