【Qt开发】显示类控件(三)-> QProgressBar

发布于:2025-09-15 ⋅ 阅读:(18) ⋅ 点赞:(0)

目录

1 -> 概述

2 -> 核心属性

3 -> 核心作用

4 -> 两种基本模式

5 -> 视觉与文本

6 -> 代码示例

6.1 -> 设置进度条按时间增长

6.2 -> 创建一个天蓝色进度条

7 -> 总结


1 -> 概述

在图形用户界面(GUI)程序中,良好的用户体验至关重要。当应用程序执行一个需要等待的耗时任务时,如文件复制、数据加载、软件安装或复杂计算,如果界面没有任何提示,用户会感到困惑、焦虑,甚至怀疑程序是否已经崩溃。Qt 框架提供的 QProgressBar 控件,正是解决这一问题的核心组件,它是一个用于向用户直观展示任务完成进度的强大工具。

2 -> 核心属性

属性 说明
minimum 进度条最小值
maximum 进度条最大值
value 进度条当前值
alignment

文本在进度条中的对齐方式

  • Qt::AlignLeft:左对齐
  • Qt::AlignRight:右对齐
  • Qt::AlignCenter:居中对齐
  • Qt::AlignJustify:两端对齐
textVisible 进度条的数字是否可见
orientation 进度条的方向是水平还是垂直
invertAppearance 是否朝反方向增长进度
textDirection 文本的朝向
format

展示的数字格式

  • %p:表示进度的百分比(0-100)
  • %v:表示进度的数值(0-100)
  • %m:表示剩余时间(以毫秒为单位)
  • %t:表示总时间(以毫秒为单位)

3 -> 核心作用

QProgressBar,即进度条,其核心价值在于提供视觉反馈。它将一个抽象、不确定的等待过程,转化为一个具体、可视化的前进过程。通过一个逐渐被填满的长条形图形,配以精确的百分比数字,它明确地告知用户:

  1. 任务正在执行中:程序没有停止响应。

  2. 任务的总量是多少:通过进度条的总长度表示。

  3. 当前已完成多少:通过已填充的长度和百分比数值表示。

  4. 大致还需等待多久:用户可以根据填充速度自行预估。

这种反馈极大地提升了软件的友好度和专业感,是设计现代化、人性化应用程序不可或缺的元素。

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_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    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 开发者都应该熟练掌握并善用的基础控件。


感谢各位大佬支持!!!

互三啦!!!