QSS 自定义QProgressBar

Qt Style Sheets are a powerful mechanism that allows you to customize the appearance of widgets .

---

简述

QProgressBar支持盒子模型。子控件chunk定义进度条块样式。属性text-align定义百分比文本的位置。

效果

代码

QProgressBar *progressOne = new QProgressBar(this);
progressOne->setObjectName("ProgressOne");
progressOne->setMaximum(100);
progressOne->setMinimum(0);
progressOne->setValue(90);

QProgressBar *progressTwo = new QProgressBar(this);
progressTwo->setObjectName("ProgressTwo");
progressTwo->setMaximum(100);
progressTwo->setMinimum(0);
progressTwo->setValue(90);

QProgressBar *progressThree = new QProgressBar(this);
progressThree->setObjectName("ProgressThree");
progressThree->setMaximum(100);
progressThree->setMinimum(0);
progressThree->setValue(90);

样式表

QProgressBar#ProgressOne { /* 第一个进度条样式 */
	border: 1px solid grey;
	border-radius: 3px;
	background-color: transparent; /* 进度条背景透明 */
	text-align: right; /* 文本位置居右对齐 */
	height: 8px; /* 进度条高度，垂直进度条则使用width */
}

QProgressBar#ProgressOne::chunk { /* 进度条块，即进度样式 */
  background-color: #83E800; /* 进度条块背景颜色 */
}

QProgressBar#ProgressTwo { /* 第二个进度条样式 */
	border: 1px solid grey;
	border-radius: 3px;
	background-color: transparent;
	text-align: center;
	qproperty-textVisible: false; /* 文本可见属性设为false，即为不可见 */
	height: 8px;
}

QProgressBar#ProgressTwo::chunk {
  background-color: #83E800;
  width: 8px; /* 进度块宽度，垂直进度条则使用height */
  margin: 0.5px; /* 进度块间隔 */
  /* width与margin同时使用，可显示进度块 */
}

QProgressBar#ProgressThree { /* 第三个进度条样式 */
	border: 1px solid grey;
	border-radius: 3px;
	background-color: transparent;
	text-align: center;
	qproperty-textVisible: false;
	height: 8px;
}

QProgressBar#ProgressThree::chunk {
  background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
                                   stop: 0 #B3E59E, stop: 1.0 #83E800); /* 进度条块渐变背景颜色 */
}

参考

参考Qt助手，如有错误，请指正，谢谢！