快捷導(dǎo)航

PyQt教程之自定義組件Switch?Button的實(shí)現(xiàn)

更新時(shí)間：2023年05月17日 16:34:32 作者：繁依Fanyi

這篇文章主要為大家詳細(xì)介紹了PyQt中如何實(shí)現(xiàn)自定義組件Switch?Button，文中的示例代碼簡(jiǎn)潔易懂，具有一定的學(xué)習(xí)價(jià)值，感興趣的可以了解一下

前言

最近在搞 Python 課程設(shè)計(jì)，想要搞一個(gè)好看的 UI，驚艷全班所有人。但打開(kāi) Qt Creator，Win7 風(fēng)格的復(fù)古的按鈕是在讓我難以下手。

其次，我因?yàn)橄胍蛟煲粋€(gè) Fluent UI 樣式的設(shè)置頁(yè)面，需要一個(gè)好看的 Switch Button，來(lái)用于設(shè)置界面部分設(shè)置項(xiàng)的轉(zhuǎn)換，于是便決定動(dòng)手寫一個(gè)；然而 Qt 中貌似沒(méi)有原生的 Switch Button 可供使用，因此邊決定自己動(dòng)手寫一個(gè) Switch Button。話不多說(shuō)，先看效果：

觀賞結(jié)束，整活開(kāi)始

思路講解

接下來(lái)簡(jiǎn)單分析一下 Switch Button 需要實(shí)現(xiàn)的部分：

首先，Switch Button 有開(kāi)關(guān)兩個(gè)狀態(tài)，可以在初始化時(shí)聲明一個(gè)變量來(lái)獲取按鈕的狀態(tài)。在代碼中，使用了一個(gè)布爾類型的變量 _switch_on 來(lái)表示按鈕的狀態(tài)，初始狀態(tài)為 False，表示關(guān)閉狀態(tài)。在點(diǎn)擊按鈕后，會(huì)切換狀態(tài)并更新按鈕的顏色。

接下來(lái)，我們需要繪制按鈕的外觀。在代碼中，使用了 paintEvent 方法來(lái)實(shí)現(xiàn)按鈕的繪制。該方法會(huì)被 Qt 框架自動(dòng)調(diào)用，我們可以在其中使用 QPainter 對(duì)象進(jìn)行繪制操作。

為了美觀，繪制過(guò)程中，首先繪制了按鈕的背景，使用了一個(gè)帶圓角的矩形，并填充了淺灰色。然后根據(jù)按鈕的狀態(tài)繪制按鈕的內(nèi)部，使用了帶圓角的矩形，并填充了相應(yīng)的顏色。這樣就完成了按鈕的外觀繪制。

當(dāng)用戶點(diǎn)擊按鈕時(shí)，mousePressEvent 方法會(huì)被調(diào)用。在該方法中，首先檢查是否是鼠標(biāo)左鍵按下，然后根據(jù)當(dāng)前按鈕的狀態(tài)設(shè)置動(dòng)畫的方向，并啟動(dòng)動(dòng)畫。動(dòng)畫會(huì)逐漸改變按鈕的位置，從而實(shí)現(xiàn)平滑的過(guò)渡效果。

在動(dòng)畫完成后，會(huì)調(diào)用 _on_animation_finished 方法。該方法會(huì)更新按鈕的狀態(tài)和顏色，并發(fā)射 switch_toggled 信號(hào)，通知應(yīng)用程序按鈕狀態(tài)的變化。

最后，在主程序中創(chuàng)建了一個(gè) QApplication 對(duì)象，實(shí)例化了 SwitchButton 類，并顯示了按鈕部件。這樣就完成了整個(gè) Switch Button 的實(shí)現(xiàn)。

代碼部分

代碼放在最后，大家在需要 Switch Button 的時(shí)候可以復(fù)制代碼并進(jìn)行簡(jiǎn)單修改，來(lái)打造自己的應(yīng)用。

import sys
from PyQt5.QtCore import Qt, QPropertyAnimation, QRect, pyqtProperty, pyqtSignal
from PyQt5.QtGui import QPainter, QColor, QPen, QBrush
from PyQt5.QtWidgets import QWidget, QApplication

class SwitchButton(QWidget):
    switch_toggled = pyqtSignal(bool)

    def __init__(self, parent=None):
        super().__init__(parent)
        self.setFixedSize(60, 30)
        self._switch_on = False
        self._switch_color = QColor(0, 255, 0)
        self._switch_rect = QRect(0, 0, 30, 30)
        self._switch_animation = QPropertyAnimation(self, b"switchRect", self)
        self._switch_animation.setDuration(300)
        self._switch_animation.setStartValue(QRect(0, 0, 30, 30))
        self._switch_animation.setEndValue(QRect(30, 0, 30, 30))
        self._switch_animation.finished.connect(self._on_animation_finished)

    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing)
        painter.setPen(QPen(Qt.NoPen))
        painter.setBrush(QBrush(QColor(200, 200, 200)))
        painter.drawRoundedRect(self.rect(), 15, 15)

        painter.setBrush(QBrush(self._switch_color))
        painter.drawRoundedRect(self._switch_rect, 15, 15)

    def mousePressEvent(self, event):
        if event.button() == Qt.LeftButton:
            self._switch_animation.setDirection(QPropertyAnimation.Forward if not self._switch_on else QPropertyAnimation.Backward)
            self._switch_animation.start()

    def _on_animation_finished(self):
        self._switch_on = not self._switch_on
        if self._switch_on:
            self._switch_color = QColor(0, 255, 0)  # 紅色
        else:
            self._switch_color = QColor(255, 0, 0)  # 綠色
        self.switch_toggled.emit(self._switch_on)

    @pyqtProperty(QRect)
    def switchRect(self):
        return self._switch_rect

    @switchRect.setter
    def switchRect(self, rect):
        self._switch_rect = rect
        self.update()

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

到此這篇關(guān)于PyQt教程之自定義組件Switch Button的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)PyQt Switch Button內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: