如何在PyQt/PySide中将QPushButton实现为美观的无渐变进度条

问题描述 #

我想实现类似将QLineEdit转为进度条的效果，但目标控件是QPushButton。我之前用渐变实现了该功能，但外观效果不佳，以下是我的实现代码：

main.py 原代码 #

#!/bin/env python
import sys
from PySide6 import QtWidgets
from main_ui import Ui_Dialog


class Progress(QtWidgets.QDialog):
    def __init__(self):
        super().__init__()
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)
        self.value = 0

        self.ui.btn.clicked.connect(self.updateProgress)

    def updateProgress(self):
        if self.value > 1:
            self.value = 0
            self.ui.btn_progress.setStyleSheet('background-color: white')
        else:
            self.value = self.value + 0.1
        self.ui.label.setText(str(self.value))
        self.ui.btn_progress.setStyleSheet(('background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 #1bb77b, stop: ' +
                                            (str(self.value)) + ' #1bb77b, stop: ' + str(self.value + 0.001) + ' rgba(0, 0, 0, 0), stop: 1 white)'))


app = QtWidgets.QApplication(sys.argv)
window = Progress()
window.show()
app.exec()

main_ui.py 原代码 #

# -*- coding: utf-8 -*- 

################################################################################
## Form generated from reading UI file 'test_dialog.ui'
##
## Created by: Qt User Interface Compiler version 6.5.1
##
## WARNING! All changes made in this file will be lost when recompiling UI file!
################################################################################

from PySide6.QtCore import (QCoreApplication, QDate, QDateTime, QLocale,
    QMetaObject, QObject, QPoint, QRect,
    QSize, QTime, QUrl, Qt)
from PySide6.QtGui import (QBrush, QColor, QConicalGradient, QCursor,
    QFont, QFontDatabase, QGradient, QIcon,
    QImage, QKeySequence, QLinearGradient, QPainter,
    QPalette, QPixmap, QRadialGradient, QTransform)
from PySide6.QtWidgets import (QApplication, QDialog, QLabel, QPushButton,
    QSizePolicy, QVBoxLayout, QWidget)

class Ui_Dialog(object):
    def setupUi(self, Dialog):
        if not Dialog.objectName():
            Dialog.setObjectName(u"Dialog")
        Dialog.resize(680, 97)
        self.verticalLayout = QVBoxLayout(Dialog)
        self.verticalLayout.setObjectName(u"verticalLayout")
        self.btn_progress = QPushButton(Dialog)
        self.btn_progress.setObjectName(u"btn_progress")

        self.verticalLayout.addWidget(self.btn_progress)

        self.label = QLabel(Dialog)
        self.label.setObjectName(u"label")

        self.verticalLayout.addWidget(self.label)

        self.btn = QPushButton(Dialog)
        self.btn.setObjectName(u"btn")

        self.verticalLayout.addWidget(self.btn)


        self.retranslateUi(Dialog)

        QMetaObject.connectSlotsByName(Dialog)
    # setupUi

    def retranslateUi(self, Dialog):
        Dialog.setWindowTitle(QCoreApplication.translate("Dialog", u"Dialog", None))
        self.btn_progress.setText(QCoreApplication.translate("Dialog", u"Progress Button", None))
        self.label.setText(QCoreApplication.translate("Dialog", u"<html><head/><body><p align=\"center\"><span style=\" font-size:12pt;\">Progress Value : </span></p></body></html>", None))
        self.btn.setText(QCoreApplication.translate("Dialog", u"PushButton", None))
    # retranslateUi

请问能否不使用渐变来实现该功能，让外观更美观？

解决方案：自定义QPushButton子类重写paintEvent #

通过重写paintEvent，先绘制进度背景，再保留按钮原生样式和交互，既保证美观又不丢失按钮特性。

修改后的main.py代码 #

#!/bin/env python
import sys
from PySide6 import QtWidgets, QtGui, QtCore


class ProgressButton(QtWidgets.QPushButton):
    def __init__(self, parent=None):
        super().__init__(parent)
        self._progress = 0.0

    @property
    def progress(self):
        return self._progress

    @progress.setter
    def progress(self, value):
        self._progress = max(0.0, min(1.0, value))
        self.update()  # 触发控件重绘

    def paintEvent(self, event):
        # 第一步：绘制进度背景
        painter = QtGui.QPainter(self)
        painter.setRenderHint(QtGui.QPainter.Antialiasing)

        # 进度区域留边距，避免覆盖按钮原生边框
        rect = self.rect().adjusted(2, 2, -2, -2)
        progress_rect = QtCore.QRect(
            rect.left(), rect.top(),
            int(rect.width() * self._progress), rect.height()
        )
        
        # 绘制带圆角的进度填充，与按钮风格统一
        painter.setBrush(QtGui.QColor("#1bb77b"))
        painter.setPen(QtCore.Qt.NoPen)
        painter.drawRoundedRect(progress_rect, 3, 3)

        # 第二步：绘制按钮原生样式、文本和交互状态（hover/按下效果）
        super().paintEvent(event)


class Progress(QtWidgets.QDialog):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Dialog")
        self.resize(680, 97)

        # 手动构建UI（无需依赖ui文件）
        self.verticalLayout = QtWidgets.QVBoxLayout(self)
        
        self.btn_progress = ProgressButton(self)
        self.btn_progress.setText("Progress Button")
        self.verticalLayout.addWidget(self.btn_progress)

        self.label = QtWidgets.QLabel(self)
        self.label.setText('<html><head/><body><p align="center"><span style=" font-size:12pt;">Progress Value : </span></p></body></html>')
        self.verticalLayout.addWidget(self.label)

        self.btn = QtWidgets.QPushButton(self)
        self.btn.setText("PushButton")
        self.verticalLayout.addWidget(self.btn)

        self.value = 0
        self.btn.clicked.connect(self.updateProgress)

    def updateProgress(self):
        if self.value > 1:
            self.value = 0
        else:
            self.value += 0.1
        self.label.setText(f"Progress Value : {self.value:.1f}")
        self.btn_progress.progress = self.value


app = QtWidgets.QApplication(sys.argv)
window = Progress()
window.show()
app.exec()

效果说明 #

• 保留QPushButton的所有原生交互特性（hover高亮、按下反馈等）
• 进度填充与按钮边框对齐，视觉更协调
• 进度值范围严格限制在0.0~1.0，避免异常显示
• 无需使用渐变，通过直接绘制矩形实现进度效果，性能更优

简化方案：叠加QProgressBar #

如果不想自定义控件，可在按钮上方叠加透明背景的QProgressBar，实现快速效果：

# 在Progress类的__init__方法中替换btn_progress相关代码
self.btn_progress = QtWidgets.QPushButton(self)
self.btn_progress.setText("Progress Button")
self.verticalLayout.addWidget(self.btn_progress)

# 创建叠加的进度条
self.progress_bar = QtWidgets.QProgressBar(self.btn_progress)
self.progress_bar.setGeometry(self.btn_progress.rect().adjusted(2,2,-2,-2))
self.progress_bar.setStyleSheet("""
    QProgressBar {
        border: none;
        background-color: transparent;
        border-radius: 3px;
    }
    QProgressBar::chunk {
        background-color: #1bb77b;
        border-radius: 3px;
    }
""")
# 让进度条跟随按钮大小变化
self.btn_progress.resizeEvent = lambda e: self.progress_bar.setGeometry(self.btn_progress.rect().adjusted(2,2,-2,-2))

# 修改updateProgress方法中的进度更新逻辑
def updateProgress(self):
    if self.value > 1:
        self.value = 0
    else:
        self.value += 0.1
    self.label.setText(f"Progress Value : {self.value:.1f}")
    self.progress_bar.setValue(int(self.value * 100))

这种方法代码更简洁，但需注意进度条的位置适配，以及确保按钮的点击事件能正常触发。

内容的提问来源于stack exchange，提问作者sundar_ima