1

I would like to change color of my progress bar from default green to red. I have this code, but the view is "flat", I would like to achieve something like "3d effect" as on picture below:

enter image description here

Code for red PB:

QPalette pal = ui->pbExtractionWidget->palette();
pal.setColor(QPalette::Normal, QColor(Qt::red));
QString danger = "QProgressBar::chunk {background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #FF0350,stop: 0.4999 #FF0020,stop: 0.5 #FF0019,stop: 1 #FF0000 );border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;border: .px solid black;}";
 ui->pbExtractionWidget->setStyleSheet(danger);

This is how it looks:

enter image description here

amahmud
  • 434
  • 4
  • 14
Marta Szmit
  • 11
  • 1
  • 3
  • Does this help? https://stackoverflow.com/questions/22712343/qpalette-with-multiple-color-background – teh_raab Oct 24 '18 at 12:23

3 Answers3

0

This link provides a way to style the progressbar.

This link provides a way to change gradient color for widgets.

Essentially, you just need to change the stylesheet correctly. Each Chunk is a piece of the progressbar.

Or use QPalette which uses Base to color the background of a widget. Set its gradient correctly and then do the following.

palette.setBrush( QPalette::Base, gradientVariable);
ui->pbExtractionWidget->setPalette(palette);
0
// In main.cpp
qDebug() << QStyleFactory::keys();
// If keys contains e.g. 'Fusion' it would be possible to change color of QProgressBar.
// On windows default style is 'Windows' and color can only be change with style sheets.
auto style = QStyleFactory::create("Fusion");
if (style) {
  app.setStyle(style);
}

class MyProgressBar final : public QProgressBar {
  void paintEvent(QPaintEvent*) final {
    QStyleOptionProgressBar option{};
    initStyleOption(&option);
    option.textAlignment = Qt::AlignHCenter;
    option.palette.setColor(QPalette::Highlight, QColor("lightskyblue"));
    option.palette.setColor(QPalette::HighlightedText, option.palette.color(QPalette::Text));
    QPainter painter{this};
    style()->drawControl(QStyle::CE_ProgressBar, &option, &painter, this);
  }
};
0

You have to set the stylesheet correctly, use below stylesheet code

QString danger = "QProgressBar::chunk: horizontal {border-radius: 3px; background: QLinearGradient(X1:0, y1:0.966136, x2:0, y2:0, stop:0.609721 rgba(242, 53, 53, 255), stop:0.691923 rgba(240, 151, 141, 252));border: .px solid black;}";

ui->progressBar->setStyleSheet(danger);
eyllanesc
  • 235,170
  • 19
  • 170
  • 241