PyQt5實現(xiàn)滑動開關(guān)的示例詳解
效果圖
1、初始化按鈕類
class SwitchButton(QPushButton): def __init__(self): super().__init__()
SwitchButton 是一個繼承自 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è)置按鈕的樣式:
- 默認情況下背景色為灰色(#ccc)。
- 選中狀態(tài)(SwitchButton:checked)時背景色為綠色(#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 是一個內(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 是用于顯示當前按鈕狀態(tài)的文本。
設(shè)置了 OFF 為初始文本,并通過樣式設(shè)置文本為白色,字體加粗。
使用 move(20, 0) 將文本放置在按鈕的中間位置。
5、設(shè)置動畫效果
self.animation = QPropertyAnimation(self._slider, b"pos") self.animation.setDuration(200) # 動畫持續(xù)時間
self.animation 是一個屬性動畫,用于在滑塊滑動時產(chǎn)生平滑的過渡效果。
將滑塊的 pos 屬性綁定到動畫中,動畫的持續(xù)時間設(shè)置為 200 毫秒。
6、切換按鈕的狀態(tài)
self.clicked.connect(self.toggle)
通過 clicked.connect 將按鈕的點擊事件與自定義的 toggle 方法綁定。
7、實現(xiàn)狀態(tài)切換邏輯
def toggle(self): if self.isChecked(): self.animation.setEndValue(QPoint(50, 2)) # 開關(guān)打開時滑塊的位置 self._label.setText("ON") # 更新文本為 ON self._label.move(20, 0) # 保持文本在中間位置 else: self.animation.setEndValue(QPoint(2, 2)) # 開關(guān)關(guān)閉時滑塊的位置 self._label.setText("OFF") # 更新文本為 OFF self._label.move(20, 0) # 保持文本在中間位置 self.animation.start()
判斷按鈕狀態(tài):
- 使用 isChecked() 檢查按鈕是否處于選中狀態(tài)。
- 如果選中(ON 狀態(tài)),將滑塊的目標位置設(shè)置為按鈕右側(cè)(QPoint(50, 2))。
- 如果未選中(OFF 狀態(tài)),將滑塊的目標位置設(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)文本標簽 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ù)時間 # 點擊事件切換開關(guān) self.clicked.connect(self.toggle) def toggle(self): if self.isChecked(): self.animation.setEndValue(QPoint(50, 2)) # 開關(guān)打開時滑塊的位置 self._label.setText("ON") # 更新文本為 ON self._label.move(20, 0) # 保持文本在中間位置 else: self.animation.setEndValue(QPoint(2, 2)) # 開關(guān)關(guān)閉時滑塊的位置 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實現(xiàn)滑動開關(guān)的示例詳解的文章就介紹到這了,更多相關(guān)PyQt5滑動開關(guān)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
C++常用函數(shù)總結(jié)(algorithm 頭文件)
本文給大家詳細介紹了algorithm 頭文件中最常用的函數(shù)及其使用方法,當然這只是其中的一部分,algorithm 頭文件中還有很多其他的函數(shù),感興趣的朋友一起看看吧2023-12-12c++將vector迭代器轉(zhuǎn)換為指針的實現(xiàn)方式
這篇文章主要介紹了c++將vector迭代器轉(zhuǎn)換為指針的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-11-11C語言實現(xiàn)將字符串轉(zhuǎn)換為數(shù)字的方法
這篇文章主要介紹了C語言實現(xiàn)將字符串轉(zhuǎn)換為數(shù)字的方法,涉及系統(tǒng)函數(shù)atoi()函數(shù)的使用技巧,需要的朋友可以參考下2014-12-12C語言數(shù)據(jù)結(jié)構(gòu)中數(shù)制轉(zhuǎn)換實例代碼
這篇文章主要介紹了C語言數(shù)據(jù)結(jié)構(gòu)中數(shù)制轉(zhuǎn)換實例代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03