Qt风格（QSS）应用之QProgressBar_qprogressbar qss

Qt的进度条QProgressBar在开发过程用得比较多，传统的默认进度条显示不美观，如果想让进度条显示达到设计图的要求设计可以有两种方法，一种是用painter绘制进度条，二是采用qss进行设置，qss设置比较方便，修改也比较快，本篇记录qss设置进度打的风格：

#include "mainwindow.h"
#include "ui_mainwindow.h"
 
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    initView();
    initData();
}
 
MainWindow::~MainWindow()
{
    delete ui;
}
 
void MainWindow::initView()
{
    //设置边框
    ui->progressBar->setStyleSheet("QProgressBar{text-align:center;background-color:#DDDDDD;border: 1px solid #ff0000;}"
                                    "QProgressBar::chunk{background-color:#05B8CC;}");
 
    //文字居中 text-align:center;
    //设置圆角 border-radius 这里要注意如果设置的圆角大于或等进度条高度的一半，圆角设置无效， 比如进度条的高度为10， 圆然设置为5px或以上就不会起作用
    ui->progressBar_2->setStyleSheet("QProgressBar{text-align:center;background-color:#DDDDDD;border: 0px solid #DDDDDD;border-radius:5px;}"
                                     "QProgressBar::chunk{background-color:#05B8CC; border-radius: 5px;}");
 
    //块显示
    ui->progressBar_3->setStyleSheet("QProgressBar{text-align:center;background-color:#DDDDDD;border: 0px solid #DDDDDD;border-radius:5px;}"
                                     "QProgressBar::chunk{background-color:#05B8CC;border-radius:5px; width:8px;margin:0.5px;}");
 
    //进度块渐变
    ui->progressBar_4->setStyleSheet("QProgressBar{height:22px; text-align:center; font-size:14px; color:white; border-radius:11px; background:#1D5573;}"
                                   "QProgressBar::chunk{border-radius:11px;background:qlineargradient(spread:pad,x1:0,y1:0,x2:1,y2:0,stop:0 #99ffff,stop:1 #9900ff);}");
 
}
 
void MainWindow::initData()
{
 
    //设置进度值
    ui->progressBar->setValue(80);
    ui->progressBar_2->setValue(70);
    ui->progressBar_3->setValue(60);
    ui->progressBar_4->setValue(50);
    //隐藏百分百文字
    ui->progressBar_4->setTextVisible(false);
}
 

运行效果

参考：

https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qprogressbar
https://blog.csdn.net/cliffordl/article/details/42063561
https://blog.csdn.net/weixin_41882459/article/details/109445914