手机网站设计案例电子商务网站建设个人总结
目录
1 -> 概述
2 -> 核心属性
3 -> 核心作用
4 -> 两种基本模式
5 -> 视觉与文本
6 -> 代码示例
6.1 -> 设置进度条按时间增长
6.2 -> 创建一个天蓝色进度条
7 -> 总结
1 -> 概述
在图形用户界面（GUI）程序中，良好的用户体验至关重要。当应用程序执行一个需要等待的耗时任务时，如文件复制、数据加载、软件安装或复杂计算，如果界面没有任何提示，用户会感到困惑、焦虑，甚至怀疑程序是否已经崩溃。Qt 框架提供的 QProgressBar 控件，正是解决这一问题的核心组件，它是一个用于向用户直观展示任务完成进度的强大工具。
2 -> 核心属性
| 属性 | 说明 |
| minimum | 进度条最小值 |
| maximum | 进度条最大值 |
| value | 进度条当前值 |
| alignment | 文本在进度条中的对齐方式
|
| textVisible | 进度条的数字是否可见 |
| orientation | 进度条的方向是水平还是垂直 |
| invertAppearance | 是否朝反方向增长进度 |
| textDirection | 文本的朝向 |
| format | 展示的数字格式
|
3 -> 核心作用
QProgressBar，即进度条，其核心价值在于提供视觉反馈。它将一个抽象、不确定的等待过程，转化为一个具体、可视化的前进过程。通过一个逐渐被填满的长条形图形，配以精确的百分比数字，它明确地告知用户：
-
任务正在执行中：程序没有停止响应。
-
任务的总量是多少：通过进度条的总长度表示。
-
当前已完成多少：通过已填充的长度和百分比数值表示。
-
大致还需等待多久：用户可以根据填充速度自行预估。
这种反馈极大地提升了软件的友好度和专业感，是设计现代化、人性化应用程序不可或缺的元素。
4 -> 两种基本模式
QProgressBar 能够以两种截然不同的模式工作，以适应不同的任务场景：
-
确定性进度条（Determinate）：
这是最常用也是最理想的模式。它适用于您可以准确知道任务总工作量（最大值）和当前已完成工作量（当前值）的场景。例如，你知道要复制 100 个文件，当前已复制了 35 个。进度条会平滑地从 0% 走向 100%，给用户精确和可靠的期待。 -
不确定性进度条（Indeterminate）：
有时，我们无法预知任务何时结束。例如，等待网络响应、搜索未知数量的项目或执行一个无法分步测量的复杂操作。此时，确定性进度条不再适用。QProgressBar 提供了 “忙碌指示” 功能，通常表现为一个在条带上循环滚动的块（marquee）或一个来回摆动的条纹动画。它只向用户传达“程序正在忙，请稍候”的信息，而不提供完成时间。
开发者可以根据任务的具体性质，动态地在两种模式间切换，以达到最合适的通信效果。
5 -> 视觉与文本
Qt 的强大之处在于其高度的可定制性，QProgressBar 也不例外。您完全可以调整其外观以匹配应用程序的整体设计风格。
-
文本显示：您可以控制进度条上显示的文字内容。默认情况下，它显示百分比（如 “75%”）。您可以将其隐藏，或自定义为更友好的文本（如 “处理中... 35/100”）。
-
外观样式：通过 Qt 的样式表（QSS），您可以像定义网页CSS一样，轻松改变进度条的几乎所有视觉属性：
-
颜色：可以设置背景色、已完成部分的填充色、文本颜色。常见的做法是用绿色表示正常进度，黄色表示警告，红色表示错误或暂停。
-
形状与边框：可以定义圆角矩形、直角矩形，调整边框的粗细和颜色。
-
纹理与渐变：甚至可以为其添加渐变效果或图像纹理，让界面更加炫丽。
-
这种灵活性确保了 QProgressBar 既能融入简约的商务软件，也能适配炫酷的多媒体应用。
6 -> 代码示例
6.1 -> 设置进度条按时间增长
1. 在界面上创建进度条，objectName 为默认
其中最小值设为 0，最大值设为 100。当前值设为 0。
2. 修改 widget.h，创建 QTimer 和 handle 函数
#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QTimer>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();void handle();private:Ui::Widget *ui;QTimer* timer;
};
#endif // WIDGET_H
3. 修改 widget.cpp，初始化 QTimer
此处设置 100ms 触发一次 timeout 信号。也就是一秒钟触发 10 此。
#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);timer = new QTimer(this);connect(timer, &QTimer::timeout, this, &Widget::handle);timer->start(100);
}Widget::~Widget()
{delete ui;
}4. 修改 widget.cpp，实现 handle
#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);timer = new QTimer(this);connect(timer, &QTimer::timeout, this, &Widget::handle);timer->start(100);
}Widget::~Widget()
{delete ui;
}void Widget::handle()
{int value = ui->progressBar->value();if (value >= 100){timer->stop();return;}ui->progressBar->setValue(value + 1);
}5. 运行程序，可以看到进度条中的进度在快速增长
在实际开发中，进度条的取值，往往是根据当前任务的实际进度来进行设置的。
比如需要读取一个很大的文件，就可以获取文件的总大小，和当前读取完毕的大小，来设置进度条比例。
6.2 -> 创建一个天蓝色进度条
1. 在界面上创建一个进度条
2. 在 Qt Designer 右侧的属性编辑器中，找到 QWidget 的 styleSheet 属性
编辑如下内容：
其中的 chunk 是选中进度条中的每个 “块”。使用 QProgressBar::text 则可以选中文本。
QProgressBar::chunk{ background-color:skyblue; }
同时把 QProcessBar 的 alignment 属性设置为垂直水平居中。
如果不设置 alignment，进度条中的数字会跑到左上角。
3. 执行程序，可以看到如下效果。我们就会得到一个天蓝色的进度条
通过上述方法，也可以修改文字的颜色，字体大小等样式。
7 -> 总结
有效使用 QProgressBar 是一门艺术。通常，它应与多线程技术结合使用。将耗时任务放在一个独立的工作线程（Worker Thread）中，然后通过信号槽机制，由该线程定期向主线程（GUI 线程）报告进度更新。这样做可以确保界面始终保持流畅和响应，不会被繁重的计算任务所阻塞。
QProgressBar 远不止一个简单的长方形填充图形。它是连接应用程序后台运算与前台用户感知的关键桥梁。一个设计得当的进度条，能够有效管理用户的等待预期，减轻焦虑情绪，并显著提升整个软件产品的质感与可靠性。在 Qt 强大而灵活的框架下，QProgressBar 为实现这一目标提供了简单而全面的解决方案，是每一位 Qt 开发者都应该熟练掌握并善用的基础控件。
感谢各位大佬支持！！！
互三啦！！！