1 QProgressBar

在Qt中存在一个较为常见的进度条控件, 为QProgressBar;

其核心属性为如下:

属性	说明
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 - 表示总时间 (以毫秒为单位)

需要注意的是, 通常不同系统下其进度条运行后的样式也不同;

---

1.1 创建进度条程序

前文中提到了如何通过QTimer来实现一个倒计时的程序, 在该程序中, 我们设计一个进度条的程序, 每隔对应的时间让进度条增长1;

该程序所需的控件为如下:

1. QPushButton

   存在两个QPushButton控件(reset, start), 分别用于重置进度条与开始进度条;

2. QProgressBar

   进度条控件;

其功能主要为, 当点击start按钮后, 将会把两个QPushButton的enable属性设置为false, 并开始进度条, 当进度条>=1001时, 停止进度条的进度, 并将QPushButton的enable属性设置为true;

• 初始化控件

  首先同样的在这里QTimer是核心的对象, 且其或许在槽函数中将被调用, 因此将其设置为成员对象;

  同时在Designer中定义的控件并没有初始化, 因此需要对对应的控件进行初始化;

  在QProgressBar中存在一个成员方法为reset(), 可以直接对QProgressBar重置;

  Widget::Widget(QWidget *parent)
      : QWidget(parent)
      , ui(new Ui::Widget)
      , _timer(new QTimer(this)) 
  {
      ui->setupUi(this);
      ui->reset->setText("Reset");
      ui->start->setText("Start");
      ui->progressBar->reset();
      connect(_timer, &QTimer::timeout, this, &Widget::updateProgress);
  }
  

• 更新进度条值

  当QTimer调用start(int)后, 其将会每隔int值(单位ms)发出一个QTimer::timeout()信号, 因此需要存在一个槽来处理该信号;

  这个槽也需要做另外几件事:

  • 更新进度条
  • 当值为100时停止计时
  • 停止计时后恢复QPushButton的Enable状态

  void Widget::updateProgress()
  {
      int value = ui->progressBar->value();
      if(value >=100){
          _timer->stop();
          ui->reset->setEnabled(true);
          ui->start->setEnabled(true);
          return;
      }
      ui->progressBar->setValue(value+1);
  }
  

• 启动进度条

  这是QPushButton - Start按钮的clicked信号对应的槽, 启动进度条时, 需要去调用QTimer::start(int)并传入一个值(单位为毫秒)为QTime::timeout()的信号周期;

  并且为保证不在进度条运行期间频繁使用Reset按钮与Start按钮造成的延迟, 将按钮的Enable状态设置为false;

  void Widget::on_start_clicked()
  {
      _timer->start(50);
      ui->reset->setEnabled(false);
      ui->start->setEnabled(false);
  }
  

  这里每隔50ms发送一次QTimer::timeout信号, 表示进度条每隔50ms增长1;

• 重置进度条

  这是QPushButton - Reset按钮的clicked信号对应的槽, 当该按钮按下后将调QProgressBar::reset()来重置进度条;

  void Widget::on_reset_clicked()
  {
      ui->progressBar->reset();
  }
  

• 完整代码(widget.cpp)

  Widget::Widget(QWidget *parent)
      : QWidget(parent)
      , ui(new Ui::Widget)
      , _timer(new QTimer(this))
  {
      ui->setupUi(this);
      ui->reset->setText("Reset");
      ui->start->setText("Start");
      ui->progressBar->reset();
      connect(_timer, &QTimer::timeout, this, &Widget::updateProgress);
  }
  
  Widget::~Widget()
  {
      delete ui;
  }
  
  void Widget::updateProgress()
  {
      int value = ui->progressBar->value();
      if(value >=100){
          _timer->stop();
          ui->reset->setEnabled(true);
          ui->start->setEnabled(true);
          return;
      }
      ui->progressBar->setValue(value+1);
  }
  
  void Widget::on_reset_clicked()
  {
      ui->progressBar->reset();
  }
  
  void Widget::on_start_clicked()
  {
      _timer->start(50);
      ui->reset->setEnabled(false);
      ui->start->setEnabled(false);
  }
  

运行结果为:

同时, 可以通过StyleSheet来更新QProgressBar的样式;

我们期望将进度条的进度颜色改为红色, 修改后对应的代码为:

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
    , _timer(new QTimer(this))
{
    ui->setupUi(this);
    ui->reset->setText("Reset");
    ui->start->setText("Start");
    ui->progressBar->reset();
    connect(_timer, &QTimer::timeout, this, &Widget::updateProgress);
    ui->progressBar->setStyleSheet("QProgressBar::chunk{background: red;}");
}

这里的setStyleSheet中, "QProgressBar::chunk{background: red;}"是一种选择器的用法, 即选择QProgressBar中的子元素chunk设置样式;

运行结果为:

从结果可以看到, 这里的进度条除了颜色变了以外, 整体的样式也变了, 且对应的百分比变成了QProgressBar控件的左上角;

实际上一些控件将会根据系统的样式设置默认的StyleSheet, 而当通过setStyleSheet方法来修改对应控件的样式时, 该StyleSheet将会覆盖原有的StyleSheet样式, 因此样式整体发生了改变;

---

2 QCalendarWidget

QCalendarWidget控件是Qt中的日历控件;

其核心属性通常为如下:

属性	说明
selectDate	当前选中日期
minimumDate	最小日期
maximumDate	最大日期
firstDayOfWeek	每周第一天(日历第一列)是周几
gridVisible	是否显示表格的边框
selectionMode	是否允许选择日期
navigationBarVisible	日历上方标题是否显示
horizontalHeaderFormat	日历上方标题显示的日期格式
verticalHeaderFormat	日历第一列显示的内容格式
deteEditEnabled	是否允许日期被编辑

其较为重要的信号有如下:

信号	说明
selectionChanged(const QDate&)	当选中的日期发生改变时发出
activated(const QDate&)	当双击一个有效的日期或者按下Enter键时发出该信号, 形参是一个QDate类型, 保存了选中的日期
currentPageChanged(int, int)	当年份月份改变时发出该信号, 形参表示改变后的新年份和月份

---

2.1 日期选择小程序

设计一个小程序, 包含一个Label用于显示日期, 一个QCalendarWidget日历控件用于日期选择;

对应的代码为:

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->label->setText(""); // 初始化Label显示为空
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_calendarWidget_selectionChanged()
{
    QDate date = ui->calendarWidget->selectedDate();
    QString date_str = date.toString();
    ui->label->setText(date_str);
}

运行结果为: