PyQt5實(shí)現(xiàn)滑動開關(guān)的示例詳解

更新時(shí)間：2024年12月12日 11:20:47 作者：小蠻幺_kongkong

這篇文章主要為大家詳細(xì)介紹了如何使用PyQt5實(shí)現(xiàn)滑動開關(guān)的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

效果圖

1、初始化按鈕類

class SwitchButton(QPushButton):
    def __init__(self):
        super().__init__()

SwitchButton 是一個(gè)繼承自 QPushButton 的自定義按鈕類。

在初始化函數(shù)中，調(diào)用了 super().__init__()，確保父類 QPushButton 的初始化功能被執(zhí)行。

2、設(shè)置按鈕的基礎(chǔ)樣式

self.setCheckable(True)  # 使按鈕可以選中和取消選中
self.setStyleSheet("""
    SwitchButton {
        border: 2px solid #ccc;
        border-radius: 15px;
        background-color: #ccc;
        width: 80px;  /* 增加寬度 */
        height: 30px;
        position: relative;
    }
    SwitchButton:checked {
        background-color: #4CAF50;
    }
""")
self.setFixedSize(80, 30)

設(shè)置按鈕為可選中狀態(tài) (checkable)，即可以切換選中和未選中狀態(tài)。

使用 setStyleSheet 設(shè)置按鈕的樣式：

默認(rèn)情況下背景色為灰色（#ccc）。
選中狀態(tài)（SwitchButton:checked）時(shí)背景色為綠色（#4CAF50）。
按鈕有圓角邊框（border-radius: 15px），形狀為橢圓。

固定按鈕的大小為 80x30 像素。

3、添加滑塊

self._slider = QPushButton(self)  # 用于滑動的按鈕
self._slider.setFixedSize(28, 28)
self._slider.setStyleSheet("""
    QPushButton {
        border-radius: 14px;
        background-color: white;
    }
""")
self._slider.move(2, 2)  # 初始位置

self._slider 是一個(gè)內(nèi)部的小按鈕，用于表示開關(guān)滑塊。

設(shè)置滑塊的大小為 28x28，并使用 border-radius: 14px 將其形狀設(shè)置為圓形。

初始位置通過 move(2, 2) 放置在按鈕左側(cè)。

4、添加狀態(tài)文本

self._label = QLabel("OFF", self)
self._label.setStyleSheet("""
    QLabel {
        color: white;
        font-weight: bold;
    }
""")
self._label.setFixedSize(40, 30)
self._label.move(20, 0)  # 初始位置為中間位置

self._label 是用于顯示當(dāng)前按鈕狀態(tài)的文本。

設(shè)置了 OFF 為初始文本，并通過樣式設(shè)置文本為白色，字體加粗。

使用 move(20, 0) 將文本放置在按鈕的中間位置。

5、設(shè)置動畫效果

self.animation = QPropertyAnimation(self._slider, b"pos")
self.animation.setDuration(200)  # 動畫持續(xù)時(shí)間

self.animation 是一個(gè)屬性動畫，用于在滑塊滑動時(shí)產(chǎn)生平滑的過渡效果。

將滑塊的 pos 屬性綁定到動畫中，動畫的持續(xù)時(shí)間設(shè)置為 200 毫秒。

6、切換按鈕的狀態(tài)

self.clicked.connect(self.toggle)

通過 clicked.connect 將按鈕的點(diǎn)擊事件與自定義的 toggle 方法綁定。

7、實(shí)現(xiàn)狀態(tài)切換邏輯

def toggle(self):
    if self.isChecked():
        self.animation.setEndValue(QPoint(50, 2))  # 開關(guān)打開時(shí)滑塊的位置
        self._label.setText("ON")  # 更新文本為 ON
        self._label.move(20, 0)  # 保持文本在中間位置
    else:
        self.animation.setEndValue(QPoint(2, 2))  # 開關(guān)關(guān)閉時(shí)滑塊的位置
        self._label.setText("OFF")  # 更新文本為 OFF
        self._label.move(20, 0)  # 保持文本在中間位置
    self.animation.start()

判斷按鈕狀態(tài)：

使用 isChecked() 檢查按鈕是否處于選中狀態(tài)。
如果選中（ON 狀態(tài)），將滑塊的目標(biāo)位置設(shè)置為按鈕右側(cè)（QPoint(50, 2)）。
如果未選中（OFF 狀態(tài)），將滑塊的目標(biāo)位置設(shè)置為按鈕左側(cè)（QPoint(2, 2)）。

更新狀態(tài)文本：

在 ON 狀態(tài)下，文本更新為 ON。
在 OFF 狀態(tài)下，文本更新為 OFF。
文本始終放在按鈕的中間位置。

啟動動畫：

調(diào)用 self.animation.start() 啟動滑塊動畫。

import sys
from PyQt5.QtCore import QPropertyAnimation, QPoint
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout, QLabel


class SwitchButton(QPushButton):
    def __init__(self):
        super().__init__()

        self.setCheckable(True)  # 使按鈕可以選中和取消選中
        self.setStyleSheet("""
            SwitchButton {
                border: 2px solid #ccc;
                border-radius: 15px;
                background-color: #ccc;
                 width: 80px;  /* 增加寬度 */
                height: 30px;
                position: relative;
            }
            SwitchButton:checked {
                background-color: #4CAF50;
            }
        """)
        self.setFixedSize(80, 30)

        self._slider = QPushButton(self)  # 用于滑動的按鈕
        self._slider.setFixedSize(28, 28)
        self._slider.setStyleSheet("""
            QPushButton {
                border-radius: 14px;
                background-color: white;
            }
        """)
        self._slider.move(2, 2)  # 初始位置

        # 添加狀態(tài)文本標(biāo)簽
        self._label = QLabel("OFF", self)
        self._label.setStyleSheet("""
                    QLabel {
                        color: white;
                        font-weight: bold;
                    }
                """)
        self._label.setFixedSize(40, 30)
        self._label.move(40, 0)  # 初始位置為中間位置

        # 動畫效果
        self.animation = QPropertyAnimation(self._slider, b"pos")
        self.animation.setDuration(200)  # 動畫持續(xù)時(shí)間

        # 點(diǎn)擊事件切換開關(guān)
        self.clicked.connect(self.toggle)

    def toggle(self):
        if self.isChecked():
            self.animation.setEndValue(QPoint(50, 2))  # 開關(guān)打開時(shí)滑塊的位置
            self._label.setText("ON")  # 更新文本為 ON
            self._label.move(20, 0)  # 保持文本在中間位置
        else:
            self.animation.setEndValue(QPoint(2, 2))  # 開關(guān)關(guān)閉時(shí)滑塊的位置
            self._label.setText("OFF")  # 更新文本為 OFF
            self._label.move(40, 0)  # 保持文本在中間位置
        self.animation.start()


class App(QWidget):
    def __init__(self):
        super().__init__()

        self.setWindowTitle('PyQt5 Switch Button Example')
        self.setGeometry(300, 300, 200, 100)

        layout = QVBoxLayout()
        self.switch_button = SwitchButton()
        layout.addWidget(self.switch_button)
        self.setLayout(layout)
        self.switch_button.clicked.connect(self.on_state_changed)

    def on_state_changed(self):
        if self.switch_button.isChecked():
            print("Switch is ON")
        else:
            print("Switch is OFF")


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

到此這篇關(guān)于PyQt5實(shí)現(xiàn)滑動開關(guān)的示例詳解的文章就介紹到這了,更多相關(guān)PyQt5滑動開關(guān)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: