当前位置:   article > 正文

【Qt常用控件】—— 显示类控件_qt 显示数据控件

qt 显示数据控件

目录

1.1 Label

1.2 LCD Number 

 1.3 ProgressBar

 1.4 Calendar Widget

 1.5 小结


1.1 Label

QLabel 控件是 Qt 中用于显示文本或图像的部件,是用户界面开发中常用的组件之一。 核⼼属性如下:
属性
说明
text
QLabel 中的⽂本
textFormat
⽂本的格式.
Qt::PlainText 纯⽂本
Qt::RichText 富⽂本(⽀持 html 标签)
•  Qt::MarkdownText markdown 格式
Qt::AutoText 根据⽂本内容⾃动决定⽂本格式
pixmap
QLabel 内部包含的图⽚.
scaledContents
设为 true 表⽰内容⾃动拉伸填充 QLabel
设为 false 则不会⾃动拉伸
alignment
对⻬⽅式.
可以设置⽔平和垂直⽅向如何对⻬.
wordWrap
设为 true 内部的⽂本会⾃动换⾏.
设为 false 则内部⽂本不会⾃动换⾏.
indent
设置⽂本缩进. ⽔平和垂直⽅向都⽣效.
margin
内部⽂本和边框之间的边距.
不同于于 indent, 但是是上下左右四个⽅向都同时有效.
⽽ indent 最多只是两个⽅向有效(具体哪两个⽅向有效取决于 alignment )
openExternalLinks
是否允许打开⼀个外部的链接.
(当 QLabel ⽂本内容包含 url 的时候涉及到)
buddy
给 QLabel 关联⼀个 "伙伴" , 这样点击 QLabel 时就能激活对应的伙伴.
例如伙伴如果是⼀个 QCheckBox, 那么该 QCheckBox 就会被选中.
代码⽰例: 显⽰不同格式的⽂本

 1) 在界⾯上创建三个 QLabel

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

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

  1. Widget::Widget(QWidget *parent)
  2. : QWidget(parent)
  3. , ui(new Ui::Widget)
  4. {
  5. ui->setupUi(this);
  6. ui->label->setTextFormat(Qt::PlainText);
  7. ui->label->setText("这是⼀段纯⽂本");
  8. ui->label_2->setTextFormat(Qt::RichText);
  9. ui->label_2->setText("<b> 这是⼀段富⽂本 </b>");
  10. ui->label_3->setTextFormat(Qt::MarkdownText);
  11. ui->label_3->setText("## 这是⼀段 markdown ⽂本");
  12. }
3) 运⾏程序, 观察效果


代码示例: 显⽰图⽚ 

  • 虽然 QPushButton 也可以通过设置图标的⽅式设置图⽚, 但是并⾮是⼀个好的选择. 更多的时候还是希望通过 QLabel 来作为⼀个更单纯的显⽰图⽚的⽅式.
1) 在界面上创建⼀个 QLabel, objectName label

2) 创建 resource.qrc ⽂件, 并把图⽚导⼊到 qrc 中.

3) 修改 widget.cpp, 给 QLabel 设置图⽚
  1. // 设置 label ⼤⼩和窗⼝⼀样⼤
  2. ui->label->setGeometry(0, 0, 800, 600);
  3. QPixmap pixmap(":/huaji.png");
  4. ui->label->setPixmap(pixmap);
  • 执⾏程序, 观察效果

  • 这个图⽚本⾝的尺⼨是 480 * 480, 并没有把 QLabel 填充满
4) 修改代码, 设置 scaledContents 属性
  1. // 设置内容伸缩
  2. ui->label->setScaledContents(true);
  • 再次运⾏, 观察效果, 可以看到图⽚已经被拉伸, 可以把窗⼝填满了.

5) 此时, 如果拖动窗⼝⼤⼩, 可以看到图⽚并不会随着窗口大小的改变而同步变化.

  • 为了解决这个问题, 可以在 Widget 中重写 resizeEvent 函数.  
  1. // 重写 resizeEvent. 这个函数会在窗⼝⼤⼩发⽣改变时被⾃动调⽤.
  2. void Widget::resizeEvent(QResizeEvent *event) {
  3. // 可以直接通过 this->width() 和 this->height() 设置 label 新的尺⼨
  4. //也可以通过event 参数拿到新的尺⼨.
  5. // ui->label->setGeometry(0, 0, this->width(), this->height());
  6. ui->label->setGeometry(0, 0, event->size().width(), event->size().height());
  7. qDebug() << event->size();
  8. }
  • 执⾏程序, 此时改变窗⼝⼤⼩, 图⽚也会随之变化.  

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

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

这个过程就是依赖 C++ 中的多态来实现的. Qt 框架内部管理着 QWidget 对象表⽰咱们的窗 ⼝. 在窗⼝⼤⼩发⽣改变时, Qt 就会⾃动调⽤ resizeEvent 函数.
但是由于实际上这个表⽰窗⼝的并⾮是 QWidget, ⽽是 QWidget 的⼦类, 也就是咱们⾃⼰写 的 Widget. 此时虽然是通过⽗类调⽤函数, 但是实际上执⾏的是⼦类的函数(也就是我们重写 后的 resizeEvent ).
此处属于是 多态 机制的⼀种经典⽤法. 通过上述过程, 就可以把⾃定义的代码, 插⼊到框架内 部执⾏. 相当于 "注册回调函数" .

1.2 LCD Number 

QLCDNumber 控件是 Qt 中用于显示数字或文本的 LCD 部件。它模拟了一个数字显示器(如数字钟或计时器)的外观。

核⼼属性
属性
说明
intValue
QLCDNumber 显⽰的数字值(int).
value
QLCDNumber 显⽰的数字值(double).和 intValue 是联动的.
例如给 value 设为 1.5, intValue 的值就是 2.
另外, 设置 value 和 intValue 的⽅法名字为 display , ⽽不是 setValue 或者 setIntValue .
digitCoun
显⽰⼏位数字.
mode
数字显⽰形式.
1. QLCDNumber::Dec :⼗进制模式,显⽰常规的⼗进制数字。
2. QLCDNumber::Hex :⼗六进制模式,以⼗六进制格式显⽰数字。
3. QLCDNumber::Bin :⼆进制模式,以⼆进制格式显⽰数字。
4. QLCDNumber::Oct :⼋进制模式,以⼋进制格式显⽰数字。
只有⼗进制的时候才能显⽰⼩数点后的内容.
segmentStyle
设置显⽰⻛格.
1. QLCDNumber::Flat :平⾯的显⽰⻛格,数字呈现在⼀个平坦的表⾯上。
2. QLCDNumber::Outline :轮廓显⽰⻛格,数字具有清晰的轮廓和阴影效果。
3. QLCDNumber::Filled :填充显⽰⻛格,数字被填充颜⾊并与背景区分开。
smallDecimalPoin
设置⽐较⼩的⼩数点.
代码⽰例: 倒计时
1) 在界⾯上创建⼀个 QLCDNumber , 初始值设为 10. objectName 为 lcdNumber

2) 修改 widget.h 代码, 创建⼀个 QTimer 成员, 和⼀个 updateTime 函数
  1. QTimer* timer;
  2. void updateTime();
3) 修改 widget.cpp, 在构造函数中初始化 QTimer
  • QTimer 表⽰定时器. 通过 start ⽅法启动定时器之后, 就会每隔⼀定周期, 触发⼀次 QTimer::timeout 信号.
  • 使⽤ connect QTimer::timeout 信号和 Widget::updateTime 连接起来, 意味着每 次触发 QTimer::timeout 都会执⾏ Widget::updateTime
  1. Widget::Widget(QWidget *parent)
  2. : QWidget(parent)
  3. , ui(new Ui::Widget)
  4. {
  5. ui->setupUi(this);
  6. // 创建 QTimer 实例
  7. timer = new QTimer(this);
  8. // 连接信号槽. QTimer 会每隔⼀定的时间触发⼀个 timeout 信号. 现在把 timeout 信号
  9. //和 updateTime 连接起来.
  10. // 此时意味着每次触发 timeout 信号都会伴随 updateTime 函数的执⾏.
  11. connect(timer, &QTimer::timeout, this, &Widget::updateTime);
  12. // 启动 QTimer, 并且规定每隔 1000ms 触发⼀次 timeout 信号.
  13. timer->start(1000);
  14. }
4) 修改 widget.cpp, 实现 updateTime
  • 通过 intValue 获取到 QLCDNumber 内部的数值.
  • 如果 value 的值归 0 了, 就停⽌ QTimer . 接下来 QTimer 也就不会触发 timeout 信号了.
  1. void Widget::updateTime() {
  2. qDebug() << "updateTime";
  3. int value = ui->lcdNumber->intValue();
  4. if (value <= 0) {
  5. // 如果时间到, 停⽌定时器.
  6. timer->stop();
  7. return;
  8. }
  9. ui->lcdNumber->display(value - 1);
  10. }

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

针对上述代码, 存在两个问题:
1) 上述代码如果直接在 Widget 构造函数中, 通过⼀个循环 + sleep 的⽅式是否可以呢?
  1. Widget::Widget(QWidget *parent)
  2. : QWidget(parent)
  3. , ui(new Ui::Widget)
  4. {
  5. ui->setupUi(this);
  6. int value = ui->lcdNumber->intValue();
  7. while (true) {
  8. std::this_thread::sleep_for(std::chrono::seconds(1));
  9. if (value <= 0) {
  10. break;
  11. }
  12. ui->lcdNumber->display(value - 1);
  13. }
  14. }
  • 显然, 这个代码是不⾏的. 循环会使 Widget 的构造函数⽆法执⾏完毕, 此时界⾯是不能正确构造和显⽰的.
2) 上述代码如果是在 Widget 构造函数中, 另起⼀个线程, 在新线程中完成 循环 + sleep 是否可以呢?
  1. Widget::Widget(QWidget *parent)
  2. : QWidget(parent)
  3. , ui(new Ui::Widget)
  4. {
  5. ui->setupUi(this);
  6. std::thread t([this]() {
  7. int value = this->ui->lcdNumber->intValue();
  8. while (true) {
  9. std::this_thread::sleep_for(std::chrono::seconds(1));
  10. if (value <= 0) {
  11. break;
  12. }
  13. this->ui->lcdNumber->display(value - 1);
  14. }
  15. });
  16. }
  • 这个代码同样是不⾏的. Qt 中规定, 任何对于 GUI 上内容的操作, 必须在主线程中完成. 像 Widget 构造函数, 以及 connect 连接的 slot 函数, 都是在主线程中调⽤的. ⽽我们⾃⼰创建的线程则不是.
  • 当我们⾃⼰的线程中尝试对界⾯元素进⾏修改时, Qt 程序往往会直接崩溃.

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

⽐如调整了某个元素的尺⼨, 就可能影响到内部的⽂字位置, 或者其他元素的位置. 这⾥⼀连串的修改, 都是需要按照⼀定的顺序来完成的.
由于多线程执⾏的顺序⽆法保障, 因此 Qt 从根本上禁⽌了其他线程修改 GUI 状态, 避免后续的⼀系列问题.
综上所述, 使⽤定时器, 是实现上述功能的最合理⽅案.

 1.3 ProgressBar

使⽤ 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) 在界⾯上创建进度条, objectName progressBar

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

  • 其中最⼩值设为 0, 最⼤值设为 100. 当前值设为 0.
  1. QTimer* timer;
  2. void updateProgressBar ();

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

  • 此处设置 100ms 触发⼀次 timeout 信号. 也就是⼀秒钟触发 10 次.
  1. Widget::Widget(QWidget *parent)
  2. : QWidget(parent)
  3. , ui(new Ui::Widget)
  4. {
  5. ui->setupUi(this);
  6. timer = new QTimer(this);
  7. connect(timer, &QTimer::timeout, this, &Widget::updateProgressBar);
  8. timer->start(100);
  9. }

4) 修改 widget.cpp, 实现 updateProgressBar

  1. void Widget::updateProgressBar() {
  2. int value = ui->progressBar->value();
  3. if (value >= 100) {
  4. timer->stop();
  5. return;
  6. }
  7. ui->progressBar->setValue(value + 1);
  8. }

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

在实际开发中, 进度条的取值, 往往是根据当前任务的实际进度来进⾏设置的.
  • ⽐如需要读取⼀个很⼤的⽂件, 就可以获取⽂件的总的⼤⼩, 和当前读取完毕的⼤⼩, 来设置进度条的⽐例.
由于上⾯我们介绍了 Qt 禁⽌在其他线程修改界⾯, 因此进度条的更新往往也是需要搭配定时 器来完成的.
通过定时器周期触发信号, 主线程调⽤对应的 slot 函数. 再在 slot 函数中对当前的任务进度进 ⾏计算, 并更新进度条的界⾯效果

 1.4 Calendar Widget

QCalendarWidget 表⽰⼀个 "⽇历" , 形如:

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

 重要信号

信号
说明
selectionChanged(const
QDate&)
当选中的⽇期发⽣改变时发出
activated(const QDate&)
当双击⼀个有效的⽇期或者按下回⻋键时发出,形参是⼀个QDate类型,保存 了选中的⽇期
currentPageChanged(int,
int)
当年份⽉份改变时发出,形参表⽰改变后的新年份和⽉份
代码⽰例: 获取选中的⽇期
1) 在界⾯上创建⼀个 QCalendarWidget 和 ⼀个 label objectName 为 calendarWidget , label

 

2) 给 QCalendarWidget 添加 slot 函数 

  1. void Widget::on_calendarWidget_selectionChanged()
  2. {
  3. QDate date = ui->calendarWidget->selectedDate();
  4. qDebug() << date;
  5. ui->label->setText(date.toString());
  6. }
3) 执⾏程序, 可以看到当选择不同的⽇期时, label 中的内容就会随之改变.


 1.5 小结

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

  1. QLabel

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

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

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

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/708984
推荐阅读
相关标签
  

闽ICP备14008679号