【QT入门】Qt自定义控件与样式设计之QProgressBar用法及qss

往期回顾

【QT入门】 Qt自定义控件与样式设计之QComboBox样式表介绍-CSDN博客

【QT入门】 Qt自定义控件与样式设计之QCheckBox qss实现按钮开关-CSDN博客

【QT入门】 Qt自定义控件与样式设计之QPushButton点击按钮弹出菜单-CSDN博客

 【QT入门】Qt自定义控件与样式设计之QProgressBar用法及qss

一、两种样式

1、水平的QProgressBar

2、竖直的QProgressBar

二、qss设计

 1、水平qss设计

QProgressBar样式默认就是水平的。

这里的chunk表示里面的进度条属性

QProgressBar
{
      background:rgb(54,54,54);
      border:none;   /*无边框*/
      border-radius:5px;
      text-align:center;   /*文本的位置*/
      color: rgb(229, 229, 229);  /*文本颜色*/
}
 
QProgressBar::chunk 
{
      background-color:rgb(58, 154, 255);
      border-radius:4px;
}

2、竖直qss设计 

QProgressBar:vertical
{
 border-radius:5px;
 background-color:darkgray;
 text-align:center;
 padding-left: 5px; padding-right: 4px; padding-bottom: 2px; 
}

QProgressBar::chunk:vertical
{
 background-color:#06B025;
 margin:1px;
}

三、逻辑设计

这里我们就看一个，默认的水平样式设计，我们用到了一个新东西：QTimer定时器。

1、QTimer

QTimer是Qt框架中提供的定时器类，用于在指定时间间隔后触发特定的操作。它是基于事件循环的，可以在GUI应用程序中用于执行周期性任务或延迟任务。

1.1重要特性

定时器的工作方式:	QTimer通过Qt的事件循环来实现定时功能。在每次事件循环迭代时，QTimer会检查是否已经到达设定的时间间隔，若是，则发出timeout()信号。
设置定时器的时间间隔:	通过调用setInterval(milliseconds)方法设置定时器的时间间隔，以毫秒为单位。这个时间间隔指定了QTimer何时发出timeout()信号。
启动和停止定时器:	使用start()方法启动定时器，使用stop()方法停止定时器。
单次触发和重复触发:	可以通过setSingleShot(true)来设置定时器为单次触发模式，这样定时器只会在第一次超时后发出timeout()信号。默认情况下，定时器是重复触发的。
处理定时器超时事件:	可以连接timeout()信号到槽函数，以便在定时器超时时执行特定操作。
精确度:	QTimer的精确度受到事件循环的影响，如果事件循环的处理时间较长，可能会导致定时器的触发时间有所偏差。
线程安全性:	QTimer是线程安全的，可以在任何线程中创建和操作定时器对象。
应用场景:	QTimer常用于定时执行UI更新、周期性任务、延迟执行任务等场景。

2、控制QProgressBar进度

用两个按钮来控制进度条，用了一个定时器QTimer，当点击开始信号，连接信号槽，定时器对象m_timer调用start方法，参数是延迟时间

void Widget::on_btnStart_clicked()
{
    //用于启动某个操作，并指定在多少毫秒后执行，延迟时间100毫秒
    //这个延迟时间跟操作系统有关，不同的精度不一样
    m_timer->start(100);
}

void Widget::on_btnStop_clicked()
{
    m_timer->stop();
}

3、响应点击信号实现进度条 

当启动后，每到一次延迟时间，QTimer的timeout信号被触发，执行相应的槽函数，value值++并设置给progressBar，这样就实现了进度条、

3.1定义一个定时器来用于控制进度条

    m_timer = new QTimer(this);
    
    //设置初始值为0
    ui->progressBar->setValue(0);
    //设置范围为0-100
    ui->progressBar->setRange(0, 100);
    ui->progressBar->setFormat("%p");

setValue(0);	设定初值
setRange(0, 100);	设置进度条范围
setFormat("%p");	设置显示的进度数字格式

这里这个显示的进度数字格式可以留意一下：

1、默认值为“%p%”          显示为进度数+%

2、%p-替换为已完成的百分比。显示只有进度的数字

3、%v-替换为当前值。       显示只有进度的数字

4、%m-替换为步骤总数。     显示一直是设置的最大值

3.2槽函数链接

    //槽函数连接，某个计时器或定时操作已经到达预定的时间点时触发timeout这个信号
    connect(m_timer,&QTimer::timeout,[=]{
        static int value=0;

        ui->progressBar->setValue(value++);

    });

通过以上逻辑，我们就是实现了一个点击按钮，自动增加进度的QProgressBar进度条

---

以上就是QProgressBar实现进度条的基本示例。

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！