Qt实现简单的导航进度条——自定义控件

        导航进度条通过其动态的视觉效果，‌不仅提供了任务进度的实时反馈，‌还增强了用户体验的流畅性和直观性。‌“进度”的设计方式多种多样，不同种类的运用需要根据具体场景来规划具体的进度方式，一般都要在清楚了解了每个方式的设计优势时，根据自身的产品定位，再去设计体验方式，这才是正确的设计方式与流程，然后再通过这些细节来提升产品的转化率，增加产品的趣味度方为良策。       

 一、简述

        Qt实现导航进度条控件。进度条组件提供了一种直观的方式来显示任务的进度，让用户清晰地了解任务的完成情况。

二、实现的功能

1、可设置前景色/背景色/当前值前景色/当前值背景色

2、可设置最大步数及当前第几步

3、可设置导航标签队列文字信息

三、效果 

 

四、核心代码 
1、头文件
#ifndef NAVIGATIONPROGRESSBAR_H
#define NAVIGATIONPROGRESSBAR_H#include <QWidget>class NavigationProgressBarPrivate;
class NavigationProgressBar : public QWidget
{Q_OBJECTQ_PROPERTY(QStringList messageList READ messageList WRITE setMessageList CONSTANT)Q_PROPERTY(int step READ step WRITE setStep CONSTANT)Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor CONSTANT)Q_PROPERTY(QColor currentBackgroundColor READ currentBackgroundColor WRITE setCurrentBackgroundColor CONSTANT)Q_PROPERTY(QColor foregroundColor READ foregroundColor WRITE setForegroundColor CONSTANT)
public:explicit NavigationProgressBar(QWidget *parent = nullptr);~NavigationProgressBar();QSize sizeHint() const override;QSize minimumSizeHint() const override;void setMessageList(const QStringList &list);QStringList messageList() const;void setStep(const int step);int step() const;void setBackgroundColor(const QColor &color);QColor backgroundColor() const;void setCurrentBackgroundColor(const QColor &color);QColor currentBackgroundColor() const;void setForegroundColor(const QColor &color);QColor foregroundColor() const;protected:void paintEvent(QPaintEvent *event) override;private:void drawBackground(QPainter *painter, const bool ok);void drawText(QPainter *painter, const bool ok);QScopedPointer<NavigationProgressBarPrivate> d;
};#endif // NAVIGATIONPROGRESSBAR_H
 2、cpp文件
#include "navigationprogressbar.h"#include <QPainter>
#include <QDateTime>class NavigationProgressBarPrivate{
public:NavigationProgressBarPrivate(QWidget *parent): owner(parent){for(int i=0; i<maxStep; i++)topInfo << QString("Step%1").arg(i+1);}QWidget *owner;QColor backgroundColor = QColor(80, 80, 80);QColor foregroundColor = QColor(254, 254, 254);QColor currentBackgroundColor = QColor(QLatin1String("#4da1ff"));int maxStep = 5;int step = 0;QStringList topInfo;QStringList dateList;
};NavigationProgressBar::NavigationProgressBar(QWidget *parent): QWidget(parent), d(new NavigationProgressBarPrivate(this))
{
}NavigationProgressBar::~NavigationProgressBar()
{
}QSize NavigationProgressBar::sizeHint() const
{return QSize(500, 100);
}QSize NavigationProgressBar::minimumSizeHint() const
{return QSize(300, 75);
}void NavigationProgressBar::setMessageList(const QStringList &list)
{d->topInfo = list;d->maxStep = list.size();update();
}QStringList NavigationProgressBar::messageList() const
{return d->topInfo;
}void NavigationProgressBar::setStep(const int step)
{if(d->step >= step || step > d->maxStep)return;int s = step - d->step;for(int i=0; i<s; i++)d->dateList.append(QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss"));d->step = step;Q_ASSERT(d->step == d->dateList.size());update();
}int NavigationProgressBar::step() const
{return d->step;
}void NavigationProgressBar::setBackgroundColor(const QColor &color)
{d->backgroundColor = color;update();
}QColor NavigationProgressBar::backgroundColor() const
{return d->backgroundColor;
}void NavigationProgressBar::setCurrentBackgroundColor(const QColor &color)
{d->currentBackgroundColor = color;update();
}QColor NavigationProgressBar::currentBackgroundColor() const
{return d->currentBackgroundColor;
}void NavigationProgressBar::setForegroundColor(const QColor &color)
{d->foregroundColor = color;update();
}QColor NavigationProgressBar::foregroundColor() const
{return d->foregroundColor;
}void NavigationProgressBar::paintEvent(QPaintEvent *event)
{QWidget::paintEvent(event);QPainter painter(this);painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);drawBackground(&painter, false);drawText(&painter, false);drawBackground(&painter, true);drawText(&painter, true);
}void NavigationProgressBar::drawBackground(QPainter *painter, const bool ok)
{//圆半径为高度一定比例,计算宽度,将宽度等分double w = width() / d->maxStep * 1.0;double h = height() / 3 * 1.0;double radius = qMin(w, h) / 2;double initX = 0;double initY = height() / 2.0;//逐个绘制连接线条initX = w / 2;int step = d->maxStep;int penWidth = radius / 4;QColor backgroundColor = d->backgroundColor;if(ok){step = d->step;penWidth = radius / 8;backgroundColor = d->currentBackgroundColor;radius = radius / 7 * 6;}QPen pen(backgroundColor);pen.setWidthF(penWidth);pen.setCapStyle(Qt::RoundCap);painter->setPen(pen);painter->setBrush(Qt::NoBrush);for (int i = 0; i < step - 1; i++) {painter->drawLine(QPoint(initX, initY), QPoint(initX + w, initY));initX += w;}if(ok && (d->step > 0) && (d->step < d->maxStep))painter->drawLine(QPoint(initX, initY), QPoint(initX + w / 2, initY));//逐个绘制圆initX = w / 2;painter->setPen(Qt::NoPen);painter->setBrush(backgroundColor);for (int i = 0; i < step; i++) {painter->drawEllipse(QPointF(initX, initY), radius, radius);initX += w;}//逐个绘制圆中的数字initX = w / 2;QFont font("Microsoft YaHei", radius);painter->setFont(font);painter->setPen(d->foregroundColor);painter->setBrush(Qt::NoBrush);for (int i = 0; i < step; i++) {QRect textRect(initX - radius, initY - radius, radius * 2, radius * 2);painter->drawText(textRect, Qt::AlignCenter, QString::number(i + 1));initX += w;}
}void NavigationProgressBar::drawText(QPainter *painter, const bool ok)
{double w = width() / d->maxStep * 1.0;double h = height() / 3.0;double initX = 0;double initY = 0;QColor color = ok? d->currentBackgroundColor: d->backgroundColor;painter->setFont(QFont("Microsoft YaHei", h / 4));painter->setPen(color);painter->setBrush(Qt::NoBrush);int step = ok ? d->step: d->maxStep;for (int i = 0; i < step; i++) {QRect textRect(initX, initY, w, h);painter->drawText(textRect, Qt::AlignCenter, d->topInfo.at(i));initX += w;}if(ok){initX = 0;initY = h * 2;for (int i = 0; i < step; i++) {QRect textRect(initX, initY, w, h);painter->drawText(textRect, Qt::AlignCenter, d->dateList.at(i));initX += w;}}
}
 3、示例代码

 下面是一个示例代码，演示了如何创建一个 NavigationProgressBar控件

#include "mainwindow.h"
#include "navigationprogressbar.h"#include <QtWidgets>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent)
{NavigationProgressBar *nav = new NavigationProgressBar(this);QStringList topInfo;topInfo << "拍下商品" << "已付款" << "卖家发货" << "确认收货" << "评价";nav->setMessageList(topInfo);QSlider *slider = new QSlider(this);slider->setRange(0, 5);connect(slider, &QSlider::valueChanged, nav, &NavigationProgressBar::setStep);QWidget *widget = new QWidget(this);QHBoxLayout *layout = new QHBoxLayout(widget);layout->addWidget(nav);layout->addWidget(slider);setCentralWidget(widget);resize(850, 150);
}MainWindow::~MainWindow()
{
}

        本示例演示了淘宝订单流程样式。控件自适应任何分辨率，可以自由调整自身大小以适应分辨率的改变，总步骤以及当前步骤都是自动计算占用区域比例，直接提供接口设置步骤对应的文字信息等，接口非常友好。

        这个示例只是一个基本的实现，实际应用中可能需要更复杂的逻辑来处理实时更新和动画显示，如文字自适应大小等。

在设计技巧方面，‌主要思路如下：‌

1、清晰的反馈机制：‌采用直观的标签、‌百分比或其他可视化元素，‌使用户可以轻松识别任务的进行状态，‌建立用户对应用程序的信任度，‌并让他们感到更有控制权和参与感。‌

2、利用动画效果：‌动画效果如渐变、‌平滑过渡等，‌使进度条显得更富有生命力，‌提升用户体验，‌让进度的变化更为直观。‌

3、适配用户期望的颜色搭配：‌在UI设计中，‌色彩运用极为关键，‌通过适配用户期望的颜色搭配，‌增强进度条的吸引力和易用性。

          谢谢您的阅读，希望本文对您有所启发。如果您还有任何问题或需要进一步帮助，请随时与我联系。祝您度过愉快的一天！

五、源代码下载  ​

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

MySQL数据库慢查询日志、SQL分析、数据库诊断

MySQL数据库慢查询日志、SQL分析、数据库诊断

1 数据库调优维度 业务需求&#xff1a;勇敢地对不合理的需求说不系统架构&#xff1a;做架构设计的时候&#xff0c;应充分考虑业务的实际情况&#xff0c;考虑好数据库的各种选择(读写分离?高可用?实例个数?分库分表?用什么数据库?)SQL及索引&#xff1a;根据需求编写良…
阅读更多...
JavaEE--JavaWeb服务器的安装配置(Tomcat服务器安装配置)

JavaEE--JavaWeb服务器的安装配置(Tomcat服务器安装配置)

前言: 本文介绍了 Java Web 服务器 Tomcat 的安装配置&#xff0c;并详细说明了如何在 IntelliJ IDEA 中配置服务器&#xff0c;创建 JavaEE 项目&#xff0c;并发布文章。文章首先解释了前端程序如何访问后端程序以及 Web 服务器的概念&#xff0c;然后详细介绍了安装 Tomcat…
阅读更多...
各地跨境电子商务示范区工具变量DID数据（2010-2022年）

各地跨境电子商务示范区工具变量DID数据（2010-2022年）

数据来源&#xff1a;参考李震等&#xff08;2023&#xff09;的做法&#xff0c;从官方网站上搜集整理了我国跨境电子商务示范区名单与上市公司进行匹配制作。时间跨度&#xff1a;2010-2022年数据范围&#xff1a;上市企业包含指标&#xff1a; stock year 证券简称 In…
阅读更多...
大模型RAG优化方案与实践（非常详细）从入门到精通，看这一篇就够了

大模型RAG优化方案与实践（非常详细）从入门到精通，看这一篇就够了

RAG通过检索现有的大量知识&#xff0c;结合强大的生成模型&#xff0c;为复杂的问答、文本摘要和生成任务带来了全新的解决方案。本文详细的介绍了RAG遇到的挑战、通用范式、工程实践、优化实现策略等。 一、RAG的背景介绍 随着ChatGPT的兴起&#xff0c;大语言模型再次走进…
阅读更多...
伪分布式部署 DolphinScheduler

伪分布式部署 DolphinScheduler

1.添加用户 useradd dolphinscheduler echo "dolphinscheduler" | passwd --stdin dolphinscheduler sed -i $adolphinscheduler ALL(ALL) NOPASSWD: NOPASSWD: ALL /etc/sudoers sed -i s/Defaults requirett/#Defaults requirett/g /etc/sudoers chown -R …
阅读更多...
7.17IO

7.17IO

1. #include <sys/types.h> #include <dirent.h> DIR *opendir(const char *name); 功能描述&#xff1a;打开name文件夹&#xff0c;返回该文件夹的描述符 返回值&#xff1a;成功返回描述符&#xff0c;失败返回NULL opendir()函数打开与目录名对应的目录流…
阅读更多...
ssrf复习（及ctfshow351-360）

ssrf复习（及ctfshow351-360）

1. SSRF 概述 服务器会根据用户提交的URL发送一个HTTP请求。使用用户指定的URL&#xff0c;Web应用可以获取图片或者文件资源等。典型的例子是百度识图功能。 如果没有对用户提交URL和远端服务器所返回的信息做合适的验证或过滤&#xff0c;就有可能存在“请求伪造"的缺陷…
阅读更多...
C++之智能指针：shared_ptr、unique_ptr、weak_ptr的概念、用法即它们之间的关系

C++之智能指针：shared_ptr、unique_ptr、weak_ptr的概念、用法即它们之间的关系

智能指针 (1)概述 A.Why&#xff08;C为什么引入智能指针&#xff09; C引入智能指针的根本原因就是解决手动管理动态内存所带来的问题&#xff0c;手动管理动态内存常见的问题如下&#xff1a;内存泄漏、悬挂指针、释放操作未定义等 内存泄漏问题&#xff1a; 当程序用光了它…
阅读更多...
国产开源系统openEuler_24.03_LTS部署安装/基础配置/验证连接实操手册

国产开源系统openEuler_24.03_LTS部署安装/基础配置/验证连接实操手册

前言&#xff1a; openEuler 是开放原子开源基金会&#xff08;OpenAtom Foundation&#xff09;孵化及运营的开源项目。 欧拉操作系统(openEuler&#xff0c;简称“欧拉”,“开源欧拉”)是面向数字基础设施的操作系统&#xff0c;支持服务器、云计算、边缘计算、嵌入式等应用场…
阅读更多...
ctfshow~菜狗杯 你会数数吗

ctfshow~菜狗杯 你会数数吗

用010Editor打开文件附件 选择工具->直方图 选择记数&#xff0c;从上到下就是flag ctfshow{a1b2d3e4g56i7j8k9l0}
阅读更多...
操作系统内核源码杂谈篇：临界区

操作系统内核源码杂谈篇：临界区

临界资源&#xff0c;是指同一时刻只能由一个线程&#xff08;linux下为进程&#xff09;访问的资源&#xff0c;而临界区就是为了确保临界资源访问是单一数据流。 临界区的代码执行&#xff0c;也就是进行原子操作&#xff0c;不会被打断。 先分析RTOS的运行架构&#xff0c…
阅读更多...
构建自定义bootos

构建自定义bootos

1 构建自定义bootos BootOS (也称 ramos )，是一个基于内存的操作系统，系统启动后全部加载到内存中运行，不依赖磁盘存储设备，因此可以对硬件层级进行一系列的操作。主要分为两部分内核和文件系统。 1.1 构建vmlinuz内核文件 1.1.1 从现有系统获取 从系统iso镜像获…
阅读更多...
3.5、matlab打开显示保存点云文件(.ply/.pcd)以及经典点云模型数据

3.5、matlab打开显示保存点云文件(.ply/.pcd)以及经典点云模型数据

1、点云数据简介 点云数据是三维空间中由大量二维点坐标组成的数据集合。每个点代表空间中的一个坐标点&#xff0c;可以包含有关该点的颜色、法向量、强度值等额外信息。点云数据可以通过激光扫描、结构光扫描、摄像机捕捉等方式获取&#xff0c;广泛应用于计算机视觉、机器人…
阅读更多...
第100+16步 ChatGPT学习：R实现Xgboost分类

第100+16步 ChatGPT学习：R实现Xgboost分类

基于R 4.2.2版本演示 一、写在前面 有不少大佬问做机器学习分类能不能用R语言&#xff0c;不想学Python咯。 答曰&#xff1a;可&#xff01;用GPT或者Kimi转一下就得了呗。 加上最近也没啥内容写了&#xff0c;就帮各位搬运一下吧。 二、R代码实现Xgboost分类 &#xff08…
阅读更多...
【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第二篇 Linux系统编程篇-第三十二章 目录IO

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第二篇 Linux系统编程篇-第三十二章 目录IO

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…
阅读更多...
Window 安装Open Cascade

Window 安装Open Cascade

目录 一、下载软件 二、环境配置 一、下载软件 下载网址&#xff1a;Download - Open CASCADE Technology 新手推荐exe方式进行安装&#xff0c;直接就可以使用&#xff0c;这里使用 vc140 &#xff0c;配合vs2015来使用。 假设安装在D盘&#xff0c;安装完成如下&#xff…
阅读更多...
栈和队列深入浅出

栈和队列深入浅出

目录&#xff1a; 一. 栈的概念及使用 二.栈的相关经典OJ 三. 队列的概念及使用 二. 队列的相关经典OJ 一. 栈的概念及使用&#xff1a; 1. 概念&#xff1a; 栈一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈…
阅读更多...
【前端】ikun-qrcode：极简的二维码生成组件，使用view而非canvas避免层级问题

【前端】ikun-qrcode：极简的二维码生成组件，使用view而非canvas避免层级问题

文章目录 背景ikun-qrcode界面效果如何发布一款自己的插件到uniapp市场。&#xff08;5分钟搞定&#xff09; 背景 之前在uniapp上100行搞定二维码生成&#xff0c; 现在封装为vue组件分享出来&#xff1a; 下载地址&#xff1a; https://ext.dcloud.net.cn/plugin?id19351 …
阅读更多...
【C++初阶】C/C++内存管理

【C++初阶】C/C++内存管理

【C初阶】C/C内存管理 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;C&#x1f96d; &#x1f33c;文章目录&#x1f33c; 1. C/C内存分布 2. C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free 3. C内存管理方式 3…
阅读更多...
【Python】AI赋能自动化测试—Applitools Eyes让视觉检查自动化测试更智能、更高效（限时公开）

【Python】AI赋能自动化测试—Applitools Eyes让视觉检查自动化测试更智能、更高效（限时公开）

文章目录 一.视觉回归测试1.什么是视觉回归测试&#xff1f;2.视觉回归测试的必要性3.视觉回归测试是如何工作的&#xff1f;4.常用的视觉回归测试工具有哪些&#xff1f; 二.Applitools Eyes1.是什么2.优缺点3.注册平台账号功能介绍1.界面切换2.单条视觉测试结果解读3.测试视图…
阅读更多...
最新文章

Copyright @ 2022~2023