Qt 自绘进度条 QProgressBar使用

2024-03-09 19:20

本文主要是介绍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使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/791707

相关文章

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里,API

Java数字转换工具类NumberUtil的使用

《Java数字转换工具类NumberUtil的使用》NumberUtil是一个功能强大的Java工具类,用于处理数字的各种操作,包括数值运算、格式化、随机数生成和数值判断,下面就来介绍一下Number... 目录一、NumberUtil类概述二、主要功能介绍1. 数值运算2. 格式化3. 数值判断4. 随机

Spring排序机制之接口与注解的使用方法

《Spring排序机制之接口与注解的使用方法》本文介绍了Spring中多种排序机制,包括Ordered接口、PriorityOrdered接口、@Order注解和@Priority注解,提供了详细示例... 目录一、Spring 排序的需求场景二、Spring 中的排序机制1、Ordered 接口2、Pri

Springboot 中使用Sentinel的详细步骤

《Springboot中使用Sentinel的详细步骤》文章介绍了如何在SpringBoot中使用Sentinel进行限流和熔断降级,首先添加依赖,配置Sentinel控制台地址,定义受保护的资源,... 目录步骤 1: 添加 Sentinel 依赖步骤 2: 配置 Sentinel步骤 3: 定义受保护的

Python中Markdown库的使用示例详解

《Python中Markdown库的使用示例详解》Markdown库是一个用于处理Markdown文本的Python工具,这篇文章主要为大家详细介绍了Markdown库的具体使用,感兴趣的... 目录一、背景二、什么是 Markdown 库三、如何安装这个库四、库函数使用方法1. markdown.mark

使用Navicat工具比对两个数据库所有表结构的差异案例详解

《使用Navicat工具比对两个数据库所有表结构的差异案例详解》:本文主要介绍如何使用Navicat工具对比两个数据库test_old和test_new,并生成相应的DDLSQL语句,以便将te... 目录概要案例一、如图两个数据库test_old和test_new进行比较:二、开始比较总结概要公司存在多

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

如何使用Spring boot的@Transactional进行事务管理

《如何使用Springboot的@Transactional进行事务管理》这篇文章介绍了SpringBoot中使用@Transactional注解进行声明式事务管理的详细信息,包括基本用法、核心配置... 目录一、前置条件二、基本用法1. 在方法上添加注解2. 在类上添加注解三、核心配置参数1. 传播行为(

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper

c++中std::placeholders的使用方法

《c++中std::placeholders的使用方法》std::placeholders是C++标准库中的一个工具,用于在函数对象绑定时创建占位符,本文就来详细的介绍一下,具有一定的参考价值,感兴... 目录1. 基本概念2. 使用场景3. 示例示例 1:部分参数绑定示例 2:参数重排序4. 注意事项5.