How to design a QPushButton with progress ?

sonichy

I want to show download progress on QPushButton via background-color percent.
Demo(JQUERY+CSS3) : http://www.xwcms.net/webAnnexImages/fileAnnex/20140122/88077/index.html

alt text

jsulm

@sonichy You can inherit from QPushButton and overwrite http://doc.qt.io/qt-5/qwidget.html#paintEvent where you then paint manually.

joeQ

@sonichy Hi,friend,welcome.

I saw the image has some Chinese words. so i used Chinese to reply.

Chinese version

如果是静态的背景样式的话，可以使用设置 QStyle 字符串或者直接显示背景图像，这个您应该知道。

对于动态的样式，多数是重载QWidget::paintEvent函数，一点一点绘制而成的。

或者，子类化QWidget, 重写一些鼠标事件和绘制事件，也就是自定义控件了。

English version

If it is a static background style, you can use the set QStyle string or directly display the background image, which you should know.

For dynamic styles, most of them are overloaded with the QWidget :: paintEvent function, which is drawn a little bit.

Or, subclass QWidget, rewrite some mouse events and draw events, that is, custom controls.

^_^

Devopia53

@sonichy

If you want to use CSS, see the following my example.

auto            timer = new QTimer(this);
static float    value = 0.0f;

connect(timer, &QTimer::timeout, [&, timer]{
    value += 0.1f;
    ui->pushButton->setStyleSheet(QString("background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,"
                                          "stop:0 rgba(230, 103, 192, 255), stop:%1 rgba(230, 103, 192, 255),"
                                          "stop:%2 rgba(79, 179, 228, 255), stop:1 rgba(79, 179, 228, 255));")
                                  .arg(value-0.001f)
                                  .arg(value));
    if (value >= 1.0f) {
        timer->stop();
        timer->deleteLater();
    }
});
timer->start(1000);

BjornW

@joeQ said in How to design a QPushButton with progress ?:

@sonichy Hi,friend,welcome.

I saw the image has some Chinese words. so i used Chinese to reply.

如果是静态的背景样式的话，可以使用设置 QStyle 字符串或者直接显示背景图像，这个您应该知道。

对于动态的样式，多数是重载QWidget::paintEvent函数，一点一点绘制而成的。

或者，子类化QWidget, 重写一些鼠标事件和绘制事件，也就是自定义控件了。

As much as I love seeing some chinese text, I think it is good if replies are kept english for future reference ^_^

joeQ

@BjornW

(^▽^), Thank u, good suggestion. Most of I use English. This time, I guessed the person asked question is Chinese. so ...

jsulm

@joeQ Asking person yes, but many others here not. For them (including me) it would be hard/impossible to follow the discussion and to contribute if it is in Chinese.

joeQ

@jsulm
Yes, you are right. I am sorry, ignoring other people.

sonichy

@Devopia53
It works great!