Qt编写自定义控件：简单的方式绘制渐变进度条

友善啊，朋友

已于 2022-04-04 21:34:30 修改

阅读量2.7k

点赞数 1

分类专栏： # Qt编写自定义控件 # Qt样式（QStyle）文章标签： Qt

于 2022-04-04 17:23:22 首次发布

本文链接：https://blog.youkuaiyun.com/kenfan1647/article/details/123956800

版权

Qt编写自定义控件同时被 2 个专栏收录

46 篇文章

订阅专栏

Qt样式（QStyle）

11 篇文章

订阅专栏

本文详细介绍了如何在Qt中创建一个带有渐变颜色的自定义QProgressBar，通过继承QProgressBar并重写paintEvent方法，展示了如何设置进度条样式和文本。适合学习Qt界面定制的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

#ifndef MYPROGRESSBAR_H
#define MYPROGRESSBAR_H

#include <QProgressBar>

class myProgressBar : public QProgressBar
{
public:
    myProgressBar(QWidget * parent = nullptr);

protected:
    void paintEvent(QPaintEvent *event)override;
};

#endif // MYPROGRESSBAR_H

#include "myprogressbar.h"
#include <QPainter>
#include <QStyleOptionProgressBar>
#include <QStylePainter>
#include <QDebug>
#include <QPaintEvent>

myProgressBar::myProgressBar(QWidget *parent)
    :QProgressBar(parent)
{
    setMinimumSize(180,150);
    setAlignment(Qt::AlignCenter);
}

void myProgressBar::paintEvent(QPaintEvent *event)
{
    QStylePainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    QStyleOptionProgressBar option;

    initStyleOption(&option);
//    painter.drawControl(QStyle::CE_ProgressBar,option);
    QStyleOptionProgressBar opt1 = option;
    opt1.rect = this->style()->subElementRect(QStyle::SE_ProgressBarContents, &opt1, this);

    QStyleOptionProgressBar opt2 = option;

    QRect rect = QRect(opt1.rect.topLeft().x(),
                       opt1.rect.topLeft().y(),
                       opt1.rect.width() * opt1.progress / opt1.maximum,
                       opt1.rect.height());

    auto eventRect = event->rect();
    QLinearGradient linearGradient(eventRect.topLeft(),eventRect.topRight());
    linearGradient.setColorAt(0.0,Qt::red);
    linearGradient.setColorAt(0.3,Qt::cyan);
    linearGradient.setColorAt(0.7,Qt::green);
    linearGradient.setColorAt(1.0,Qt::blue);

    painter.fillRect(rect,linearGradient);

    if (option.textVisible)
    {
        opt2.rect = this->style()->subElementRect(QStyle::SE_ProgressBarLabel, &opt2, this);
        painter.setPen(Qt::red);
        painter.drawControl(QStyle::CE_ProgressBarLabel, opt2);
    }
}

使用：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    QVBoxLayout * vb = new QVBoxLayout(this);
    myProgressBar * bar = new myProgressBar(this);
    QSlider * slider = new QSlider(Qt::Horizontal,this);
    slider->setRange(0,100);
    bar->setRange(0,100);
    vb->setContentsMargins(20,20,20,20);
    vb->addWidget(bar);
    vb->addStretch();
    vb->addWidget(slider);
    connect(slider,&QSlider::valueChanged,bar,&QProgressBar::setValue);
}

效果：