Learn PyQt: Toggle & AnimatedToggle — Toggle switch Widget QCheckBox replacement

The standard QCheckBox widget provides a simple way to add toggleable options to your UI, mimicking a checkable box on a paper form. By clicking on the widget the user can toggle the widget on and off (in Qt is actually a 3rd semi-checked state).

This simple checkbox isn't always the best fit for a UI -- for example, if you have a definitive switch which controls an action, such as switching on/off a connection or device. In that case something that mimics an actual switch may be better. Unfortunately, there is no such widget available in Qt itself.

This custom widget provides two alternative toggle switches for use in PyQt5 and PySide2 applications -- Toggle and AnimatedToggle. They are both a drop-in replacement for the standard QCheckBox and subclass from it, to provide an identical interface & signals. Both widgets can be customized to change the colors used for each element, and AnimatedToggle adds additional transition and pulse animations to give a more physical feel.

To use the widget install the qtwidgets Python library.

shell

pip3 install qtwidgets

You can then import the widget into your application using

python

from qtwidgets import Toggle

...or for the animated variant --

python

from qtwidgets import AnimatedToggle

This custom widget uses features covered in the QPropertyAnimation and bitmap graphics tutorials.

There are other widgets available in the library too.

You can test the widget out using the following demo code.

• PyQt5
• PySide2

python

import PyQt5
from PyQt5 import QtWidgets
from qtwidgets import Toggle, AnimatedToggle

class Window(QtWidgets.QMainWindow):

    def __init__(self):
        super().__init__()

        toggle_1 = Toggle()
        toggle_2 = AnimatedToggle(
            checked_color="#FFB000",
            pulse_checked_color="#44FFB000"
        )

        container = QtWidgets.QWidget()
        layout = QtWidgets.QVBoxLayout()
        layout.addWidget(toggle_1)
        layout.addWidget(toggle_2)
        container.setLayout(layout)

        self.setCentralWidget(container)


app = QtWidgets.QApplication([])
w = Window()
w.show()
app.exec_()

python

import PySide2
from PySide2 import QtWidgets
from qtwidgets import Toggle, AnimatedToggle


class Window(QtWidgets.QMainWindow):

    def __init__(self):
        super().__init__()

        toggle_1 = Toggle()
        toggle_2 = AnimatedToggle(
            checked_color="#FFB000",
            pulse_checked_color="#44FFB000"
        )

        container = QtWidgets.QWidget()
        layout = QtWidgets.QVBoxLayout()
        layout.addWidget(toggle_1)
        layout.addWidget(toggle_2)
        container.setLayout(layout)

        self.setCentralWidget(container)


app = QtWidgets.QApplication([])
w = Window()
w.show()
app.exec_()

This creates a window containing two toggles -- the first using Toggle (no animations) with default colors and the second using AnimatedToggle with custom colors, in orange.

The two toggles

You can customize the colors yourself, just remember that for transparency the values are specified in AARRGGBB order, that is alpha (transparency) then red, green, blue -- #FFB000 is solid orange, while #44FFB000 is semi-transparent orange of the same color.

See the complete PyQt5 tutorial, from first steps to complete applications with Python & Qt5.

from Planet Python
via read more