Qtt利用QPainter实现铵扭switchButton
.pro
1 #------------------------------------------------- 2 # 3 # Project created by QtCreator 2019-06-20T17:49:03 4 # 5 #------------------------------------------------- 6 7 QT += core gui 8 9 greaterThan(QT_MAJOR_VERSION, 4): QT += widgets 10 11 TARGET = SwitchButton 12 TEMPLATE = app 13 14 15 SOURCES += main.cpp\ 16 FrameSwitchButtons.cpp \ 17 SwitchButton.cpp 18 19 HEADERS += FrameSwitchButtons.h \ 20 SwitchButton.h 21 22 FORMS += FrameSwitchButtons.ui
main.cpp
1 #include "FrameSwitchButtons.h"
2 #include <QApplication>
3
4 int main(int argc, char *argv[])
5 {
6 QApplication a(argc, argv);
7 FrameSwitchButtons w;
8 w.show();
9
10 return a.exec();
11 }
FrameSwitchButtons.h
1 #ifndef FRAMESWITCHBUTTONS_H
View Code
2 #define FRAMESWITCHBUTTONS_H
3
4 #include <QWidget>
5
6 namespace Ui {
7 class FrameSwitchButtons;
8 }
9
10 class FrameSwitchButtons : public QWidget
11 {
12 Q_OBJECT
13
14 public:
15 explicit FrameSwitchButtons(QWidget *parent = 0);
16 ~FrameSwitchButtons();
17
18 private:
19 Ui::FrameSwitchButtons *ui;
20 };
21
22 #endif // FRAMESWITCHBUTTONS_H
FrameSwitchButtons.cpp
1 #include "FrameSwitchButtons.h"
2 #include "ui_FrameSwitchButtons.h"
3
4 FrameSwitchButtons::FrameSwitchButtons(QWidget *parent) :
5 QWidget(parent),
6 ui(new Ui::FrameSwitchButtons)
7 {
8 ui->setupUi(this);
9 }
10
11 FrameSwitchButtons::~FrameSwitchButtons()
12 {
13 delete ui;
14 }
FrameSwitchButtons.ui
1 <?xml version="1.0" encoding="UTF-8"?> 2 <ui version="4.0"> 3 <class>FrameSwitchButtons</class> 4 <widget class="QWidget" name="FrameSwitchButtons"> 5 <property name="geometry"> 6 <rect> 7 <x>0</x> 8 <y>0</y> 9 <width>417</width> 10 <height>310</height> 11 </rect> 12 </property> 13 <property name="windowTitle"> 14 <string>FrameSwitchButtons</string> 15 </property> 16 <layout class="QHBoxLayout" name="horizontalLayout"> 17 <item> 18 <spacer name="horizontalSpacer"> 19 <property name="orientation"> 20 <enum>Qt::Horizontal</enum> 21 </property> 22 <property name="sizeHint" stdset="0"> 23 <size> 24 <width>140</width> 25 <height>20</height> 26 </size> 27 </property> 28 </spacer> 29 </item> 30 <item> 31 <layout class="QVBoxLayout" name="verticalLayout"> 32 <item> 33 <spacer name="verticalSpacer"> 34 <property name="orientation"> 35 <enum>Qt::Vertical</enum> 36 </property> 37 <property name="sizeHint" stdset="0"> 38 <size> 39 <width>20</width> 40 <height>40</height> 41 </size> 42 </property> 43 </spacer> 44 </item> 45 <item> 46 <widget class="SwitchButton" name="switchBtn1" native="true"> 47 <property name="minimumSize"> 48 <size> 49 <width>100</width> 50 <height>40</height> 51 </size> 52 </property> 53 </widget> 54 </item> 55 <item> 56 <widget class="SwitchButton" name="switchBtn2" native="true"> 57 <property name="minimumSize"> 58 <size> 59 <width>100</width> 60 <height>40</height> 61 </size> 62 </property> 63 </widget> 64 </item> 65 <item> 66 <widget class="SwitchButton" name="switchBtn3" native="true"> 67 <property name="minimumSize"> 68 <size> 69 <width>100</width> 70 <height>40</height> 71 </size> 72 </property> 73 </widget> 74 </item> 75 <item> 76 <spacer name="verticalSpacer_2"> 77 <property name="orientation"> 78 <enum>Qt::Vertical</enum> 79 </property> 80 <property name="sizeHint" stdset="0"> 81 <size> 82 <width>20</width> 83 <height>40</height> 84 </size> 85 </property> 86 </spacer> 87 </item> 88 </layout> 89 </item> 90 <item> 91 <spacer name="horizontalSpacer_2"> 92 <property name="orientation"> 93 <enum>Qt::Horizontal</enum> 94 </property> 95 <property name="sizeHint" stdset="0"> 96 <size> 97 <width>139</width> 98 <height>20</height> 99 </size> 100 </property> 101 </spacer> 102 </item> 103 </layout> 104 </widget> 105 <layoutdefault spacing="6" margin="11"/> 106 <customwidgets> 107 <customwidget> 108 <class>SwitchButton</class> 109 <extends>QWidget</extends> 110 <header>switchbutton.h</header> 111 <container>1</container> 112 </customwidget> 113 </customwidgets> 114 <resources/> 115 <connections/> 116 </ui>
SwitchButton.h
1 #ifndef SWITCHBUTTON_H
2 #define SWITCHBUTTON_H
3
4 #include <QWidget>
5 #include <QTimer>
6 #include <QColor>
7
8 class SwitchButton : public QWidget
9 {
10 Q_OBJECT
11 // Q_PROPERTY(int m_space READ space WRITE setSpace)
12 // Q_PROPERTY(int m_radius READ radius WRITE setRadius)
13 // Q_PROPERTY(bool m_checked READ checked WRITE setChecked)
14 // Q_PROPERTY(bool m_showText READ showText WRITE setShowText)
15 // Q_PROPERTY(bool m_showCircle READ showCircel WRITE setShowCircle)
16 // Q_PROPERTY(bool m_animation READ animation WRITE setAnimation)
17
18 // Q_PROPERTY(QColor m_bgColorOn READ bgColorOn WRITE setBgColorOn)
19 // Q_PROPERTY(QColor m_bgColorOff READ bgColorOff WRITE setBgColorOff)
20 // Q_PROPERTY(QColor m_sliderColorOn READ sliderColorOn WRITE setSliderColorOn)
21 // Q_PROPERTY(QColor m_sliderColorOff READ sliderColorOff WRITE setSliderColorOff)
22 // Q_PROPERTY(QColor m_textColor READ textColor WRITE setTextColor)
23
24 // Q_PROPERTY(QString m_textOn READ textOn WRITE setTextOn)
25 // Q_PROPERTY(QString m_textOff READ textOff WRITE setTextOff)
26
27 // Q_PROPERTY(int m_step READ step WRITE setStep)
28 // Q_PROPERTY(int m_startX READ startX WRITE setStartX)
29 // Q_PROPERTY(int m_endX READ endX WRITE setEndX)
30
31 public:
32 explicit SwitchButton(QWidget *parent = 0);
33 ~SwitchButton(){}
34
35 signals:
36 void statusChanged(bool checked);
37
38 public slots:
39
40 private slots:
41 void updateValue();
42
43 private:
44 void drawBackGround(QPainter *painter);
45 void drawSlider(QPainter *painter);
46
47 protected:
48 void paintEvent(QPaintEvent *ev);
49 void mousePressEvent(QMouseEvent *ev);
50
51 private:
52 int m_space; //滑块距离边界距离
53 int m_radius; //圆角角度
54
55 bool m_checked; //是否选中
56 bool m_showText; //是否显示文字
57 bool m_showCircle; //是否显示圆圈
58 bool m_animation; //是否使用动画
59
60 QColor m_bgColorOn; //打开时候的背景色
61 QColor m_bgColorOff; //关闭时候的背景色
62 QColor m_sliderColorOn; //打开时候滑块颜色
63 QColor m_sliderColorOff; //关闭时候滑块颜色
64 QColor m_textColor; //文字颜色
65
66 QString m_textOn; //打开时候的文字
67 QString m_textOff; //关闭时候的文字
68
69 QTimer *m_timer; //动画定时器
70 int m_step; //动画步长
71 int m_startX; //滑块开始X轴坐标
72 int m_endX; //滑块结束X轴坐标
73
74 public:
75 int space() const;
76 int radius() const;
77 bool checked() const;
78 bool showText() const;
79 bool showCircel() const;
80 bool animation() const;
81
82 QColor bgColorOn() const;
83 QColor bgColorOff() const;
84 QColor sliderColorOn() const;
85 QColor sliderColorOff() const;
86 QColor textColor() const;
87
88 QString textOn() const;
89 QString textOff() const;
90
91 int step() const;
92 int startX() const;
93 int endX() const;
94
95
96 public Q_SLOTS:
97 void setSpace(int space);
98 void setRadius(int radius);
99 void setChecked(bool checked);
100 void setShowText(bool show);
101 void setShowCircle(bool show);
102 void setAnimation(bool ok);
103
104 void setBgColorOn(const QColor &color);
105 void setBgColorOff(const QColor &color);
106 void setSliderColorOn(const QColor &color);
107 void setSliderColorOff(const QColor &color);
108 void setTextColor(const QColor &color);
109
110 void setTextOn(const QString &text);
111 void setTextOff(const QString &text);
112
113 // void setStep(int step);
114 // void setStartX(int startX);
115 // void setEndX(int endX);
116
117
118 };
119
120
121
122 #endif // SWITCHBUTTON_H
SwitchButton.cpp
1 #pragma execution_character_set("utf-8")
2 #include "SwitchButton.h"
3 #include <QPainter>
4
5 SwitchButton::SwitchButton(QWidget *parent) : QWidget(parent)
6 {
7 m_space = 2;
8 m_radius = 5;
9 m_checked = false;
10 m_showText = true;
11 m_showText = false;
12 m_animation = true;
13
14 m_bgColorOn = QColor(21, 156, 119);
15 m_bgColorOff = QColor(111, 122, 126);
16
17 m_sliderColorOn = QColor(255, 255, 255);
18 m_sliderColorOff = QColor(255, 255, 255);
19
20 m_textColor = QColor(255, 255, 255);
21
22 m_textOn = "开启";
23 m_textOff = "关闭";
24
25 m_step = 0;
26 m_startX = 0;
27 m_endX = 0;
28
29 m_timer = new QTimer(this);
30 m_timer->setInterval(30);
31 connect(m_timer, SIGNAL(timeout()), this, SLOT(updateValue()));
32 }
33
34
35 void SwitchButton::drawBackGround(QPainter *painter)
36 {
37 painter->save();
38 painter->setPen(Qt::NoPen);
39
40 QColor bgColor = m_checked ? m_bgColorOn : m_bgColorOff;
41 if (isEnabled()) {
42 bgColor.setAlpha(60);
43 }
44
45 painter->setBrush(bgColor);
46
47 QRect rect(0, 0, width(), height());
48 int side = qMin(width(), height());
49
50 //左侧半圆
51 QPainterPath path1;
52 path1.addEllipse(rect.x(), rect.y(), side, side);
53
54 //右侧半圆
55 QPainterPath path2;
56 path2.addEllipse(rect.width() - side, rect.y(), side, side);
57
58 //中间的矩形
59 QPainterPath path3;
60 path3.addRect(rect.x() + side / 2, rect.y(), rect.width() - side, height());
61
62 QPainterPath path = path1 + path2 + path3;
63 painter->drawPath(path);
64
65 //绘制文本
66
67 //滑块半径
68 int sliderWidth = qMin(height(), width()) - m_space * 2 - 5;
69 if (m_checked){
70 QRect textRect(0, 0, width() - sliderWidth, height());
71 painter->setPen(QPen(m_textColor));
72 painter->drawText(textRect, Qt::AlignCenter, m_textOn);
73 } else {
74 QRect textRect(sliderWidth, 0, width() - sliderWidth, height());
75 painter->setPen(QPen(m_textColor));
76 painter->drawText(textRect, Qt::AlignCenter, m_textOff);
77 }
78
79 painter->restore();
80 }
81
82 void SwitchButton::drawSlider(QPainter *painter)
83 {
84 painter->save();
85 painter->setPen(Qt::NoPen);
86
87 QColor color = m_checked ? m_sliderColorOn : m_sliderColorOff;
88
89 painter->setBrush(QBrush(color));
90
91 int sliderWidth = qMin(width(), height()) - m_space * 2;
92 QRect rect(m_space + m_startX, m_space, sliderWidth, sliderWidth);
93 painter->drawEllipse(rect);
94
95 painter->restore();
96 }
97
98 void SwitchButton::paintEvent(QPaintEvent *ev)
99 {
100 //启用反锯齿
101 QPainter painter(this);
102 painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
103
104 //绘制背景
105 drawBackGround(&painter);
106
107 //绘制滑块
108 drawSlider(&painter);
109 }
110
111 void SwitchButton::mousePressEvent(QMouseEvent *ev)
112 {
113 Q_UNUSED(ev)
114
115 m_checked = !m_checked;
116 emit statusChanged(m_checked);
117
118 //计算步长
119 m_step = width() / 10;
120
121 //计算滑块X轴终点坐标
122 if (m_checked) {
123 m_endX = width() - height();
124 } else {
125 m_endX = 0;
126 }
127
128 //判断是否使用动画
129 if (m_animation) {
130 m_timer->start();
131 } else{
132 m_startX = m_endX;
133 update();
134 }
135 }
136
137 void SwitchButton::updateValue()
138 {
139 if (m_checked) {
140 if (m_startX < m_endX) {
141 m_startX += m_step;
142 } else {
143 m_startX = m_endX;
144 m_timer->stop();
145 }
146 } else {
147 if (m_startX > m_endX) {
148 m_startX -= m_step;
149 } else {
150 m_startX = m_endX;
151 m_timer->stop();
152 }
153 }
154
155 update();
156 }
157
158 int SwitchButton::space() const
159 {
160 return m_space;
161 }
162
163 int SwitchButton::radius() const
164 {
165 return m_radius;
166 }
167
168 bool SwitchButton::checked() const
169 {
170 return m_checked;
171 }
172
173 bool SwitchButton::showText() const
174 {
175 return m_showText;
176 }
177
178 bool SwitchButton::showCircel() const
179 {
180 return m_showCircle;
181 }
182
183 bool SwitchButton::animation() const
184 {
185 return m_animation;
186 }
187
188 QColor SwitchButton::bgColorOn() const
189 {
190 return m_bgColorOn;
191 }
192
193 QColor SwitchButton::bgColorOff() const
194 {
195 return m_bgColorOff;
196 }
197
198 QColor SwitchButton::sliderColorOn() const
199 {
200 return m_sliderColorOn;
201 }
202
203 QColor SwitchButton::sliderColorOff() const
204 {
205 return m_sliderColorOff;
206 }
207
208 QColor SwitchButton::textColor() const
209 {
210 return m_textColor;
211 }
212
213 QString SwitchButton::textOn() const
214 {
215 return m_textOn;
216 }
217
218 QString SwitchButton::textOff() const
219 {
220 return m_textOff;
221 }
222
223 int SwitchButton::step() const
224 {
225 return m_step;
226 }
227
228 int SwitchButton::startX() const
229 {
230 return m_startX;
231 }
232
233 int SwitchButton::endX() const
234 {
235 return m_endX;
236 }
237
238 void SwitchButton::setSpace(int space)
239 {
240 if (m_space != space) {
241 m_space = space;
242 update();
243 }
244 }
245
246 void SwitchButton::setRadius(int radius)
247 {
248 if (m_radius != radius) {
249 m_radius = radius;
250 update();
251 }
252 }
253
254 void SwitchButton::setChecked(bool checked)
255 {
256 if (m_checked != checked) {
257 m_checked = checked;
258 update();
259 }
260 }
261
262 void SwitchButton::setShowText(bool show)
263 {
264 if (m_showText != show) {
265 m_showText = show;
266 update();
267 }
268 }
269
270 void SwitchButton::setShowCircle(bool show)
271 {
272 if (m_showCircle != show) {
273 m_showCircle = show;
274 update();
275 }
276 }
277
278 void SwitchButton::setAnimation(bool ok)
279 {
280 if (m_animation != ok) {
281 m_animation = ok;
282 update();
283 }
284 }
285
286 void SwitchButton::setBgColorOn(const QColor &color)
287 {
288 if (m_bgColorOn != color) {
289 m_bgColorOn = color;
290 update();
291 }
292 }
293
294 void SwitchButton::setBgColorOff(const QColor &color)
295 {
296 if (m_bgColorOff != color) {
297 m_bgColorOff = color;
298 update();
299 }
300 }
301
302 void SwitchButton::setSliderColorOn(const QColor &color)
303 {
304 if (m_sliderColorOn != color) {
305 m_sliderColorOn = color;
306 update();
307 }
308 }
309
310 void SwitchButton::setSliderColorOff(const QColor &color)
311 {
312 if (m_sliderColorOff != color) {
313 m_sliderColorOff = color;
314 update();
315 }
316 }
317
318 void SwitchButton::setTextColor(const QColor &color)
319 {
320 if (m_textColor != color) {
321 m_textColor = color;
322 update();
323 }
324 }
325
326 void SwitchButton::setTextOn(const QString &text)
327 {
328 if (m_textOn != text) {
329 m_textOn = text;
330 update();
331 }
332 }
333
334 void SwitchButton::setTextOff(const QString &text)
335 {
336 if (m_textOff != text) {
337 m_textOff = text;
338 update();
339 }
340 }
341
342 //void SwitchButton::setStep(int step)
343 //{
344 // if (m_step != step) {
345 // m_step = step;
346 // update();
347 // }
348 //}
349
350 //void SwitchButton::setStartX(int startX)
351 //{
352
353 //}
354
355 //void SwitchButton::setEndX(int endX)
356 //{
357
358 //}
<?xmlversion="1.0"encoding="UTF-8"?>
<uiversion="4.0">
<class>FrameSwitchButtons</class>
<widgetclass="QWidget"name="FrameSwitchButtons">
<propertyname="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>417</width>
<height>310</height>
</rect>
</property>
<propertyname="windowTitle">
<string>FrameSwitchButtons</string>
</property>
<layoutclass="QHBoxLayout"name="horizontalLayout">
<item>
<spacername="horizontalSpacer">
<propertyname="orientation">
<enum>Qt::Horizontal</enum>
</property>
<propertyname="sizeHint"stdset="0">
<size>
<width>140</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
<item>
<layoutclass="QVBoxLayout"name="verticalLayout">
<item>
<spacername="verticalSpacer">
<propertyname="orientation">
<enum>Qt::Vertical</enum>
</property>
<propertyname="sizeHint"stdset="0">
<size>
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
<item>
<widgetclass="SwitchButton"name="switchBtn1"native="true">
<propertyname="minimumSize">
<size>
<width>100</width>
<height>40</height>
</size>
</property>
</widget>
</item>
<item>
<widgetclass="SwitchButton"name="switchBtn2"native="true">
<propertyname="minimumSize">
<size>
<width>100</width>
<height>40</height>
</size>
</property>
</widget>
</item>
<item>
<widgetclass="SwitchButton"name="switchBtn3"native="true">
<propertyname="minimumSize">
<size>
<width>100</width>
<height>40</height>
</size>
</property>
</widget>
</item>
<item>
<spacername="verticalSpacer_2">
<propertyname="orientation">
<enum>Qt::Vertical</enum>
</property>
<propertyname="sizeHint"stdset="0">
<size>
<width>20</width>
<height>40</height>
</size>
</property>
</spacer>
</item>
</layout>
</item>
<item>
<spacername="horizontalSpacer_2">
<propertyname="orientation">
<enum>Qt::Horizontal</enum>
</property>
<propertyname="sizeHint"stdset="0">
<size>
<width>139</width>
<height>20</height>
</size>
</property>
</spacer>
</item>
</layout>
</widget>
<layoutdefaultspacing="6"margin="11"/>
<customwidgets>
<customwidget>
<class>SwitchButton</class>
<extends>QWidget</extends>
<header>switchbutton.h</header>
<container>1</container>
</customwidget>
</customwidgets>
<resources/>
<connections/>
</ui>
