QProgressBar+QSS 进度条

qq_401700412025-12-17 12:02

QProgressBar子控件有一个:

chunk

表示进度

还有个伪状态：

indeterminate

表示无法确定的状态，

即minimum和maximum都为0。

虽然文档上说有这个

"Indeterminate progress bars have the :indeterminate pseudo state set."

但是在实际用的时候，却没起到啥作用，不知道是不是用的姿势不对，还是官方搁着哄人呢。

01 填充

cpp 复制代码

QProgressBar {
	min-height:24px;
	border: 1px solid #E0E0E0; 
	border-radius: 12px;       
	background-color: #EBEEF5; 
	text-align: center;  
	font-size: 12px;           
	color: #333333;
}
QProgressBar::chunk {
	background-color: #409EFF; 
	border-radius: 11px;
}

下面一直在动进度条就是一个繁忙进度(busy)，

或者叫indeterminate progress？

02 斑马

cpp 复制代码

QProgressBar {
	border: 1px solid rgba(170, 170, 170, 0.6);
	border-radius: 4px;       
	background-color: #111111;
}
QProgressBar::chunk {
	background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #4DA6FF, stop:1 #1A53FF);
	border-radius: 3px;   
	width: 4px;
	margin: 2px;
}
QProgressBar[indeterminate="true"]::chunk {
	background: #999999;
	border-radius: 3px;   
	width: 4px;
	margin: 2px;
}

注意chunk中的width和margin。

width是小块的宽度。

margin是小块间的间距。

既然indeterminate伪状态不生效，

那我们就属性选择器的方式，

毕竟条条大路通罗马嘛！

cpp中添加属性是这样写：

复制代码

ui->progressBar_5->setProperty("indeterminate", true);

03 默认风格

windows的默认风格，会有一道流光在跑，首先可以肯定的是，绝对不是qss干出来的，因为我相信它做不到。

还是巴拉巴拉源代码看看吧：

首先就看到了这个indeteminate状态，

就是最大最小为零得来滴。

接着看else分支，也就是可确定状态

这么说，这个流光效果是属性动画造出来的。

知道怎么一回事就行了，

反正也不怎么用。