Qt实战案例（23）——利用QProgressBar实现彩色进度条

一、项目介绍

利用QProgressBar实现彩色进度条，利用一个彩色渐变背景图，通过QImage获取背景图的颜色，然后来设置进度条QProgressBar，便可以实现动态彩色进度条(根据图片设定颜色)。

二、项目基本配置

新建一个Qt案例，项目名称为“ProgressBarTest”，基类选择“QWidget”，取消创建UI界面复选框的选中状态，完成项目创建。

三、UI界面设计

无UI界面

四、主程序实现

首先需要添加资源文件，这里添加资源文件image/1.png。添加资源文件的方法这里不进行详细介绍，不懂的可以自行查阅相关资料。

4.1 widget.h头文件

声明四个变量：进度条、标签、滑动条、图片：

public:
    QProgressBar *m_bar;
    QLabel       *m_value;
    QSlider      *m_slider;
    QImage       *m_image;

然后声明一个槽函数：

protected slots:
    void  onvalueChanged(int value);

4.2 widget.cpp源文件

核心代码如下：

{
    m_bar=new QProgressBar(this);
    m_value=new QLabel(this);
    m_slider=new QSlider(this);
    m_image->load(":/image/1.png");


    m_bar->setMaximum(100);//进度条最大值
    m_bar->setMinimum(0);  //进度条最小值
    m_bar->setValue(0);    //进度条当前值
    m_bar->setTextVisible(false);//不显示当前已完成百分比
    m_bar->setFixedHeight(20);//固定高度

    m_slider->setMaximum(100);//弹簧最大值
    m_slider->setMinimum(0);  //弹簧最小值
    m_slider->setValue(0);    //弹簧当前值
    m_slider->setOrientation(Qt::Horizontal);//弹簧为水平方向

    m_value->setText(QString("%1%").arg(m_bar->value()));//进度条数值
    m_value->setAlignment(Qt::AlignRight|Qt::AlignVCenter);//水平居右垂直居中
    m_value->setMinimumWidth(40);   //进度条最小宽度

     /*设置布局*/
    //弹簧和label水平布局
     QHBoxLayout* hlayout = new QHBoxLayout();
     hlayout->addWidget(m_slider);
     hlayout->addWidget(m_value,0,Qt::AlignRight);

     //进度条和上面的垂直布局
     QVBoxLayout* vlayout = new QVBoxLayout();
     vlayout->addWidget(m_bar);
     vlayout->addLayout(hlayout);
     setLayout(vlayout);//保存布局

     connect(m_slider,SIGNAL(valueChanged(int)),m_bar,SLOT(setValue (int)));//弹簧改变槽函数
     connect(m_bar,SIGNAL(valueChanged(int)),this,SLOT(onvalueChanged (int)));//进度条改变槽函数

     onvalueChanged(m_bar->value());//改变样式
}

定义进度条数值变化对应的槽函数：

void Widget::onvalueChanged(int value)
{
    QString qss= "QProgressBar{"
               "border: 1px solid rgb(16, 135, 209);"
               "background: rgba(248,248,255,180);"
               "border-radius: 6px; }"
               "QProgressBar::chunk:enabled {"
               "border-radius: 4px; "
               "background: qlineargradient(x1:0, y1:0, x2:1, y2:0" ;

    double v = m_bar->maximum();
    double EndColor=static_cast<double>(value)/v ;    //获取比例

    for(int i=0;i<100;i++)
    {
     double Current = EndColor*i/100;
     QRgb rgb = m_image->pixel((m_image->width()-1)*Current,m_image->height()/2);
     QColor c(rgb);
     qss.append(QString(",stop:%1  rgb(%2,%3,%4)").arg(i/100.0).arg(c.red()).arg(c.green()).arg(c.blue()));
    }

    qss.append(");}");
    qDebug()<<qss;
    m_bar->setStyleSheet(qss);
    m_value->setText(QString("%1%").arg(m_bar->value()));
}

五、效果演示

效果如下：

如果没有看懂的话，完整代码可以参考：
https://download.csdn.net/download/didi_ya/75646229
当然，也可以将该文件封装为一个类，这里封装为class ProgressBar，有需要的也可以参考：资源

---

ok，以上便是本文的全部内容了，如果对你有所帮助，记得点个赞哟~