快捷導(dǎo)航

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

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

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

前言

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

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

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

思路講解

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

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

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

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

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

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

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

代碼部分

代碼放在最后，大家在需要 Switch Button 的時(shí)候可以復(fù)制代碼并進(jìn)行簡單修改，來打造自己的應(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: