009 Qt_显示类控件_QLCDNumber、ProgressBar、Calendar

前言

本文将会向你介绍显示类控件中QLCDNumber显示数字、ProgressBar进度条、Calendar日历

LCD Number

QLCDNumer 是⼀个专门用来显示数字的控件. 类似于 “老式计算器” 的效果.

属性	说明
intValue	QLCDNumber 显示的数字值(int).
value	QLCDNumber 显示的数字值(double).和 intValue 是联动的.例如给 value 设为 1.5, intValue 的值就是 2.另外, 设置 value 和 intValue 的⽅法名字为 display , ⽽不是 setValue 或setIntValue .
digitCount	显示几位数字.
mode	数字显示形式.1. QLCDNumber::Dec ：⼗进制模式，显示常规的⼗进制数字。2. QLCDNumber::Hex ：⼗六进制模式，以⼗六进制格式显示数字。3. QLCDNumber::Bin ：⼆进制模式，以⼆进制格式显示数字。4. QLCDNumber::Oct ：⼋进制模式，以⼋进制格式显⽰数字。只有⼗进制的时候才能显示小数点后的内容
segmentStyle	设置显示风格.1. QLCDNumber::Flat ：平面的显示风格，数字呈现在⼀个平坦的表⾯上。2.QLCDNumber::Outline ：轮廓显示风格，数字具有清晰的轮廓和阴影效果。3. QLCDNumber::Filled ：填充显⽰⻛格，数字被填充颜⾊并与背景区分开
smallDecimalPoint	设置比较小的小数点.

示例一 ：倒计时

①在界面上创建一个QLCDNumber控件，初始值设置为10

②修改widget.h代码，创建⼀个 QTimer 成员, 和⼀个 updateTime 函数

QTimer* timer;
void updateTime();

③修改widget.cpp文件，初始化QTimer，使用connect将QTimer::timeout信号和Widget::updateTime函数连接起来，每次触发QTimer::timeout信号都会执行Widget::updateTime函数。通过start函数启动定时器后就会隔一个周期触发一次QTimer::timeout信号

updateTime：通过intValue获取到QLCDNumber内部的数值，如果value的值归0了，就停止QTimer，停止后QTimer就不会触发timeout信号了

#include "widget.h"
#include "ui_widget.h"
#include <QTimer>
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //创建QTimer实例
    timer = new QTimer(this);
    //每次触发timeout信号都会伴随着updateTime函数执行
    connect(timer, &QTimer::timeout, this, &Widget::updateTime);
    //启动QTimer，每隔1000ms触发一次timeout信号
    timer->start(1000);
}

void Widget::updateTime()
{
    qDebug() << "updateTime";
    int value = ui->lcdNumber->intValue();
    if(value <= 0)
    {
    	//停止定时器
        timer->stop();
        return;
    }
    //更新LCDNunmer控件上的数值
    ui->lcdNumber->display(value - 1);
}

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

④执行程序，观察倒计时结果

值得注意的是：上述的实现方式利用了 Qt 的信号与槽机制，使得 QTimer 的 timeout 信号可以方便地连接到自定义的槽函数 updateTime，从而实现倒计时。我们可以容易地想到用一个循环实现倒计时，即在一个循环里，每次sleep1s，value–，然后更新显示在LCDNumber的值

#include "widget.h"
#include "ui_widget.h"
#include <thread>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    int value = ui->lcdNumber->intValue();
    while(true){
        std::this_thread::sleep_for(std::chrono::seconds(1));
        if(value <= 0) break;
        //将数值显示在lcdNumber上
        ui->lcdNumber->display(value-1);
    }
}
Widget::~Widget()
{
    delete ui;
}

以上的代码很明显是不行的，原因是
在Qt中，主线程负责处理所有的用户界面事件和更新，包括绘制窗口和处理用户输入。
使用while (true)循环并在循环中调用std::this_thread::sleep_for将会使得主线程在构造函数中被完全阻塞。在这个时间段内，Qt无法处理任何其他事件，也无法更新UI，因此就不要想着界面1s接着1s的更新了，整个界面根本就出不来！！！

那我们将循环+sleep的代码逻辑放到另一个线程是否能解决这个问题？

    std::thread t([this](){
            int value = ui->lcdNumber->intValue();
            while(true){
                std::this_thread::sleep_for(std::chrono::seconds(1));
                if(value <= 0)
                    break;
            }
    });

以上代码同样是不可以的，Qt中规定，任何对于GUI上内容的操作，都必须在主线程中完成的，而我们使用自己创建的线程尝试对界面元素进行修改时，Qt程序可能会导致崩溃
因此，使用定时器是实现倒计时功能的最合理方案

ProgressBar

ProgressBar表示一个进度条

属性	说明
minimum	进度条最⼩值
maximum	进度条最⼤值
value	进度条当前值
alignment	⽂本在进度条中的对齐方式.
textVisible	进度条的数字是否可见.
orientation	进度条的方向是水平还是垂直
invertAppearance	是否是朝反方向增长进度
textDirection	文本的朝向.
format	展示的数字格式.%p ：表示进度的百分比（0-100） %v ：表示进度的数值（0-100）%m ：表示剩余时间（以毫秒为单位） %t ：表⽰总时间（以毫秒为单位

示例一：一个按时间增长的进度条

①在界面上拖拽一个Progress Bar

其中最小值设为 0, 最大值设为 100. 当前值设为 0

②修改widget.cpp文件，初始化QTimer

#include "widget.h"
#include "ui_widget.h"
#include <QTimer>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    timer = new QTimer(this);
    connect(timer, &QTimer::timeout, this, &Widget::updateProgressBar);
    timer->start(100);
}


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

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

③ 运行程序，就可以看到一个随时间增长的进度条了

Calendar Widget

QCalendarWidget 表示⼀个 “日历”

核心属性

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

重要信号

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

示例一：获取选中的日期

①拖拽一个QCalendarWidget和一个label到界面上

② 给QCalendarWidget添加槽函数

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
}

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

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

③ 运行程序，观察到选择一个日期的时候，label也随之发生改变

小结

今日的分享就到这里啦，如果本文存在疏漏或错误的地方还请您能够指出