QT custom Control (switch button)

Briefly

Children who have contacted the iOS system should be familiar with the switch button, often encountered in the settings, the sliding effect is more handsome when switching.

The switch button is usually said to have two states: on, off.

Below, we use a custom control to implement a switch button.

• Briefly
• Principle
• Source
• Example
  • Effect
  • Source
• More references

Principle

• Overrides the mouse down event (mousepressevent), release event (Mousereleaseevent), to toggle the switch state.
• Overrides the Paint event (paintevent), which is used to draw the switch effect.
• Use Qtimer, timed refresh, so that the switch to produce animation effect.

The rest of the interfaces are used for expansion, or they can be expanded themselves.

Source

SwitchControl.h

#ifndef Switch_control#define Switch_control#include <QWidget>#include <QTimer>Class Switchcontrol: Publicqwidget{Q_object Public:Explicit Switchcontrol(Qwidget *parent =0);//Return switch status-open: True off: false    BOOLIstoggled ()Const;//Set switch status    voidSettoggle (BOOL checked);//Set background color    voidSetBackgroundColor (qcolor color);//Set the selected color    voidSetcheckedcolor (qcolor color);//Set unavailable colors    voidSetdisbaledcolor (qcolor color);protected://Draw switchvoid PaintEvent(Qpaintevent *Event) Q_decl_override;//Mouse down events    voidMousepressevent (Qmouseevent *Event) Q_decl_override;//Mouse release event-toggle switch status, transmit toggled () signal    voidMousereleaseevent (Qmouseevent *Event) Q_decl_override;//Size Change event    voidResizeevent (Qresizeevent *Event) Q_decl_override;//default sizeQsize Sizehint ()ConstQ_decl_override; Qsize Minimumsizehint ()ConstQ_decl_override;signals://When the state changes, the transmit signal    voidToggled (BOOL checked);PrivateSlots://state toggle for sliding effectsvoid OnTimeOut();Private:BOOLm_bchecked;//Whether selectedQcolor M_background;//Background colorQcolor M_checkedcolor;//Check colorQcolor M_disabledcolor;//Unavailable colorQcolor M_thumbcolor;//Thumb colorQreal M_radius;//FilletQreal M_nx;//x point coordinatesQreal M_ny;//y point coordinatesQint16 M_nheight;//HeightQint16 M_nmargin;//MarginQtimer M_timer;//Timer};#endif //Switch_control

SwitchControl.cpp

#include <Qpainter>#include <Qmouseevent>#include "SwitchControl.h"Switchcontrol:: Switchcontrol(Qwidget*Parent): Qwidget (Parent), M_nheight ( -), m_bchecked (false), M_radius (8.0), M_nmargin (3), M_checkedcolor (0, Max,136), M_thumbcolor (Qt:: White), M_disabledcolor ( the, the, the), M_background (Qt:: Black){//mouse over cursor shape-hand typeSetCursor (Qt::P ointinghandcursor);//Connection signal slotConnect&M_timer, SIGNAL (timeout ()), this, SLOT (OnTimeOut ()));}//Draw switchvoidSwitchcontrol::p aintevent(qpaintevent*Event) {q_unused (event);    qpainter painter (this); Painter.Setpen (Qt:: Nopen); Painter.Setrenderhint (Qpainter:: antialiasing);    Qpainterpath path;    Qcolor background;    Qcolor Thumbcolor; Qreal dopacity;if(IsEnabled ()) {//Available status        if(m_bchecked) {//Open statusBackground=M_checkedcolor; Thumbcolor=M_checkedcolor; Dopacity= 0.600; }Else{//Off statusBackground=M_background; Thumbcolor=M_thumbcolor; Dopacity= 0.800; }    }Else{//Unavailable statusBackground=M_background; Dopacity= 0.260; Thumbcolor=M_disabledcolor; }//Draw large EllipsePainter.Setbrush (background); Painter.SetOpacity (dopacity); Path.Addroundedrect (QRECTF (M_nmargin, M_nmargin, Width ()- 2 *M_nmargin, Height ()- 2 *M_nmargin), M_radius, M_radius); Painter.DrawPath (Path.Simplified ());//Draw small EllipsePainter.Setbrush (Thumbcolor); Painter.SetOpacity (1.0); Painter.DrawEllipse (QRECTF (m_nx-(M_nheight/ 2), M_ny-(M_nheight/ 2), height (), height ()));}//Mouse down eventsvoidSwitchcontrol:: Mousepressevent(qmouseevent*Event) {if(IsEnabled ()) {if(Event -Buttons ()&Qt:: LeftButton) {Event -Accept (); }Else{Event -Ignore (); }    }}//Mouse release event-toggle switch status, transmit toggled () signalvoidSwitchcontrol:: Mousereleaseevent(qmouseevent*Event) {if(IsEnabled ()) {if(Event -type()==Qmouseevent:: Mousebuttonrelease)&&(Event -Button ()==Qt:: LeftButton) {Event -Accept (); M_bchecked= !m_bchecked;            Emit toggled (m_bchecked); M_timer.StartTen); }Else{Event -Ignore (); }    }}//Size Change eventvoidSwitchcontrol:: Resizeevent(qresizeevent*Event) {M_nx=M_nheight/ 2; M_ny=M_nheight/ 2; Qwidget:: Resizeevent(event);}//default sizeQsize Switchcontrol:: Sizehint() const{returnMinimumsizehint ();}//min. sizeQsize Switchcontrol:: Minimumsizehint() const{returnQsize (2 *(M_nheight+M_nmargin), M_nheight+ 2 *M_nmargin);}//Toggle state-SwipevoidSwitchcontrol:: OnTimeOut(){if(m_bchecked) {M_NX+= 1;if(M_nx>=Width ()-M_nheight) M_timer.Stop (); }Else{M_NX-= 1;if(M_nx<=M_nheight/ 2) M_timer.Stop (); } update ();}//Return switch status-open: True off: falseBOOL Switchcontrol:: istoggled() const{returnm_bchecked;}//Set switch statusvoidSwitchcontrol:: Settoggle(bool checked) {m_bchecked=Checked M_timer.StartTen);}//Set background colorvoidSwitchcontrol:: SetBackgroundColor(Qcolor color) {M_background=Color;}//Set the selected colorvoidSwitchcontrol:: Setcheckedcolor(Qcolor color) {M_checkedcolor=Color;}//Set unavailable colorsvoidSwitchcontrol:: Setdisbaledcolor(Qcolor color) {M_disabledcolor=Color;}

Example

Below, let's implement a set of switch buttons.

Effect

Source

To demonstrate, you can set the style of the switch, as well as the status and other effects.

Switchcontrol *pswitchcontrol =NewSwitchcontrol ( This); Switchcontrol *pgreenswitchcontrol =NewSwitchcontrol ( This); Switchcontrol *pdisabledswitchcontrol =NewSwitchcontrol ( This);//Set status, stylePgreenswitchcontrol->settoggle (true);p Greenswitchcontrol->setcheckedcolor (Qcolor (0, the, the));pD isabledswitchcontrol->setdisabled (true);pD Isabledswitchcontrol->settoggle (true);//Connection signal slotConnect (Pswitchcontrol, SIGNAL (toggled (BOOL)), This, SLOT (ontoggled (BOOL)));

Implements a simple slot function that, when the switch button effect changes, is triggered to print the current state.

void MainWindow::onToggled(bool bChecked){    "State : " << bChecked;}

More references

• Toggle Switch in Qt
• The Qcheckbox of QT
• The Qradiobutton of QT

QT custom Control (switch button)