【Qt常用控件】—— 显示类控件

目录

1.1 Label

1.2 LCD Number 

 1.3 ProgressBar

 1.4 Calendar Widget

 1.5 小结

1.1 Label

 1) 在界⾯上创建三个 QLabel

• 尺⼨放⼤⼀些. objectName 分别为 label, label_2, label_3

2) 修改 widget.cpp, 设置三个 label 的属性  

Widget::Widget(QWidget *parent)
     : QWidget(parent)
     , ui(new Ui::Widget)
{
     ui->setupUi(this);
 
     ui->label->setTextFormat(Qt::PlainText);
     ui->label->setText("这是⼀段纯⽂本");
 
     ui->label_2->setTextFormat(Qt::RichText);
     ui->label_2->setText("<b> 这是⼀段富⽂本 </b>");
 
     ui->label_3->setTextFormat(Qt::MarkdownText);
     ui->label_3->setText("## 这是⼀段 markdown ⽂本");
}

// 设置 label ⼤⼩和窗⼝⼀样⼤
ui->label->setGeometry(0, 0, 800, 600);
 
QPixmap pixmap(":/huaji.png");
ui->label->setPixmap(pixmap);

// 设置内容伸缩
ui->label->setScaledContents(true);

• 为了解决这个问题, 可以在 Widget 中重写 resizeEvent 函数.  

// 重写 resizeEvent. 这个函数会在窗⼝⼤⼩发⽣改变时被⾃动调⽤.
void Widget::resizeEvent(QResizeEvent *event) {
    // 可以直接通过 this->width() 和 this->height() 设置 label 新的尺⼨
    //也可以通过event 参数拿到新的尺⼨.
 
     // ui->label->setGeometry(0, 0, this->width(), this->height());
     ui->label->setGeometry(0, 0, event->size().width(), event->size().height());
 
     qDebug() << event->size();
}

• 执⾏程序, 此时改变窗⼝⼤⼩, 图⽚也会随之变化.  

• 于此同时, 在控制台⾥也能够看到尺⼨变化的过程.

此处的 resizeEvent 函数我们没有⼿动调⽤, 但是能在窗⼝⼤⼩变化时被⾃动调⽤.

这个过程就是依赖 C++ 中的多态来实现的. Qt 框架内部管理着 QWidget 对象表⽰咱们的窗 ⼝. 在窗⼝⼤⼩发⽣改变时, Qt 就会⾃动调⽤ resizeEvent 函数.

但是由于实际上这个表⽰窗⼝的并⾮是 QWidget, ⽽是 QWidget 的⼦类, 也就是咱们⾃⼰写 的 Widget. 此时虽然是通过⽗类调⽤函数, 但是实际上执⾏的是⼦类的函数(也就是我们重写 后的 resizeEvent ).

此处属于是 多态 机制的⼀种经典⽤法. 通过上述过程, 就可以把⾃定义的代码, 插⼊到框架内 部执⾏. 相当于 "注册回调函数" .

1.2 LCD Number 

QTimer* timer;
 
void updateTime();

Widget::Widget(QWidget *parent)
     : QWidget(parent)
     , ui(new Ui::Widget)
{
     ui->setupUi(this);
 
     // 创建 QTimer 实例
     timer = new QTimer(this);
 
     // 连接信号槽. QTimer 会每隔⼀定的时间触发⼀个 timeout 信号. 现在把 timeout 信号
     //和 updateTime 连接起来.
     // 此时意味着每次触发 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;
     }
     ui->lcdNumber->display(value - 1);
}

 5) 执⾏程序, 可以看到每隔⼀秒钟, 显⽰的数字就减少 1.

针对上述代码, 存在两个问题:

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;
         }
         ui->lcdNumber->display(value - 1);
     }
}

Widget::Widget(QWidget *parent)
     : QWidget(parent)
     , ui(new Ui::Widget)
{
     ui->setupUi(this);
 
     std::thread t([this]() {
         int value = this->ui->lcdNumber->intValue();
         while (true) {
             std::this_thread::sleep_for(std::chrono::seconds(1));
             if (value <= 0) {
                 break;
             }
             this->ui->lcdNumber->display(value - 1);
        }
    });
}

 这样的约定主要是因为 GUI 中的状态往往是牵⼀发动全⾝的, 修改⼀个地⽅, 就需要同步的对 其他内容进⾏调整.

⽐如调整了某个元素的尺⼨, 就可能影响到内部的⽂字位置, 或者其他元素的位置. 这⾥⼀连串的修改, 都是需要按照⼀定的顺序来完成的.

由于多线程执⾏的顺序⽆法保障, 因此 Qt 从根本上禁⽌了其他线程修改 GUI 状态, 避免后续的⼀系列问题.

 1.3 ProgressBar

使⽤ QProgressBar 表⽰⼀个进度条

1) 在界⾯上创建进度条, objectName 为 progressBar

2) 修改 widget.h, 创建 QTimer 和 updateProgressBar 函数.

• 其中最⼩值设为 0, 最⼤值设为 100. 当前值设为 0.

QTimer* timer;
void updateProgressBar ();

3) 修改 widget.cpp, 初始化 QTimer

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

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);
}

4) 修改 widget.cpp, 实现 updateProgressBar

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

5) 运⾏程序, 可以看到进度条中的进度在快速增⻓.

在实际开发中, 进度条的取值, 往往是根据当前任务的实际进度来进⾏设置的.

• ⽐如需要读取⼀个很⼤的⽂件, 就可以获取⽂件的总的⼤⼩, 和当前读取完毕的⼤⼩, 来设置进度条的⽐例.

由于上⾯我们介绍了 Qt 禁⽌在其他线程修改界⾯, 因此进度条的更新往往也是需要搭配定时 器来完成的.

通过定时器周期触发信号, 主线程调⽤对应的 slot 函数. 再在 slot 函数中对当前的任务进度进 ⾏计算, 并更新进度条的界⾯效果

 1.4 Calendar Widget

 重要信号

代码⽰例: 获取选中的⽇期

2) 给 QCalendarWidget 添加 slot 函数 

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

 1.5 小结

显示类控件是用于在用户界面中显示信息的各种元素，它们可以展示文本、数字、图像等内容。以下是常见的显示类控件及其功能小结：

1. QLabel：

   • 用于显示文本或图像。
   • 支持丰富的文本格式和样式。
   • 可以设置对齐方式、文本颜色、背景颜色等。

2. QLCDNumber：

   • 用于模拟数字显示器，显示数字或文本。
   • 支持设置数字位数、样式、显示模式等。

3. QProgressBar：

   • 用于显示任务进度。
   • 可以水平或垂直显示，支持设定范围和当前值。

4. QCalendarWidget：

   • 显示一个可视的月份日历，用户可以在日历上选择日期。
   • 用户可以通过点击日历上的日期来选择特定的日期。

这些控件在 GUI 开发中经常被使用，可以帮助用户展示和处理各种类型的信息，提高用户体验。