How to change the color of a progressBar, while keep other properties unchanged



  • Hi, I want to change the color of a progressBar based on its value. Meanwhile I need to keep other properties of the widget unchanged. I applied the following lines to get the color changed. However the width and the border are also changed. Is there any way to keep the original properties and only change the color?
    @
    QString myStyleSheet = QString(" QProgressBar::chunk { background: yellow; }");
    QString s = ui->progressBar->styleSheet().append(myStyleSheet);
    ui->progressBar->setStyleSheet(s);
    @

    Thanks.



  • There are two possibilites that come to my mind immediately :

    • Use a "gradient":http://developer.qt.nokia.com/forums/viewthread/12701 instead of a plain color
    • Save the style sheet before appending to it
      @
      ui->progressBar->setProperty("defaultStyleSheet", ui->progressBar->styleSheet());
      ...
      ui->progressBar->setStyleSheet(ui->progressBar->property("defaultStyleSheet").toString() +
      " QProgressBar::chunk { background: green; }");
      ...
      ui->progressBar->setStyleSheet(ui->progressBar->property("defaultStyleSheet").toString() +
      " QProgressBar::chunk { background: yellow; }");
      ...
      ui->progressBar->setStyleSheet(ui->progressBar->property("defaultStyleSheet").toString() +
      " QProgressBar::chunk { background: red; }");
      @


  • Hi Lukas,

    Thanks for the response. I tried the styleSheet solution. I does not work for me. The defaultStyleSheet turns out a empty string:
    @
    ui->progressBar->setStyleSheet(ui->progressBar->property("defaultStyleSheet").toString() +
    " QProgressBar::chunk { background: yellow; }");
    QString s = ui->progressBar->styleSheet();
    qDebug() << s;
    @

    The color changed. The width and border of the bar also changed.

    output:
    " QProgressBar::chunk { background: yellow; }"



  • Unless you set a custom style sheet the default style sheet for a widget is always empty. If you want to modify an existing style (not style sheet) you will have to either alter the palette, subclass the corresponding QStyle or a QProxyStyle.



  • Could you provide some sample code for the QStyle or QProxyStyle?
    In addition, I only want to change the color of the bar, no need for fancy looking. Is there simple way to do that?

    Thanks.



  • Changing the palette may work on your platform & style, but it is not guaranteed to work everywhere. Styles are free to ignore it.



  • Hi Andre, I tried @QPalette p = (ui->progressBar->palette());
    p.setColor(QPalette::Foreground, Qt::red);
    p.setColor(QPalette::Background, Qt::green);
    p.setColor(QPalette::Highlight, Qt::yellow);
    ui->progressBar->setPalette(p);@ It did not work.

    Now I use the original geometry of the bar to keep the original looking except the color. The result is close to what I wanted.

    @
    QRect r = ui->progressBar->geometry();

    QString st = QString (
                "QProgressBar::chunk {"
                "background-color: #ff0000;"
                 "}");
    
    st.append("QProgressBar {"
              "border: 1px solid grey;"
              "border-radius: 2px;"
              "text-align: center;"
              "background: #eeeeee;"
              "}");
    ui->progressBar->setStyleSheet(st);
    
    ui->progressBar->setGeometry(r.x(), r.y()+3, r.width(), r.height()-6 );
    

    @
    I develop this application on Mac and Linux. Do you have better method for this matter?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.