本文主要是介绍Qt 自绘进度条 QProgressBar使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
文章目录
- 效果图
- 控件介绍
- 绘制函数
- 总结
效果图
控件介绍
- QProgressBar是Qt框架中提供的一个控件,用于在界面上显示任务的进度。它通常用于向用户展示一个操作完成的百分比,比如文件复制、数据加载等操作的进度。
QProgressBar
的主要特性:
- 范围和值:QProgressBar有一个最小值(minimum)和一个最大值(maximum),以及一个当前值(value)。进度条的显示范围从最小值到最大值,当前值表示任务的完成程度。
- 文本显示:进度条可以显示文本,比如当前值、百分比或者自定义的文本。你可以通过
setTextVisible()
函数来控制文本的显示,以及通过setFormat()
函数来设置文本的格式。 - 反转方向:进度条的方向可以从左到右(默认),也可以设置为从右到左。这可以通过
setInvertedAppearance()
函数来实现。 - 进度步长:你可以通过
setSingleStep()
函数来设置单步进度,以及通过setPageStep()
函数来设置页步长。 - 样式和自定义绘制:QProgressBar支持样式表,允许你通过CSS来定制进度条的外观。此外,你还可以通过继承QProgressBar并重写
paintEvent()
函数来自定义绘制进度条。 - 信号和槽:QProgressBar提供了
valueChanged
信号,当进度条的值发生变化时发出。你可以连接这个信号到槽函数,以便在进度更新时执行特定的操作。
- QSlider是Qt框架中提供的一个控件,用于允许用户通过拖动滑块来选择一个范围内的值。它通常用于音量控制、亮度调整或其他需要用户输入一个特定范围内的值的场景。QSlider可以水平或垂直显示,并且可以设置为有刻度或不显示刻度。它提供了多种信号和槽,使得它可以很容易地与其他Qt控件集成。
QSlider
的一些主要特性:
- 方向:QSlider可以设置为水平(
Qt::Horizontal
)或垂直(Qt::Vertical
)。 - 范围:可以通过
setMinimum()
和setMaximum()
函数设置最小值和最大值。 - 步长:可以通过
setSingleStep()
和setPageStep()
函数设置单步和页步长。 - 刻度位置:可以通过
setTickPosition()
函数设置刻度的位置,例如QSlider::NoTicks、QSlider::TicksAbove、QSlider::TicksBelow、QSlider::TicksBothSides和QSlider::TicksLeft。 - 信号: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使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!