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