PyQt 定义控件SwitchButton 指南

PyQt 定义控件SwitchButton 指南

SwitchButton 是一个自定义开关按钮控件，通常用于在用户界面中启用或禁用某些功能或选项。它是一种用户友好的控件，允许用户通过切换按钮的状态来控制应用程序的行为。

以下是 SwitchButton 的一些常见特征和用途：

1. 切换功能：SwitchButton 允许用户轻松地切换某种功能、选项或状态。它通常用于启用或禁用某些功能，例如启用/禁用声音、允许/禁止通知等。
2. 图形外观：SwitchButton 的外观通常是一个带有两种状态的图形按钮。通常，开启状态用一种颜色或图标表示，而关闭状态用另一种颜色或图标表示。开关按钮的外观可以根据应用程序的设计进行自定义。
3. 交互性：用户可以单击 SwitchButton 来切换它的状态。这是一种直观的交互方式，用户可以快速了解功能是否启用。
4. 逻辑绑定：SwitchButton 可以与特定的逻辑或设置相关联。例如，当开关按钮处于开启状态时，相关功能将被启用，当它处于关闭状态时，相关功能将被禁用。
5. 状态反馈：通常，SwitchButton 可以提供用户状态反馈，以指示当前状态是开启还是关闭。这可以是文本标签或颜色变化。

在许多图形用户界面工具包中，包括 PyQt5，开关按钮控件是一个常见的元素，用于增加用户界面的互动性和可配置性。您可以根据您的需求自定义开关按钮的外观和行为，并将其集成到您的应用程序中，以实现用户友好的功能切换。

实例程序

#!/usr/bin/env python


import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QLabel,QWidget,QVBoxLayout
from PyQt5.QtCore import Qt,QRect
from PyQt5.QtGui import  QPainter,QFont,QBrush,QColor,QPen


class SwitchButton(QWidget):
    def __init__(self, parent=None):
        super(SwitchButton, self).__init__(parent)
        self.setWindowFlags(self.windowFlags() | Qt.FramelessWindowHint)
        self.setAttribute(Qt.WA_TranslucentBackground)
        #self.resize(70, 30)
        # SwitchButtonstate：True is ON，False is OFF
        self.state = False
        self.setFixedSize(80, 40)

    def mousePressEvent(self, event):
        '''
        set click event for state change
        '''
        super(SwitchButton, self).mousePressEvent(event)
        self.state = False if self.state else True
        self.update()

    def paintEvent(self, event):
        '''Set the button'''
        super(SwitchButton, self).paintEvent(event)

        # Create a renderer and set anti-aliasing and smooth transitions
        painter = QPainter(self)
        painter.setRenderHints(QPainter.Antialiasing | QPainter.SmoothPixmapTransform)
        # Defining font styles
        font = QFont("Arial")
        font.setPixelSize(self.height()//3)
        painter.setFont(font)
        # SwitchButton state：ON
        if self.state:
            # Drawing background
            painter.setPen(Qt.NoPen)
            brush = QBrush(QColor('#bd93f9'))
            painter.setBrush(brush)
            # Top left corner of the rectangle coordinate
            rect_x = 0
            rect_y = 0
            rect_width = self.width()
            rect_height = self.height()
            rect_radius = self.height()//2
            painter.drawRoundedRect(rect_x, rect_y, rect_width, rect_height, rect_radius, rect_radius)
            # Drawing slides circle
            painter.setPen(Qt.NoPen)
            brush.setColor(QColor('#ffffff'))
            painter.setBrush(brush)
            # Phase difference pixel point
            # Top left corner of the rectangle coordinate
            diff_pix = 3
            rect_x = self.width() - diff_pix - (self.height()-2*diff_pix)
            rect_y = diff_pix
            rect_width = (self.height()-2*diff_pix)
            rect_height = (self.height()-2*diff_pix)
            rect_radius = (self.height()-2*diff_pix)//2
            painter.drawRoundedRect(rect_x, rect_y, rect_width, rect_height, rect_radius, rect_radius)

            # ON txt set
            painter.setPen(QPen(QColor('#ffffff')))
            painter.setBrush(Qt.NoBrush)
            painter.drawText(QRect(int(self.height()/3), int(self.height()/3.5), 50, 20), Qt.AlignLeft, 'ON')
        # SwitchButton state：OFF
        else:
            # Drawing background
            painter.setPen(Qt.NoPen)
            brush = QBrush(QColor('#525555'))
            painter.setBrush(brush)
            # Top left corner of the rectangle coordinate
            rect_x = 0
            rect_y = 0
            rect_width = self.width()
            rect_height = self.height()
            rect_radius = self.height()//2
            painter.drawRoundedRect(rect_x, rect_y, rect_width, rect_height, rect_radius, rect_radius)

            # Drawing slides circle
            pen = QPen(QColor('#999999'))
            pen.setWidth(1)
            painter.setPen(pen)
            # Phase difference pixel point
            diff_pix = 3
            # Top left corner of the rectangle coordinate
            rect_x = diff_pix
            rect_y = diff_pix
            rect_width = (self.height()-2*diff_pix)
            rect_height = (self.height()-2*diff_pix)
            rect_radius = (self.height()-2*diff_pix)//2
            painter.drawRoundedRect(rect_x, rect_y, rect_width, rect_height, rect_radius, rect_radius)

            # OFF txt set
            painter.setBrush(Qt.NoBrush)
            painter.drawText(QRect(int(self.width()*1/2), int(self.height()/3.5), 50, 20), Qt.AlignLeft, 'OFF')


def main():
    app = QApplication(sys.argv)
    window = QMainWindow()
    window.setGeometry(100, 100, 100, 290)
    window.setWindowTitle("Switch Button Example")
    switch1 = SwitchButton()
    switch2 = SwitchButton()
    layout = QVBoxLayout()
    layout.addWidget(switch1)
    layout.addWidget(switch2)
    window.setCentralWidget(QWidget())
    window.centralWidget().setLayout(layout)
    window.show()
    sys.exit(app.exec_())

if __name__ == "__main__":
    main()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

效果如下所示：

---

End