Qt 自绘进度条 QProgressBar使用

本文主要是介绍Qt 自绘进度条 QProgressBar使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图

控件介绍

• QProgressBar是Qt框架中提供的一个控件，用于在界面上显示任务的进度。它通常用于向用户展示一个操作完成的百分比，比如文件复制、数据加载等操作的进度。
  QProgressBar的主要特性：

1. 范围和值：QProgressBar有一个最小值（minimum）和一个最大值（maximum），以及一个当前值（value）。进度条的显示范围从最小值到最大值，当前值表示任务的完成程度。
2. 文本显示：进度条可以显示文本，比如当前值、百分比或者自定义的文本。你可以通过setTextVisible()函数来控制文本的显示，以及通过setFormat()函数来设置文本的格式。
3. 反转方向：进度条的方向可以从左到右（默认），也可以设置为从右到左。这可以通过setInvertedAppearance()函数来实现。
4. 进度步长：你可以通过setSingleStep()函数来设置单步进度，以及通过setPageStep()函数来设置页步长。
5. 样式和自定义绘制：QProgressBar支持样式表，允许你通过CSS来定制进度条的外观。此外，你还可以通过继承QProgressBar并重写paintEvent()函数来自定义绘制进度条。
6. 信号和槽：QProgressBar提供了valueChanged信号，当进度条的值发生变化时发出。你可以连接这个信号到槽函数，以便在进度更新时执行特定的操作。

• QSlider是Qt框架中提供的一个控件，用于允许用户通过拖动滑块来选择一个范围内的值。它通常用于音量控制、亮度调整或其他需要用户输入一个特定范围内的值的场景。QSlider可以水平或垂直显示，并且可以设置为有刻度或不显示刻度。它提供了多种信号和槽，使得它可以很容易地与其他Qt控件集成。
  QSlider的一些主要特性：

1. 方向：QSlider可以设置为水平（Qt::Horizontal）或垂直（Qt::Vertical）。
2. 范围：可以通过setMinimum()和setMaximum()函数设置最小值和最大值。
3. 步长：可以通过setSingleStep()和setPageStep()函数设置单步和页步长。
4. 刻度位置：可以通过setTickPosition()函数设置刻度的位置，例如QSlider::NoTicks、QSlider::TicksAbove、QSlider::TicksBelow、QSlider::TicksBothSides和QSlider::TicksLeft。
5. 信号：QSlider提供了valueChanged信号，当滑块的值发生变化时发出。

• 要实现进度条关键就在会绘制函数
• QProgressBar也是继承于QWidget的，意味着想要自绘进度条，其实可以继承于QWidget，而非QProgressBar.

绘制函数

• 图一 继承于QWidget

void QmyBattery::paintEvent(QPaintEvent *event)
{ // 界面组件的绘制Q_UNUSED(event);QPainter painter(this);QRect rect(0, 0, width(), height()); // viewport矩形区painter.setViewport(rect);           // 设置Viewportpainter.setWindow(0, 0, 120, 50);    // 设置窗口大小，逻辑坐标painter.setRenderHint(QPainter::Antialiasing);painter.setRenderHint(QPainter::TextAntialiasing);// 绘制电池边框QPen pen;                        // 设置画笔pen.setWidth(2);                 // 线宽pen.setColor(mColorBorder);      // 划线颜色pen.setStyle(Qt::SolidLine);     // 线的类型，实线、虚线等pen.setCapStyle(Qt::FlatCap);    // 线端点样式pen.setJoinStyle(Qt::BevelJoin); // 线的连接点样式painter.setPen(pen);QBrush brush;                     // 设置画刷brush.setColor(mColorBack);       // 画刷颜色brush.setStyle(Qt::SolidPattern); // 画刷填充样式painter.setBrush(brush);rect.setRect(1, 1, 109, 48);painter.drawRect(rect); // 绘制电池边框brush.setColor(mColorBorder); // 画刷颜色painter.setBrush(brush);rect.setRect(110, 15, 10, 20);painter.drawRect(rect); // 画电池正极头// 画电池柱if (mPowerLevel > mLowLeverl){                                // 正常颜色电量柱brush.setColor(mColorPower); // 画刷颜色pen.setColor(mColorPower);   // 划线颜色}else if (mPowerLevel < mWarnLevel){                                  // 电量低电量柱brush.setColor(mColorWarning); // 画刷颜色pen.setColor(mColorWarning);   // 划线颜色}else{brush.setColor(mClolorLowLeverl); // 画刷颜色pen.setColor(mClolorLowLeverl);   // 划线颜色}painter.setBrush(brush);painter.setPen(pen);if (mPowerLevel > 0){rect.setRect(5, 5, mPowerLevel, 40);painter.drawRect(rect); // 画电池柱}// 绘制电量百分比文字QFontMetrics textSize(this->font());QString powStr = QString::asprintf("%d%%", mPowerLevel);QRect textRect = textSize.boundingRect(powStr); // 得到字符串的rectpainter.setFont(this->font());pen.setColor(mColorBorder); // 划线颜色painter.setPen(pen);painter.drawText(55 - textRect.width() / 2,23 + textRect.height() / 2,powStr);
}

• 图二 继承于QProgressBar

    void paintEvent(QPaintEvent *event) override{QProgressBar::paintEvent(event); // 调用基类的paintEvent()以绘制基本的进度条QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing, true);// 绘制圆形指示器int width = this->width();int height = this->height();int progress = this->value();int max = this->maximum();double ratio = double(progress) / double(max);int circleWidth = width * ratio;int circleHeight = height / 2;painter.setBrush(QColor("#3498db"));painter.drawEllipse(circleWidth - (height / 2), circleHeight - (height / 2), height, height);}

总结

• 知识理应共享
• 源码在此。

这篇关于Qt 自绘进度条 QProgressBar使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---