PyQt5實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)的示例詳解
效果圖
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) # 用于滑動(dòng)的按鈕 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)部的小按鈕,用于表示開(kāi)關(guān)滑塊。
設(shè)置滑塊的大小為 28x28,并使用 border-radius: 14px 將其形狀設(shè)置為圓形。
初始位置通過(guò) 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 為初始文本,并通過(guò)樣式設(shè)置文本為白色,字體加粗。
使用 move(20, 0) 將文本放置在按鈕的中間位置。
5、設(shè)置動(dòng)畫效果
self.animation = QPropertyAnimation(self._slider, b"pos") self.animation.setDuration(200) # 動(dòng)畫持續(xù)時(shí)間
self.animation 是一個(gè)屬性動(dòng)畫,用于在滑塊滑動(dòng)時(shí)產(chǎn)生平滑的過(guò)渡效果。
將滑塊的 pos 屬性綁定到動(dòng)畫中,動(dòng)畫的持續(xù)時(shí)間設(shè)置為 200 毫秒。
6、切換按鈕的狀態(tài)
self.clicked.connect(self.toggle)
通過(guò) clicked.connect 將按鈕的點(diǎn)擊事件與自定義的 toggle 方法綁定。
7、實(shí)現(xiàn)狀態(tài)切換邏輯
def toggle(self): if self.isChecked(): self.animation.setEndValue(QPoint(50, 2)) # 開(kāi)關(guān)打開(kāi)時(shí)滑塊的位置 self._label.setText("ON") # 更新文本為 ON self._label.move(20, 0) # 保持文本在中間位置 else: self.animation.setEndValue(QPoint(2, 2)) # 開(kāi)關(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īng)顟B(tài)文本:
- 在 ON 狀態(tài)下,文本更新為 ON。
- 在 OFF 狀態(tài)下,文本更新為 OFF。
- 文本始終放在按鈕的中間位置。
啟動(dòng)動(dòng)畫:
調(diào)用 self.animation.start() 啟動(dòng)滑塊動(dòng)畫。
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) # 用于滑動(dòng)的按鈕 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) # 初始位置為中間位置 # 動(dòng)畫效果 self.animation = QPropertyAnimation(self._slider, b"pos") self.animation.setDuration(200) # 動(dòng)畫持續(xù)時(shí)間 # 點(diǎn)擊事件切換開(kāi)關(guān) self.clicked.connect(self.toggle) def toggle(self): if self.isChecked(): self.animation.setEndValue(QPoint(50, 2)) # 開(kāi)關(guān)打開(kāi)時(shí)滑塊的位置 self._label.setText("ON") # 更新文本為 ON self._label.move(20, 0) # 保持文本在中間位置 else: self.animation.setEndValue(QPoint(2, 2)) # 開(kāi)關(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)滑動(dòng)開(kāi)關(guān)的示例詳解的文章就介紹到這了,更多相關(guān)PyQt5滑動(dòng)開(kāi)關(guān)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
C++常用函數(shù)總結(jié)(algorithm 頭文件)
本文給大家詳細(xì)介紹了algorithm 頭文件中最常用的函數(shù)及其使用方法,當(dāng)然這只是其中的一部分,algorithm 頭文件中還有很多其他的函數(shù),感興趣的朋友一起看看吧2023-12-12c++將vector迭代器轉(zhuǎn)換為指針的實(shí)現(xiàn)方式
這篇文章主要介紹了c++將vector迭代器轉(zhuǎn)換為指針的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-11-11C語(yǔ)言實(shí)現(xiàn)將字符串轉(zhuǎn)換為數(shù)字的方法
這篇文章主要介紹了C語(yǔ)言實(shí)現(xiàn)將字符串轉(zhuǎn)換為數(shù)字的方法,涉及系統(tǒng)函數(shù)atoi()函數(shù)的使用技巧,需要的朋友可以參考下2014-12-12C語(yǔ)言的語(yǔ)法風(fēng)格與代碼書寫規(guī)范指南
這篇文章主要介紹了C語(yǔ)言的語(yǔ)法風(fēng)格與代碼書寫規(guī)范指南,文中主張了一些諸如變量和結(jié)構(gòu)體的命名規(guī)范等細(xì)節(jié)方面的問(wèn)題,需要的朋友可以參考下2016-02-02C語(yǔ)言數(shù)據(jù)結(jié)構(gòu)中數(shù)制轉(zhuǎn)換實(shí)例代碼
這篇文章主要介紹了C語(yǔ)言數(shù)據(jù)結(jié)構(gòu)中數(shù)制轉(zhuǎn)換實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03C++應(yīng)用實(shí)現(xiàn)簡(jiǎn)易五子棋游戲
這篇文章主要為大家詳細(xì)介紹了C++應(yīng)用實(shí)現(xiàn)簡(jiǎn)易五子棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05