一、前言

现在这个时代,智能手机不要太流行,满大街都是,甚至连爷爷奶奶级别的人都会用智能手机,本次要写的控件就是智能手机中的电池电量表示控件,采用纯painter绘制,其实也可以采用贴图,我估计大部分手机上的都是采用贴图的形式,贴图有个好处就是程序员不用操心,drawimage即可,速度非常快。 至于本控件没有任何技术难点,就是自动计算当前设置的电量,根据宽度的比例划分100个等分,每个等分占用多少个像素,然后电量*该比例就是要绘制的电量的区域,可以设置报警电量,低于该变量整个电池电量区域红色显示。

主要功能:

  1. 可设置开关按钮的样式 圆角矩形/内圆形/外圆形
  2. 可设置选中和未选中时的背景颜色
  3. 可设置选中和未选中时的滑块颜色
  4. 可设置显示的文本
  5. 可设置滑块离背景的间隔
  6. 可设置圆角角度
  7. 可设置是否显示动画过渡效果

二、代码思路

void Battery::paintEvent(QPaintEvent *)
{//绘制准备工作,启用反锯齿QPainter painter(this);painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);//绘制边框drawBorder(&painter);//绘制背景drawBg(&painter);//绘制头部drawHead(&painter);
}void Battery::drawBorder(QPainter *painter)
{painter->save();double headWidth = width() / 10;double batteryWidth = width() - headWidth;//绘制电池边框QPointF topLeft(5, 5);QPointF bottomRight(batteryWidth, height() - 5);batteryRect = QRectF(topLeft, bottomRight);painter->setPen(QPen(borderColorStart, 5));painter->setBrush(Qt::NoBrush);painter->drawRoundedRect(batteryRect, borderRadius, borderRadius);painter->restore();
}void Battery::drawBg(QPainter *painter)
{painter->save();QLinearGradient batteryGradient(QPointF(0, 0), QPointF(0, height()));if (currentValue <= alarmValue) {batteryGradient.setColorAt(0.0, alarmColorStart);batteryGradient.setColorAt(1.0, alarmColorEnd);} else {batteryGradient.setColorAt(0.0, normalColorStart);batteryGradient.setColorAt(1.0, normalColorEnd);}int margin = qMin(width(), height()) / 20;double unit = (batteryRect.width() - (margin * 2)) / 100;double width = currentValue * unit;QPointF topLeft(batteryRect.topLeft().x() + margin, batteryRect.topLeft().y() + margin);QPointF bottomRight(width + margin + 5, batteryRect.bottomRight().y() - margin);QRectF rect(topLeft, bottomRight);painter->setPen(Qt::NoPen);painter->setBrush(batteryGradient);painter->drawRoundedRect(rect, bgRadius, bgRadius);painter->restore();
}void Battery::drawHead(QPainter *painter)
{painter->save();QPointF headRectTopLeft(batteryRect.topRight().x(), height() / 3);QPointF headRectBottomRight(width(), height() - height() / 3);QRectF headRect(headRectTopLeft, headRectBottomRight);QLinearGradient headRectGradient(headRect.topLeft(), headRect.bottomLeft());headRectGradient.setColorAt(0.0, borderColorStart);headRectGradient.setColorAt(1.0, borderColorEnd);painter->setPen(Qt::NoPen);painter->setBrush(headRectGradient);painter->drawRoundedRect(headRect, headRadius, headRadius);painter->restore();
}

三、效果图

四、开源主页

以上作品完整源码下载都在开源主页,会持续不断更新作品数量和质量,欢迎各位关注。

  1. 国内站点:https://gitee.com/feiyangqingyun/QWidgetDemo
  2. 国际站点:https://github.com/feiyangqingyun/QWidgetDemo
  3. 个人主页:https://blog.csdn.net/feiyangqingyun
  4. 知乎主页:https://www.zhihu.com/people/feiyangqingyun/

qt设置圆形按钮_Qt开源作品25-电池电量控件相关推荐

  1. qt 进度条_Qt开源作品12-硬盘容量控件

    一.前言 磁盘容量统计控件,说白了,就是用来统计本地盘符占用的容量,包括但不限于已用空间.剩余空间.总大小.已用百分比等,其中对应的百分比采用进度条显示,该进度条的前景色和背景色及文字颜色可以设置,在 ...

  2. qt设置边框颜色_Qt开源作品14-导航按钮控件

    ## 一.前言 导航按钮控件,主要用于各种漂亮精美的导航条,我们经常在web中看到导航条都非常精美,都是html+css+js实现的,还自带动画过度效果,Qt提供的qss其实也是无敌的,支持基本上所有 ...

  3. Qt自定义控件的实践——电池电量控件

    一.介绍 上一篇我们绘制了一个自定义的slider控件,现在我们再绘制一个电池控件,它可调节电池电量. 二.步骤 新建Battery类 battery.h #ifndef BATTERY_H #def ...

  4. qt widget设置边框_Qt开源作品16-通用无边框拖动拉伸

    ## 一.前言 相信各位CS结构开发的程序员,多多少少都遇到过需要美化界面的事情,一般都不会采用系统的标题栏,这样就需要无边框标题栏窗体,默认的话无边框的标题栏都不支持拉伸和拖动的,毕竟去掉了标题栏则 ...

  5. qt显示rgba8888 如何改 frame_Qt开源作品17-IP地址输入控件

    一.前言 这个IP地址输入框控件,估计写烂了,网上随便一搜索,保证一大堆,估计也是因为这个控件太容易了,非常适合新手练手,一般的思路都是用4个qlineedit控件拼起来,然后每个输入框设置正则表达式 ...

  6. Qt开源作品33-图片开关控件

    一.前言 进入智能手机时代以来,各种各样的APP大行其道,手机上面的APP有很多流行的元素,开关按钮个人非常喜欢,手机QQ.360卫士.金山毒霸等,都有很多开关控制一些操作,在WINFORM项目上,如 ...

  7. 【QT开发笔记-基础篇】| 第二章 常用控件 | 2.12 表格控件 QTableWidget

    本节对应的视频讲解:B_站_链_接 QTableWidget 是 Qt 中的表格控件,可以行列的形式来展示数据 1. 属性和方法 QTableWidget 有很多属性和方法,完整的可查看帮助文档. 在 ...

  8. QT实现Qt Quick和three.js渲染和实现QML3D控件

    QT实现Qt Quick和three.js渲染和实现QML3D控件 项目简介 项目技术 项目展示 主要源码片段解析 获取完整项目源码传送门 项目简介 结合Qt Quick和three.js渲染. 演示 ...

  9. VS2008 在IE8中 调试 ActiveX控件 无法进入断点的解决方法 设置VS2008和IE8 调试ATL MFC ActiveX控件

    VS2008 在IE8中 调试 ActiveX控件 无法进入断点的解决方法 设置VS2008和IE8 调试ATL MFC ActiveX控件 参考文章: (1)VS2008 在IE8中 调试 Acti ...

最新文章

  1. 生成Gif动画缩略图-Gif动画水印的改进
  2. 计算机扬天m400c联想,【联想扬天M参数】联想扬天M系列台式电脑参数-ZOL中关村在线...
  3. 关于python_关于python的基础知识
  4. Java 答疑:JDK 11(Java 11)之后没有 JRE 目录,环境用户变量配置的解决方法
  5. Android之back键拦截处理
  6. Web前端-JavaScript基础教程下
  7. 利用阿里云提供的镜像快速更换本地的yum源
  8. 对软件工程Alpha迭代的反思与总结
  9. ios怎么引入masonry_iOS Masonry的使用需要注意的地方
  10. Atitit 资源类型的分类法规范MIME类型类型 目录 1.1. 一个MIME类型至少包括两个部分:一个类型(type)和一个子类型(subtype)。 1 1.2. 命名格式MIME类型包括一个
  11. Server concepts 详解
  12. qlineedit限制输入数字_请注意:输入设计需要这些交互反馈
  13. NDK开发(一)————如何在Android Studio下进行NDK开发
  14. 除了装去广告软件,你还能通过「禁止APP联网」来屏蔽广告
  15. 211逆袭浙大-计算机及相关衍生专业保研之路纪实(深度长文,收藏了)
  16. react全家桶指的是哪些?
  17. C语言经典题目(一)
  18. 如何将证件照的休闲装变职业装
  19. cocos2d-x基本面试题
  20. 阿里云 mysql自动备份数据库_MySQL定时备份数据库(全库备份)

热门文章

  1. 介绍一个好用的日期倒计时工具
  2. run sequence between odata request and controller init
  3. push failed in WebIDE
  4. Backbone - create model的实现原理
  5. Fiori navigation list scroll down后自动发OData请求取数据
  6. Cloud for Customer的工作中心(work center)加载源代码
  7. How to handle the generic error Cannot read property md of undefined
  8. transaction type popup window when create service order
  9. SAP ABAP实用技巧介绍系列之如何生成值为NULL的table row
  10. One order Report framework search code debug