QT5 圆环渐变进度条

于 2024-08-09 18:25:49 发布
阅读量172 收藏 1
点赞数 4
文章标签： qt 开发语言 stm32
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fqm0_0/article/details/141060949
版权

使用 qt的Widget组件画圆环进度条

1.需要创建一个圆环类，继承QWidget

#ifndef CIRCULARPROGRESS_H
#define CIRCULARPROGRESS_H

#include <QWidget>
#include <QPainter>
#include <QTime>


//圆环进度类
class CircularProgress : public QWidget
{
    Q_OBJECT
public:
    explicit CircularProgress(QWidget *parent = nullptr);
            ~CircularProgress();

    int getVal();
    int getTargeVal();
    void setTargetVal(int val);

    //设置进度条初始范围值
    void setPlanVal(int val, int min , int max);

    //设置圆环显示的模式
    void setShowMode(bool mode);
    //圆环大小
    //void setCircleSizo(int x, int y);
    //圆环宽度
    void setWide(int wide);
    //设置单色进度条颜色
    void setPlanOneColor(Qt::GlobalColor base ,Qt::GlobalColor now);
    //渐变进度条
    void setPlanAtColor(Qt::GlobalColor base ,Qt::GlobalColor at_0, Qt::GlobalColor at_1);
    //设置圆环中心显示
    void setMiddleShow( Qt::GlobalColor base_c ,Qt::GlobalColor font_c,int font_size,QString str );

    void setUpdataShow(){
        update();
    };
signals:

protected:
    void paintEvent(QPaintEvent *e);


private:
    void drawCirculaProgess(QPainter *p);//画圆环
    void timerTargetUpdateShow();


private:

//
//    int c_fixedSize_h;// 外圆大小，使用UI时设计好大小
//    int c_fixedSize_d;// 外圆大小，使用UI时设计好大小

    int c_wide;//圆环宽度
// 进度条百分百数值范围

    int m_val = 0 ;//当前值
    int m_min = 0 ;//最小值
    int m_max = 100 ;//最大值

    int m_target_val = 0;//目标值

//
    bool c_mode;//0不渐变，1 渐变

    Qt::GlobalColor c_plan_base;//圆环进度底色
    Qt::GlobalColor c_plan_one;//进度条显示颜色
    Qt::GlobalColor c_plan_at_0;//渐变色0
    Qt::GlobalColor c_plan_at_1;//渐变色1

    Qt::GlobalColor c_mid_base;//中间底色
    Qt::GlobalColor c_mid_font;//中间显示字体颜色
    int c_mid_font_size;//字体大小
    QString c_mid_str_flag;//单位显示 “% ，°C ，kg”
//
    QTimer *timer;//定时器，匀速递增减




};

#endif // CIRCULARPROGRESS_H

2.源文件，封装一些简单的设置

#include "circularprogress.h"
#include <QDebug>
#include <QColor>

#include <QTimer>


CircularProgress::CircularProgress(QWidget *parent) : QWidget(parent)
{
    timer = new QTimer(this);

    connect(timer, &QTimer::timeout, this, &CircularProgress::timerTargetUpdateShow);

}

CircularProgress::~CircularProgress()
{

}

int CircularProgress::getVal()
{
    return m_val;//获取当前值
}
int CircularProgress::getTargeVal()
{
    return m_target_val;//获取当前值
}
void CircularProgress::setTargetVal(int val)
{
    timer->stop();

    if(val > m_max) {
        m_target_val =  m_max;
    }
    else if(val < m_min){
        m_target_val = m_min;
    }
    else{
        m_target_val = val;
    }

    if(m_target_val != m_val)
    {

       timer->start(2);
    }
   // update();//更新，重绘圆环
}

void CircularProgress::timerTargetUpdateShow()
{
    if(m_target_val != m_val)
    {
         if(m_target_val > m_val)
         {
            m_val++;
         }
         else
         {
            m_val--;
         }
    }
    else
    {
        timer->stop();
    }
    update();//更新，重绘圆环
}

void CircularProgress::setPlanVal(int val, int min, int max){
    m_val = val ;
    m_min = min;
    m_max = max;
}

void CircularProgress::setShowMode(bool mode)
{
    c_mode = mode ;
}

void CircularProgress::setWide(int wide)
{
    c_wide = wide;
}

void CircularProgress::setPlanOneColor(Qt::GlobalColor base, Qt::GlobalColor now)
{
    c_plan_base = base;
    c_plan_one = now;
}

void CircularProgress::setPlanAtColor(Qt::GlobalColor base, Qt::GlobalColor at_0, Qt::GlobalColor at_1)
{
    c_plan_base = base;
    c_plan_at_0 = at_0;
    c_plan_at_1 = at_1;
}


void CircularProgress::setMiddleShow(Qt::GlobalColor base_c, Qt::GlobalColor font_c, int font_size, QString str)
{
    c_mid_base = base_c;
    c_mid_font = font_c;
    c_mid_font_size = font_size;
    c_mid_str_flag = str;

}



void CircularProgress::paintEvent(QPaintEvent *e)
{
    Q_UNUSED(e);

    QPainter painter(this);
    //设置抗锯齿
    painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);

    drawCirculaProgess(&painter);

}


void CircularProgress::drawCirculaProgess(QPainter *p)
{

    //1.实心圆
    p->setPen( Qt::NoPen );
    p->setBrush( c_plan_base );//进度条底色
    p->drawEllipse( this->rect() );//根据矩形大小画圆

    //2.画伞型
    if(c_mode == 0)//单色
    {
       p->setBrush( c_plan_one );//单色
    }
    else//渐变
    {
        QConicalGradient coni( rect().center(), 90 );//渐变色
        coni.setColorAt(0, QColor( c_plan_at_1 ));// 结束颜色
        coni.setColorAt(1.0, QColor( c_plan_at_0 ));//起始颜色
        p->setBrush(coni );//
    }

    //3.计算伞型覆盖角度
    p->drawPie( rect() , 90*16 , - m_val *1.0 / (m_max - m_min) * 360 *16 );



    //4.制作圆环，获取当前矩形大小，缩小50像素
    p->setBrush(c_mid_base);//中心圆颜色
    QRect minRect = this->rect().adjusted(c_wide,c_wide,-c_wide,-c_wide);
    p->drawEllipse(minRect);//绘制伞型

    //在中心显示字体
    p->setPen( QPen( c_mid_font));//颜色
    QFont font = p->font();//字体设置
    font.setPixelSize(c_mid_font_size);//字体大小
    p->setFont( font );
    p->drawText( this->rect(),Qt::AlignCenter,QString::number(m_val) + c_mid_str_flag);



}

3.核心代码

void CircularProgress::drawCirculaProgess(QPainter *p)
{

    //1.实心圆
    p->setPen( Qt::NoPen );
    p->setBrush( c_plan_base );//进度条底色
    p->drawEllipse( this->rect() );//根据矩形大小画圆

    //2.画伞型
    if(c_mode == 0)//单色
    {
       p->setBrush( c_plan_one );//单色
    }
    else//渐变
    {
        QConicalGradient coni( rect().center(), 90 );//渐变色
        coni.setColorAt(0, QColor( c_plan_at_1 ));// 结束颜色
        coni.setColorAt(1.0, QColor( c_plan_at_0 ));//起始颜色
        p->setBrush(coni );//
    }

    //3.计算伞型覆盖角度
    p->drawPie( rect() , 90*16 , - m_val *1.0 / (m_max - m_min) * 360 *16 );



    //4.制作圆环，获取当前矩形大小，缩小50像素
    p->setBrush(c_mid_base);//中心圆颜色
    QRect minRect = this->rect().adjusted(c_wide,c_wide,-c_wide,-c_wide);
    p->drawEllipse(minRect);//绘制伞型

    //在中心显示字体
    p->setPen( QPen( c_mid_font));//颜色
    QFont font = p->font();//字体设置
    font.setPixelSize(c_mid_font_size);//字体大小
    p->setFont( font );
    p->drawText( this->rect(),Qt::AlignCenter,QString::number(m_val) + c_mid_str_flag);



}

//----------------------------------------------------------------------

代码写好后，直接调用就行了

调用有两种方式，

1.直接new一个CircularProgress，然后设置大小和位置。

2.在ui页面拉一个widget组件，然后提升为CircularProgress类

大小和位置直接在ui设计窗口就能设置，比较方便，本次实验就是这种方式。

然后在主页面调用

void mainWidget::spineInit()
{
    ui->c_spine_1->setShowMode(1);
    ui->c_spine_1->setWide(8);
    ui->c_spine_1->setPlanVal( 0,0,100 );
    //ui->c_spine_1->setPlanOneColor(Qt::gray,Qt::blue);
    ui->c_spine_1->setPlanAtColor(Qt::gray, Qt::green ,Qt::red);
    ui->c_spine_1->setMiddleShow(Qt::white , Qt::black, 12 , " %");
    ui->c_spine_1->setUpdataShow();

    ui->c_spine_2->setShowMode(0);
    ui->c_spine_2->setWide(8);
    ui->c_spine_2->setPlanVal( 40,0,100 );
    ui->c_spine_2->setPlanOneColor(Qt::gray,Qt::blue);
    ui->c_spine_2->setMiddleShow(Qt::white , Qt::black, 15 , " %");
    ui->c_spine_2->setUpdataShow();

}

运行效果显示

                                             

//简单使用环形进度条显示完成。

芯芯点灯
关注
Qt/C++编写自定义控件14-环形进度条
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
05-02 1708
前言 环形进度条，用来展示当前进度，为了满足大屏UI的需要特意定制，以前有个叫圆环进度条，不能满足项目需要，只能重新定做，以前的进度间距不能自适应分辨率，而且当前进度对应的反的进度不能单独设置颜色，即当前进度90%，剩余的10%也需要设置成不同的颜色，还有一个重要的功能是，能够指定多个警戒值，一旦超过或者小于该值，则当前进度自动切换到预先设定的警戒值颜色，而不需要用户自己去判断警戒值去设置警戒颜色...
PyQt5渐变圆环水波进度条+透明淡入(多线程信号)
热门推荐
m0_60394896的博客
04-30 1万+
PyQt5 - 渐变圆环+水波（正弦函数）漂亮进度条 多线程信号pyqtSignal控制 窗口透明， 淡入
QT环形进度条（圆形进度条）
最新发布
u012959478的博客
07-24 1605
在Qt自带的控件中，只有垂直进度条、水平进度条两种。在平时做页面开发时，有些时候会用到环形进度条。环形进度条可以在各种需要显示任务或操作进度的场景中使用，提供可视化的进度反馈，提升用户体验。本示例使用QT实现一个自定义环形进度条。实现这个功能主要两个重点：图形绘制和数值计算。
Qt环形进度条实现
weixin_42219627的博客
05-04 2600
Qt环形进度条实现
QT自定义控件——圆环进度条
wudipie的博客
03-27 1952
进度条应该是界面开发中最常用来做传输文件，加载配置等等待操作并可以提供一个直观的进度。 核心代码: 头文件 class RoundProgressBarPrivate; class LIB_CUSTOMCONTROLSSHARED_EXPORT RoundProgressBar : public QWidget { Q_OBJECT Q_PROPERTY(double minimum READ minimum WRITE setMinimum) Q_PROPERTY(doub
Qt自定义控件实现圆圈加载进度条
08-25
Qt自定义控件实现圆圈加载进度条 Qt自定义控件实现圆圈加载进度条是Qt开发中的一种常见需求，通过自定义控件可以实现圆圈加载进度条的效果。在这篇文章中，我们将详细介绍如何使用Qt实现圆圈加载进度条的步骤。 ...
Qt使用QWidget重绘实现圆环形渐变色进度条（支持不确定进度模式）
04-08
Qt中使用QWidget重绘实现圆环形渐变色进度条，支持不确定进度模式，支持设置背景图片，另外组件的整体尺寸，圆环粗细，各部分颜色，字体都是可以随意调整的，还支持QWidget的QSS语句调整背景色，外边框等，灵活度很...
Qt Qml圆形进度条动画（4分之3圆） 带进度条动画，类似汽车仪表盘动画
01-19
在本文中，我们将深入探讨如何使用Qt的QML模块创建一个圆形进度条动画，特别是实现四分之三圆的进度指示器，同时带有类似于汽车仪表盘的动态效果。Qt是一个跨平台的应用程序开发框架，广泛应用于桌面、移动和嵌入式...
qt 圆形进度条
11-03
qt 圆形进度条,多个样式,想免费但是要选资源分,实在没办法
Qt动态圆形进度条
12-27
Qt动态圆形进度条。 这个系非常非常漂亮滴。欢迎大家可以学习。
自定义Qt圆形进度条
01-14
自定义Qt圆形进度条。 非常漂亮。
简单环形条格进度条
06-07
Qt环境下的简单环形条格进度条实例
Qt绘制环形进度条（paintEvent）
Q泥T挖的博客
02-24 1807
基于Qt5.5.1 + msvc2013 环境，使用paintEvent事件对QWidget进行重绘，形成自定义控件。具备进度修改、颜色修改和大小修改等功能，适合初学者观看。
Qt 自定义控件环形进度条
FQJ19950804的博客
07-09 588
Qt 自定义控件环形进度条 效果如下，点击左上角按键，比例不断增大。 #ifndef PROGRESSARC_H #define PROGRESSARC_H #include <QWidget> #include <QColor> #include <QPainter> class ProgressArc : public QWidget { Q_OBJECT public: explicit ProgressArc(QWidget *parent =
QT圆形进度条（QT桌面项目光照强度检测）
m0_49476241的博客
05-24 2002
本篇文章我们讲解QT实现圆形进度条，并实现动态的效果。掌握好QPainter的实现我们可以做出非常多的好看的项目，希望大家好好的学习QPainter的绘制方法。
QT利用QPainter实现自定义圆弧进度条组件
u012959478的博客
07-16 1087
在可视化应用中，弧形进度条应用也比较广泛，本文示例封装了一个可复用、个性化的弧形进度条组件。本文示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。主要结构就是外围一圈圆角进度，中间加上标题和对应进度的百分比，进度条的起始角度和结束角度可以自行调整，这样的话进度条的开口就可以在左边右边上边下边等任意位置，通过调整角度就能实现。
Qt 环形进度条的绘制
figo_lyf001的博客
06-03 907
一直想要一个环形的进度条来显示物料余量，找了qchart，还有什么echart也看过了，都没有现成的轮子，所以就自己画了，其实也简单，就画几个圈圈就好了，先看看效果图，以及核心代码。
Qt5详细教程：实例演示窗体进度条
本资源是一份详细的Qt5教程，主要关注于C++编程在Qt环境中的应用。教程的起点是1.5进度条实例，旨在帮助读者逐步掌握基础的Qt开发技巧。首先，作者介绍了Qt环境的设置和基础知识，包括Qt简介，推荐使用Qt Creator...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值