【Qt 学习笔记】Qt常用控件 | 显示类控件 | Progress Bar的使用及说明

Qt常用控件 | 显示类控件 | Progress Bar的使用及说明

文章编号：Qt 学习笔记 / 26

文章目录

• Qt常用控件 | 显示类控件 | Progress Bar的使用及说明
• • 一、QProgressBar介绍
  • • 1. 简介
    • 2. 常用属性及说明
    • 二、QProgressBar样式
    • • 1. Horizontal
      • 2. Vertical
      • 二、QProgressBar的使用（代码示例）
      • • 1. 设置进度条按时间增长
        • 2. 设置红色的进度条

          ---

          一、QProgressBar介绍

          1. 简介

          QProgressBar是一个Qt框架中的控件，用于显示进度条。 它可以用于表示任务的完成进度或操作的进度。

          QProgressBar可以在水平或垂直方向上显示进度条。 它可以通过设置最小值和最大值来指定进度条的范围。

          QProgressBar提供了一些方法和属性，可以方便地设置进度条的值、范围、样式等。可以通过在Qt Designer中使用QProgressBar，或者在代码中创建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 ：表⽰总时间（以毫秒为单位）

          ---

          二、QProgressBar样式

          1. Horizontal

          

          2. Vertical

          

          ---

          二、QProgressBar的使用（代码示例）

          1. 设置进度条按时间增长

          1. 在界⾯上创建进度条（progressBar），并修改value值为0

             

          2. 修改 widget.h，创建 QTimer 和 handle 槽函数.

          public:
              Widget(QWidget *parent = nullptr);
              ~Widget();
              void handle();
          private:
              Ui::Widget *ui;
              QTimer * timer;
          

          1. 修改 widget.cpp, 初始化 QTimer

             

          此处设置 100ms 触发⼀次 timeout 信号. 也就是⼀秒钟触发 10 次
          

          Widget::Widget(QWidget *parent)
              : QWidget(parent)
              , ui(new Ui::Widget)
          {
              ui->setupUi(this);
              ui->progressBar->setValue(0);
              timer=new QTimer(this);
              connect(timer,&QTimer::timeout,this,&Widget::handle);
              timer->start(100);
          }
          

          1. 修改 widget.cpp，编辑handle槽函数

             

          void Widget::handle()
          {
             int value=ui->progressBar->value();
              if(value>=100)
              {
                  timer->stop();
                  return;
              }
              ui->progressBar->setValue(value+1);
          }
          

          1. 运行程序，查看结果进度条开始增长到100停止

             

          文件代码：

          #ifndef WIDGET_H
          #define WIDGET_H
          #include 
          #include 
          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
          

          #include "widget.h"
          #include "ui_widget.h"
          Widget::Widget(QWidget *parent)
              : QWidget(parent)
              , ui(new Ui::Widget)
          {
              ui->setupUi(this);
              ui->progressBar->setValue(0);
              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);
          }
          

          2. 设置红色的进度条

          在Qt中，可以使⽤ styleSheet 通过样式来修改进度条的颜⾊

          1. 创建一个进度条

             

          2. 右键点击进度条，选择改变样式表（或者在 Qt Designer 右侧的属性编辑器中, 找到 QWidget 的 styleSheet 属性.）

             

          3. 输入以下代码QProgressBar::chunk {background-color: #FF0000;}，其中的 chunk 是选中进度条中的每个 “块” . 使⽤ QProgressBar::text 则可以选中⽂本

             

          4. 并将 QProcessBar 的 alignment 属性设置为垂直⽔平居中

             

          5. 执⾏程序，就得到了红色的进度条

             

          ---