Qt编写自定义控件一开关按钮

liudianwu

从2010年进入互联网+智能手机时代以来，各种各样的APP大行其道，手机上面的APP有很多流行的元素，开关按钮个人非常喜欢，手机QQ、360卫士、金山毒霸等，都有很多开关控制一些操作，在Qt widgets应用项目上，在项目中应用些类似的开关按钮，估计也会为项目增添不少新鲜感。

总结了大部分的开关按钮控件，基本上有两大类，第一类是纯代码绘制，这种对代码的掌控度要求比较高，但是灵活性比较好。第二类是贴图，专业的美工做好的各种状态的背景图片，只需要用代码将该图片画到界面上即可。为了能够涵盖两大类的开关按钮，特意将常见的四种类型（圆角矩形/内圆形/外圆形/图片）都集成到了自定义的开关按钮中。

运行效果：

1：纯代码绘制

纯代码绘制开关按钮，可以很灵活的设置各种颜色、间隔、文字等，还可以产生动画过度的滑动效果。

产生滑动效果采用定时器绘制的方式，自动计算滑块的X轴开始坐标，当滑块的X轴开始坐标到达滑块的X轴结束坐标时停止定时器。

1. void SwitchButton::updateValue()
   
2. {
   
3.     if (checked) {
   
4.         if (startX < endX) {
   
5.             startX = startX + step;
   
6.         } else {
   
7.             startX = endX;
   
8.             timer->stop();
   
9.         }
   
10.     } else {
    
11.         if (startX > endX) {
    
12.             startX = startX - step;
    
13.         } else {
    
14.             startX = endX;
    
15.             timer->stop();
    
16.         }
    
17.     }
    
18. 
    
19.     update();
    
20. }

复制代码

2：贴图绘制

1. void SwitchButton::drawImage(QPainter *painter)
   
2. {
   
3.     painter->save();
   
4. 
   
5.     QPixmap pix;
   
6. 
   
7.     if (!checked) {
   
8.         pix = QPixmap(imageOff);
   
9.     } else {
   
10.         pix = QPixmap(imageOn);
    
11.     }
    
12. 
    
13.     //自动等比例平滑缩放居中显示
    
14.     int targetWidth = pix.width();
    
15.     int targetHeight = pix.height();
    
16.     pix = pix.scaled(targetWidth, targetHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);
    
17. 
    
18.     int pixX = rect().center().x() - targetWidth / 2;
    
19.     int pixY = rect().center().y() - targetHeight / 2;
    
20.     QPoint point(pixX, pixY);
    
21.     painter->drawPixmap(point, pix);
    
22. 
    
23.     painter->restore();
    
24. }

复制代码

有些人说PS一张精美的图片也不是很容易，需要专业的，这里推荐一个好方法，让你也可以获取到这些图片，其实大部分的APP都可以用解压软件打开，拓展名改为.zip即可，解压出来一般里面都含有绝大部分的图片，发现绝大部分的APP都喜欢用图片作为背景来展示一些效果，而不是原原本本的用代码一点点绘制。腾讯就是腾讯啊，大公司！人家的美工MM设计的图片那真的没得话说，绝对一流，手机QQ每次升级一个版本，我都会下过来将里面的精美图片图标之类的提取出来，以便项目使用。同时还推荐两个网站：http://www.easyicon.net/ 我的所有项目用到的ico图标都是这网站上面的。http://www.ui.cn/专业的设计师集中营，这里面成千上万的精美的设计的图片，可以多多参考。

完整代码：帖子长度限制不能贴上来。

此自定义控件集成在QFramework中。

自定义控件可执行文件下载：http://pan.baidu.com/s/1i5iCfzv

QFramework简介：

QFramework是一套通用的Qt程序开发框架，集成主界面布局、各种自定义控件、数据库处理、excel极速导出、数据打印、串口通信、网络通信、协议解析、全局热键、邮件发送，短信发送，百度地图调用、ffmpeg+vlc处理等功能，将常用的功能封装成类库，提供统一直观的调用接口，方便使用者使用，对应封装的库都有对应的demo程序。QQ：517216493

QFramework基本功能：

1：支持从4.7.0到5.7.0的任何Qt版本，不受版本限制。用了此框架，不会再有Qt版本不同而引起的程序编译通不过的烦恼。

2：极速导出数据到excel，支持表格数据或者查询的数据，不依赖任何组件，支持任何excel、wps等表格软件版本，导出10万行数据8个字段只需要3秒完成。对导出的表格样式可自定义主标题和副标题，可对导出的数据按照指定条件红色突出显示。

3：数据导出到pdf及打印功能，支持表格数据或者查询的数据，支持横向纵向打印，自动分页。

4：数据分页dbapi类，只需传入表格对象，表名，翻页按钮即可。无需再写重复的方法处理翻页。

5：各种自定义控件，例如开关按钮、发光按钮，仪表盘控件、音量控件、温湿度控件、仪表仪器类控件等。

6：全新超级中英双拼输入法，非常适合触摸设备。

7：全局热键处理。

8：串口热敏打印机打印。

9：qcustomplot 2D图形曲线绘制（含鼠标数据跟踪）。

10：多线程邮件发送，支持多个接收邮箱。

11：多线程短信发送，支持多个接收号码及长短信。

12：Qffmpeg+Qvlc视频处理。

13：取字模，字符转LED数据处理。

14：全局日志输出类 applog，可动态挂载和卸载。

15：全局程序控制类 a**ey，可控制程序的使用时间、运行时间、设备数量限制等。

16：封装百度地图调用接口，支持设备标注、路线查询、位置显示等。

17：自动清理程序早期数据类 cleanapi，传入要清理的数据库表名，执行间隔，保留的最大记录数即可。这样保证了整个系统存储的都是最新的数据。

18：NTP校时服务程序。

19：全局截图处理，可以很方便的直接在ARM上对程序进行截图。

20：程序存活检测功能 applive，通过udp通信实时发送心跳命令，这样可以保证程序7*24小时运行，在ARM上可采用appdog看门狗程序。

21：已运行时间+当前时间+实时CPU使用率+实时内存使用率等。

22：自定义程序主界面底部信息。

23：Echart图表的交互使用。

ddxvip

有源码分享下吗，自定义控件的……