-
UID:110085
-
- 注册时间2010-12-21
- 最后登录2024-04-28
- 在线时间3538小时
-
- 发帖2742
- 搜Ta的帖子
- 精华2
- 金钱32733
- 威望3371
- 贡献值589
- 好评度3389
-
访问TA的空间加好友用道具
|
从2010年进入互联网+智能手机时代以来,各种各样的APP大行其道,手机上面的APP有很多流行的元素,开关按钮个人非常喜欢,手机QQ、360卫士、金山毒霸等,都有很多开关控制一些操作,在Qt widgets应用项目上,在项目中应用些类似的开关按钮,估计也会为项目增添不少新鲜感。总结了大部分的开关按钮控件,基本上有两大类,第一类是纯代码绘制,这种对代码的掌控度要求比较高,但是灵活性比较好。第二类是贴图,专业的美工做好的各种状态的背景图片,只需要用代码将该图片画到界面上即可。为了能够涵盖两大类的开关按钮,特意将常见的四种类型(圆角矩形/内圆形/外圆形/图片)都集成到了自定义的开关按钮中。 运行效果: 1:纯代码绘制纯代码绘制开关按钮,可以很灵活的设置各种颜色、间隔、文字等,还可以产生动画过度的滑动效果。产生滑动效果采用定时器绘制的方式,自动计算滑块的X轴开始坐标,当滑块的X轴开始坐标到达滑块的X轴结束坐标时停止定时器。 - void SwitchButton::updateValue()
- {
- if (checked) {
- if (startX < endX) {
- startX = startX + step;
- } else {
- startX = endX;
- timer->stop();
- }
- } else {
- if (startX > endX) {
- startX = startX - step;
- } else {
- startX = endX;
- timer->stop();
- }
- }
-
- update();
- }
2:贴图绘制 - void SwitchButton::drawImage(QPainter *painter)
- {
- painter->save();
-
- QPixmap pix;
-
- if (!checked) {
- pix = QPixmap(imageOff);
- } else {
- pix = QPixmap(imageOn);
- }
-
- //自动等比例平滑缩放居中显示
- int targetWidth = pix.width();
- int targetHeight = pix.height();
- pix = pix.scaled(targetWidth, targetHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);
-
- int pixX = rect().center().x() - targetWidth / 2;
- int pixY = rect().center().y() - targetHeight / 2;
- QPoint point(pixX, pixY);
- painter->drawPixmap(point, pix);
-
- painter->restore();
- }
有些人说PS一张精美的图片也不是很容易,需要专业的,这里推荐一个好方法,让你也可以获取到这些图片,其实大部分的APP都可以用解压软件打开,拓展名改为.zip即可,解压出来一般里面都含有绝大部分的图片,发现绝大部分的APP都喜欢用图片作为背景来展示一些效果,而不是原原本本的用代码一点点绘制。腾讯就是腾讯啊,大公司!人家的美工MM设计的图片那真的没得话说,绝对一流,手机QQ每次升级一个版本,我都会下过来将里面的精美图片图标之类的提取出来,以便项目使用。同时还推荐两个网站:http://www.easyicon.net/ 我的所有项目用到的ico图标都是这网站上面的。http://www.ui.cn/专业的设计师集中营,这里面成千上万的精美的设计的图片,可以多多参考。 完整代码: switchbutton.hswitchbutton.cpp- #include "switchbutton.h"
- #include "qpainter.h"
- #include "qevent.h"
- #include "qtimer.h"
- #include "qdebug.h"
- SwitchButton::SwitchButton(QWidget *parent): QWidget(parent)
- {
- checked = false;
- buttonStyle = ButtonStyle_Rect;
- bgColorOff = QColor(225, 225, 225);
- bgColorOn = QColor(250, 250, 250);
- sliderColorOff = QColor(100, 100, 100);
- sliderColorOn = QColor(100, 184, 255);
- textColorOff = QColor(255, 255, 255);
- textColorOn = QColor(10, 10, 10);
- textOff = "";
- textOn = "";
- imageOff = ":/image/btncheckoff1.png";
- imageOn = ":/image/btncheckon1.png";
- space = 2;
- rectRadius = 5;
- step = width() / 50;
- startX = 0;
- endX = 0;
- timer = new QTimer(this);
- timer->setInterval(5);
- connect(timer, SIGNAL(timeout()), this, SLOT(updateValue()));
- setFont(QFont("Microsoft Yahei", 10));
- }
- SwitchButton::~SwitchButton()
- {
- }
- void SwitchButton::mousePressEvent(QMouseEvent *)
- {
- checked = !checked;
- emit checkedChanged(checked);
- //每次移动的步长为宽度的 50分之一
- step = width() / 50;
- //状态切换改变后自动计算终点坐标
- if (checked) {
- if (buttonStyle == ButtonStyle_Rect) {
- endX = width() - width() / 2;
- } else if (buttonStyle == ButtonStyle_CircleIn) {
- endX = width() - height();
- } else if (buttonStyle == ButtonStyle_CircleOut) {
- endX = width() - height() + space;
- }
- } else {
- endX = 0;
- }
- timer->start();
- }
- void SwitchButton::resizeEvent(QResizeEvent *)
- {
- //每次移动的步长为宽度的 50分之一
- step = width() / 50;
- //尺寸大小改变后自动设置起点坐标为终点
- if (checked) {
- if (buttonStyle == ButtonStyle_Rect) {
- startX = width() - width() / 2;
- } else if (buttonStyle == ButtonStyle_CircleIn) {
- startX = width() - height();
- } else if (buttonStyle == ButtonStyle_CircleOut) {
- startX = width() - height() + space;
- }
- } else {
- startX = 0;
- }
- update();
- }
- void SwitchButton::paintEvent(QPaintEvent *)
- {
- //绘制准备工作,启用反锯齿
- QPainter painter(this);
- painter.setRenderHint(QPainter::Antialiasing);
- if (buttonStyle == ButtonStyle_Image) {
- //绘制图片
- drawImage(&painter);
- } else {
- //绘制背景
- drawBg(&painter);
- //绘制滑块
- drawSlider(&painter);
- //绘制文字
- drawText(&painter);
- }
- }
- void SwitchButton::drawBg(QPainter *painter)
- {
- painter->save();
- painter->setPen(Qt::NoPen);
- if (!checked) {
- painter->setBrush(bgColorOff);
- } else {
- painter->setBrush(bgColorOn);
- }
- if (buttonStyle == ButtonStyle_Rect) {
- painter->drawRoundedRect(rect(), rectRadius, rectRadius);
- } else if (buttonStyle == ButtonStyle_CircleIn) {
- QRect rect(0, 0, width(), height());
- //半径为高度的一半
- int radius = rect.height() / 2;
- //圆的宽度为高度
- int circleWidth = rect.height();
- QPainterPath path;
- path.moveTo(radius, rect.left());
- path.arcTo(QRectF(rect.left(), rect.top(), circleWidth, circleWidth), 90, 180);
- path.lineTo(rect.width() - radius, rect.height());
- path.arcTo(QRectF(rect.width() - rect.height(), rect.top(), circleWidth, circleWidth), 270, 180);
- path.lineTo(radius, rect.top());
- painter->drawPath(path);
- } else if (buttonStyle == ButtonStyle_CircleOut) {
- QRect rect(space, space, width() - space * 2, height() - space * 2);
- painter->drawRoundedRect(rect, rectRadius, rectRadius);
- }
- painter->restore();
- }
- void SwitchButton::drawSlider(QPainter *painter)
- {
- painter->save();
- painter->setPen(Qt::NoPen);
- if (!checked) {
- painter->setBrush(sliderColorOff);
- } else {
- painter->setBrush(sliderColorOn);
- }
- if (buttonStyle == ButtonStyle_Rect) {
- int sliderWidth = width() / 2 - space * 2;
- int sliderHeight = height() - space * 2;
- QRect sliderRect(startX + space, space, sliderWidth , sliderHeight);
- painter->drawRoundedRect(sliderRect, rectRadius, rectRadius);
- } else if (buttonStyle == ButtonStyle_CircleIn) {
- QRect rect(0, 0, width(), height());
- int sliderWidth = rect.height() - space * 2;
- QRect sliderRect(startX + space, space, sliderWidth, sliderWidth);
- painter->drawEllipse(sliderRect);
- } else if (buttonStyle == ButtonStyle_CircleOut) {
- QRect rect(0, 0, width() - space, height() - space);
- int sliderWidth = rect.height();
- QRect sliderRect(startX, space / 2, sliderWidth, sliderWidth);
- painter->drawEllipse(sliderRect);
- }
- painter->restore();
- }
- void SwitchButton::drawText(QPainter *painter)
- {
- painter->save();
- if (!checked) {
- painter->setPen(textColorOff);
- painter->drawText(width() / 2, 0, width() / 2 - space, height(), Qt::AlignCenter, textOff);
- } else {
- painter->setPen(textColorOn);
- painter->drawText(0, 0, width() / 2 + space * 2, height(), Qt::AlignCenter, textOn);
- }
- painter->restore();
- }
- void SwitchButton::drawImage(QPainter *painter)
- {
- painter->save();
- QPixmap pix;
- if (!checked) {
- pix = QPixmap(imageOff);
- } else {
- pix = QPixmap(imageOn);
- }
- //自动等比例平滑缩放居中显示
- int targetWidth = pix.width();
- int targetHeight = pix.height();
- pix = pix.scaled(targetWidth, targetHeight, Qt::KeepAspectRatio, Qt::SmoothTransformation);
- int pixX = rect().center().x() - targetWidth / 2;
- int pixY = rect().center().y() - targetHeight / 2;
- QPoint point(pixX, pixY);
- painter->drawPixmap(point, pix);
- painter->restore();
- }
- void SwitchButton::updateValue()
- {
- if (checked) {
- if (startX < endX) {
- startX = startX + step;
- } else {
- startX = endX;
- timer->stop();
- }
- } else {
- if (startX > endX) {
- startX = startX - step;
- } else {
- startX = endX;
- timer->stop();
- }
- }
- update();
- }
- void SwitchButton::setChecked(bool checked)
- {
- if (this->checked != checked) {
- this->checked = checked;
- emit checkedChanged(checked);
- update();
- }
- }
- void SwitchButton::setButtonStyle(SwitchButton::ButtonStyle buttonStyle)
- {
- this->buttonStyle = buttonStyle;
- update();
- }
- void SwitchButton::setBgColor(QColor bgColorOff, QColor bgColorOn)
- {
- this->bgColorOff = bgColorOff;
- this->bgColorOn = bgColorOn;
- update();
- }
- void SwitchButton::setSliderColor(QColor sliderColorOff, QColor sliderColorOn)
- {
- this->sliderColorOff = sliderColorOff;
- this->sliderColorOn = sliderColorOn;
- update();
- }
- void SwitchButton::setTextColor(QColor textColorOff, QColor textColorOn)
- {
- this->textColorOff = textColorOff;
- this->textColorOn = textColorOn;
- update();
- }
- void SwitchButton::setText(QString textOff, QString textOn)
- {
- this->textOff = textOff;
- this->textOn = textOn;
- update();
- }
- void SwitchButton::setImage(QString imageOff, QString imageOn)
- {
- this->imageOff = imageOff;
- this->imageOn = imageOn;
- update();
- }
- void SwitchButton::setSpace(int space)
- {
- this->space = space;
- update();
- }
- void SwitchButton::setRectRadius(int rectRadius)
- {
- this->rectRadius = rectRadius;
- update();
- }
此自定义控件集成在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:全局程序控制类 appkey,可控制程序的使用时间、运行时间、设备数量限制等。16:封装百度地图调用接口,支持设备标注、路线查询、位置显示等。17:自动清理程序早期数据类 cleanapi,传入要清理的数据库表名,执行间隔,保留的最大记录数即可。这样保证了整个系统存储的都是最新的数据。18:NTP校时服务程序。19:全局截图处理,可以很方便的直接在ARM上对程序进行截图。20:程序存活检测功能 applive,通过udp通信实时发送心跳命令,这样可以保证程序7*24小时运行,在ARM上可采用appdog看门狗程序。21:已运行时间+当前时间+实时CPU使用率+实时内存使用率等。22:自定义程序主界面底部信息。23:Echart图表的交互使用。
|