Qt风格（QSS）应用之QProgressBar

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);     //隐藏100%文字     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