项目实战:Qt圆形百分比进度控件基础设计构架Demo

若该文为原创文章,转载请注明出处

本文章博客地址:https://hpzwl.blog.csdn.net/article/details/161200392

长沙红胖子Qt(长沙创微智科)博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等)持续更新中...

Qt开发专栏:项目实战(点击传送门)

需求

  通用圆形百分比进度控件。

  1.三圈背景圈

  2.进度条

  3.百分比显示

  4.颜色可调,圈粗细可变化,颜色可变化

  尽可能预留常用的属性与接口,方便后续整理与现场调试修改,减少临时修改代码和提高需求变更维护效率。

Demo_v1.0.0: circleProgressDemo v1.0.0

  

  

  

  

下载

  windows 运行包下载地址 CSDNf粉丝0积分下载:https://download.csdn.net/download/qq21497936/92883041

  QQ技术群,进Q群,点击"文件"搜索"circleProgressDemo",群内与博文同步更新)

关键源码

cpp 复制代码
void CirclePercentWidget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    drawBackground(&painter);
    drawCircle(&painter);
    drawProgress(&painter);
    drawText(&painter);
}

void CirclePercentWidget::drawBackground(QPainter *painter)
{
    painter->save();

    painter->fillRect(rect(), _backgroundColor);

    painter->restore();
}

void CirclePercentWidget::drawCircle(QPainter *painter)
{
    painter->save();

    painter->setBackground(Qt::transparent);

    painter->setPen(QPen(_circleColor1, _circleWidth1));
    int radius = _radius;

    radius = _radius - _circleSpace1 - _circleWidth1 / 2;
    painter->drawEllipse(_centerPointF, radius, radius);

    painter->setPen(QPen(_circleColor2, _circleWidth2));
    radius = _radius - _circleSpace1 - _circleWidth1 - _circleSpace2 - _circleWidth2 / 2;
    painter->drawEllipse(_centerPointF, radius, radius);

    painter->setPen(QPen(_circleColor3, _circleWidth3));
    radius = _radius - _circleSpace1 - _circleWidth1 - _circleSpace2 - _circleWidth2 - _circleSpace3 - _circleWidth3 / 2;
    painter->drawEllipse(_centerPointF, radius, radius);

    painter->restore();
}

void CirclePercentWidget::drawProgress(QPainter *painter)
{
    painter->save();

    painter->setPen(QPen(_progressColor, _circleProgressWidth, Qt::SolidLine, Qt::RoundCap));
    int radius = _radius - _circleProgressSpace - _circleProgressWidth / 2;
//    painter->drawEllipse(_centerPointF, radius, radius);
    painter->drawArc(_centerPointF.x() - radius, _centerPointF.y() - radius, radius * 2, radius * 2, 90 * 16, -_value * 16 * 3.6);

    painter->restore();
}

void CirclePercentWidget::drawText(QPainter *painter)
{
    painter->save();

    painter->setFont(_textFont);
    painter->setPen(QPen(_textColor));
    painter->drawText(                 0, _textYOffset, rect().width() / 2 + _textXOffset, rect().height() / 2 + _textYOffset, Qt::AlignRight | Qt::AlignBottom, QString("%1").arg(_value));

    painter->setFont(_labelFont);
    painter->setPen(QPen(_textColor));
    painter->drawText(rect().width() / 2 + 4 + _textXOffset, _textYOffset, rect().width() / 2 + _textXOffset, rect().height() / 2 + _textYOffset, Qt::AlignLeft | Qt::AlignBottom, "%");

    painter->setFont(_tipFont);
    painter->setPen(QPen(_labelColor));
    painter->drawText(0, 10 + _textYOffset, rect().width(), rect().height() + 10 + _textYOffset, Qt::AlignHCenter | Qt::AlignVCenter, _text);

    painter->restore();
}

工程模板v1.0.0

  

本文章博客地址:https://hpzwl.blog.csdn.net/article/details/161200392

相关推荐
Quz7 小时前
QML 动画选择:GIF与Lottie 的区别,以及 Qt 6.8 与 6.11 的 Lottie 实现差异
qt
时间的拾荒人10 小时前
Qt 界面美化实战:QSS 样式表
开发语言·qt·面试
qq_4017004112 小时前
Qt 串口/网口通信:Hex 与 ASCII 编码转换深度指南
开发语言·数据库·qt
Python图像识别20 小时前
30-【2027毕设】YOLO11管道缺陷检测识别系统 - Python完整源码+PyQt5界面+训练模型+数据集
python·qt·课程设计
道尔柯南21 小时前
【QT】从零认识 Qt:跨平台 C++ GUI 开发入门
开发语言·c++·qt
MayZork21 小时前
std::filesystem 文件操作详解
开发语言·c++·qt
kaixin_learn_qt_ing1 天前
[银河麒麟]因为没有安装串口相关驱动,导致无法检测到对应的串口,后来安装后,我的qt的相关接口就可以识别到了
qt
Cx330❀2 天前
Qt 多线程深度解析:从底层原理到 UI 线程与同步实战
开发语言·qt·ui·搜索引擎·性能优化·图形渲染
西西弗Sisyphus2 天前
Qt6 实现 会动的界面像物理世界一样
c++·qt
MayZork2 天前
Qt 开发集成CMake + vcpkg
开发语言·c++·qt