Qt中进度条的颜色设置

以下内容转载自诺基亚官方网站:http://doc.qt.nokia.com/latest/stylesheet-examples.html#customizing-qprogressbar

 

Customizing QProgressBar

The QProgressBar's border, chunk, and text-align can be customized using style sheets. However, if one property or sub-control is customized, all the other properties or sub-controls must be customized as well.

                                                 

For example, we change the border to grey and the chunk to cerulean.

 QProgressBar {
     border: 2px solid grey;
     border-radius: 5px;
 }

 QProgressBar::chunk {
     background-color: #05B8CC;
     width: 20px;
 }

This leaves the text-align, which we customize by positioning the text in the center of the progress bar.

 QProgressBar {
     border: 2px solid grey;
     border-radius: 5px;
     text-align: center;
 }A margin can be included to obtain more visible chunks.

 

In the screenshot above, we use a margin of 0.5 pixels.

 QProgressBar::chunk {
     background-color: #CD96CD;
     width: 10px;
     margin: 0.5px;
 }

### 如何在 Qt 中实现和自定义 QProgressBar #### 继承 `QProgressBar` 并重写 `paintEvent` 为了创建带有图像显示功能的进度条,可以通过继承 `QProgressBar` 类并重载其 `paintEvent()` 方法来绘制自定义外观。这允许开发者完全控制进度条上所呈现的内容,包括但不限于添加背景图片或其他图形元素[^1]。 ```cpp void CustomProgressBar::paintEvent(QPaintEvent *event) { QStylePainter painter(this); QStyleOptionProgressBar option; initStyleOption(&option); // 自定义绘画逻辑 painter.save(); // 设置画笔属性... painter.setRenderHint(QPainter::Antialiasing, true); // 调用默认绘图方法以保留原有样式特性 style()->drawControl(QStyle::CE_ProgressBar, &option, &painter, this); // 添加额外的绘制操作,比如覆盖一层透明度渐变或者放置图标 QRect rect = style()->subElementRect(QStyle::SE_ProgressBarContents, &option, this); QPixmap pixmap(":/path/to/image.png"); painter.drawPixmap(rect.center() - QPoint(pixmap.width()/2,pixmap.height()/2),pixmap); painter.restore(); } ``` #### 创建圆形进度条控件 对于希望构建不同于传统水平或垂直形式的进度指示器而言,如需设计成圆环状,则可基于 `QProgressBar` 构建新的组件,并调整布局与渲染方式。具体做法是在派生类内部重新定义 `paintEvent()` 函数中的绘制过程,从而形成特定形状的视觉表现[^2]。 ```cpp class CircularProgressBar : public QProgressBar { public: explicit CircularProgressBar(QWidget* parent = nullptr): QProgressBar(parent){} protected: void paintEvent(QPaintEvent*) override; private: }; ``` #### 利用 QSS 定义样式表来自定义外观 除了编程手段外,还可以借助于 Qt 的样式表机制快速改变现有部件的表现风格而无需修改源码。通过设置不同的 CSS 属性组合,能够轻松定制进度条颜色、间距以及整体结构等细节特征[^3]。 ```css /* 圆角矩形 */ QProgressBar { border-radius: 8px; height: 15px; text-align: center; color: white; font-size: 10pt; background-color: transparent; } /* 填充部分颜色 */ QProgressBar::chunk { background-color: qlineargradient(x1:0 y1:0,x2:1,y2:0, stop:0 rgba(76,175,80,255), stop:1 rgba(139,195,74,255)); width: 10px; margin: 0.5px; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值