显示类控件

ops/2024/11/26 2:51:17/

文章目录

  • 1 QLabel
    • 1.1 常用属性
    • 1.2 例子1，设置文本 (textFormat)
    • 1.3 例子2，设置widget背景图片 (pixmap和scaledContents)
    • 1.4 例子3，设置对齐方式 (alignment)
    • 1.5 例子4，设置自动换行，缩进和边距
      • 1.5.1 设置换行 (wordWrap)
      • 1.5.2 设置缩进 (indent)
      • 1.5.3 设置边距 (margin)
    • 1.6 例子5 设置伙伴 (buddy)
  • 2. QLCDNumber
    • 2.1 常用属性
    • 2.2 例子1，倒计时
    • 2.3 不用计时器？
  • 3. QProgressBar
    • 3.1 常用属性
    • 3.2 例子1，漫无止境的进度条
  • 4. QCalendarWidget
    • 4.1 属性和信号
    • 4.2 显示当前选中的的日期

1 QLabel

1.1 常用属性

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

1.2 例子1，设置文本 (textFormat)

现在widget.ui上放几个Qlabel

image-20241123212959246

在构造函数使用void setTextFormat(Qt::TextFormat)和void setText(const QString &)

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->label->setTextFormat(Qt::PlainText);ui->label_2->setTextFormat(Qt::RichText);ui->label_3->setTextFormat(Qt::MarkdownText);ui->label_4->setTextFormat(Qt::AutoText);ui->label->setText("测试文本测试文本111");ui->label_2->setText("<h1>测试文本测试文本222</h1>");ui->label_3->setText("## 测试文本测试文本333");ui->label_4->setText("<b>测试文本测试文本444</b>");
}

运行结果如下

image-20241123213025280

1.3 例子2，设置widget背景图片 (pixmap和scaledContents)

创建resource.qrc，导入图片

image-20241123223915045

在widget.cpp的构造函数设置pixmap并设置图片的初始位置

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建lable和图片QLabel* label = new QLabel(this);QPixmap pic(":/nyaruko.png");// 设置label的图片和位置QRect pos = this->geometry();label->setPixmap(pic);label->setGeometry(0, 0, pos.width(), pos.height());
}

image-20241123224553079

要想让图片铺满整个widget，可以使用void setScaledContents(bool)

label->setScaledContents(true);

image-20241123224730132

此时如果调整窗口大小，图片不会跟着缩放，这是因为图片仅在构造函数那里初始化了一次。

image-20241123224824163

如果想让图片跟着缩放，需要使用事件，在widget.cpp中重写resizeEvent函数

void Widget::resizeEvent(QResizeEvent *event)
{label->setGeometry(0, 0, event->size().width(), event->size().height());
}

image-20241123225702775

无论怎么拖动，都会填满整个widget

1.4 例子3，设置对齐方式 (alignment)

在widget.ui中拖入一个QLabel，设置frameShape为Box，更好观察
image-20241123182142163

image-20241123182200527

frameShape的可选项的介绍如下
image-20241123182329517

在构造函数里使用void setAlignment(Qt::Alignment);方法
下面是Qt::Alignment的简单介绍（机翻）

enum Qt::AlignmentFlag
flags Qt::Alignment

这个枚举类型用于描述对齐方式。它包含水平和垂直标志，可以组合使用以产生所需的效果。TextElideMode枚举类型还可以在许多情况下用于微调对齐文本的外观。
水平标志如下：

ConstantValueDescription
Qt::AlignLeft0x0001Aligns with the left edge.
Qt::AlignRight0x0002Aligns with the right edge.
Qt::AlignHCenter0x0004Centers horizontally in the available space.
Qt::AlignJustify0x0008Justifies the text in the available space.

垂直标志如下：

ConstantValueDescription
Qt::AlignTop0x0020Aligns with the top.
Qt::AlignBottom0x0040Aligns with the bottom.
Qt::AlignVCenter0x0080Centers vertically in the available space.
Qt::AlignBaseline0x0100Aligns with the baseline.

一次只能使用一个水平标志。下面是二维标志：

ConstantValueDescription
Qt::AlignCenterAlignVCenter | AlignHCenterCenters in both dimensions.

一次最多只能使用一个水平和垂直标志。Qt::AlignCenter同时计算水平和垂直。

使用水平居中和垂直居中

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->label->setText("这是要设置对齐方式的文本");ui->label->setAlignment(Qt::AlignCenter);
}

image-20241123183251459

将文本放到左下角

ui->label->setAlignment(Qt::AlignLeft | Qt::AlignBottom);

image-20241123183407842

1.5 例子4，设置自动换行，缩进和边距

1.5.1 设置换行 (wordWrap)

继续使用1.2中的widget.ui
设置自动换行setWordWrap(bool on)

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->label->setText("这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本");ui->label->setAlignment(Qt::AlignLeft | Qt::AlignTop);ui->label->setWordWrap(true);
}

image-20241123190952293

1.5.2 设置缩进 (indent)

关于indent属性的介绍

indent : int
This property holds the label's text indent in pixelsIf a label displays text, the indent applies to the left edge if alignment() is Qt::AlignLeft, to the right edge if alignment() is Qt::AlignRight, to the top edge if alignment() is Qt::AlignTop, and to the bottom edge if alignment() is Qt::AlignBottom.If indent is negative, or if no indent has been set, the label computes the effective indent as follows: If frameWidth() is 0, the effective indent becomes 0. If frameWidth() is greater than 0, the effective indent becomes half the width of the "x" character of the widget's current font().By default, the indent is -1, meaning that an effective indent is calculating in the manner described above.缩进：整型
这个属性保存标签文本的缩进像素值。如果一个标签显示文本，如果对齐方式（alignment）是Qt::AlignLeft缩进适用于左边缘，如果对齐方式是Qt::AlignRight缩进适用于右边缘，如果对齐方式是Qt::AlignTop缩进适用于顶部边缘，如果对齐方式是Qt::AlignBottom搜进适用于底部边缘。如果缩进是负数，或者没有设置缩进，标签会按照以下方式计算有效的缩进：如果frameWidth()为0，有效的缩进变为0。如果frameWidth()大于0，有效的缩进变为当前字体中“x”字符宽度的一半。默认情况下，缩进是-1，这意味着有效的缩进是按照上述方式计算的。

设置缩进void setIndent(int)，以像素为单位设置缩进

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->label->setText("这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本");ui->label->setAlignment(Qt::AlignLeft | Qt::AlignTop);ui->label->setWordWrap(true);ui->label->setIndent(50);
}

image-20241123191817077

1.5.3 设置边距 (margin)

关于margin的介绍

margin : int
This property holds the width of the margin
The margin is the distance between the innermost pixel of the frame and the outermost pixel of contents.
The default margin is 0.边距：整型
这个属性保存边距的宽度。
边距是指框架最内层像素与内容最外层像素之间的距离。
默认的边距是0。

使用void setMargin(int)来设置

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->label->setText("这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本这是要设置对齐方式的文本");ui->label->setAlignment(Qt::AlignLeft | Qt::AlignTop);ui->label->setWordWrap(true);// ui->label->setIndent(50);ui->label->setMargin(20);
}

四个方向都是20px，超出的地方不会显示

image-20241123192402270

1.6 例子5 设置伙伴 (buddy)

在widget.ui中拖上两个QLabel和两个QRadioButton，Qlabel的内容要形如xxxxxx&[键盘上的按键]xxxxxxxx

image-20241124111123313

image-20241124111131268

在widget.cpp的构造函数中使用void QLabel::setBuddy(QWidget *buddy)设置两个label的伙伴。

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->label_male->setBuddy(ui->radioButton_male);ui->label_female->setBuddy(ui->radioButton_female);
}

image-20241124111150810

现在使用快捷键alt+m可以选中男，alt+f可选中女

2. QLCDNumber

2.1 常用属性

QLCDNumber用类似LCD的样式显示一个数字
下面是常用的属性

属性说明
intValueQLCDNumber 显⽰的数字值(int).
valueQLCDNumber 显⽰的数字值(double).
和intValue是联动的.
例如给value设为1.5,intValue的值就是

设置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小数点的央视

2.2 例子1，倒计时

在widget.ui拖入一个LCDNumber

image-20241124144649568

在设置初始值，设置计时器，连接槽函数

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->lcdNumber->display(10);_timer = new QTimer(this);// 把QTimer的timeout信号连接到一个槽函数connect(_timer, &QTimer::timeout, this, &Widget::timeHandler);_timer->start(1000);        // 1000ms发送一次信号
}Widget::~Widget()
{delete ui;
}void Widget::timeHandler()
{int val = ui->lcdNumber->value();if(val <= 0) {// 当时间<=0时，停止计时_timer->stop();} else {// 继续计时ui->lcdNumber->display(val-1);}
}

image-20241124145554653

2.3 不用计时器？

如果不使用计时器，是否可以用循环+sleep的方式呢？
在构造函数写如下内容

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->lcdNumber->display(10);int val = ui->lcdNumber->value();for (;;) {if(val <= 0) {// 当时间<=0时，跳出循环break;} else {// 更新时间ui->lcdNumber->display(--val);}std::this_thread::sleep_for(std::chrono::seconds(1));}
}

运行后发现程序并没有立刻显示出窗口，而是等了10s后，才显示出widget

image-20241124154843028

这是因为在main.cpp里，要等w构造结束后才能show()

int main(int argc, char *argv[])
{QApplication a(argc, argv);Widget w;w.show();return a.exec();
}

如果创建一个线程呢?继续修改widget.cpp

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);ui->lcdNumber->display(10);std::thread t([this](){int val = ui->lcdNumber->value();for (;;) {if(val <= 0) {// 当时间<=0时，跳出循环break;} else {// 更新时间ui->lcdNumber->display(--val);}std::this_thread::sleep_for(std::chrono::seconds(1));}});
}

编译没有问题，运行后会报错

image-20241124155447756

这是因为 **Qt中规定，任何对于GUI上内容的操作，必须在主线程中完成。**像Widget构造函数,以及connect连接的slot函数,都是在主线程中调⽤的.⽽我们⾃⼰创建的线程则不是.当我们⾃⼰的线程中尝试对界⾯元素进⾏修改时, Qt程序往往会直接崩溃.

综上所述,使⽤定时器,是实现上述功能的最合理⽅案

3. QProgressBar

3.1 常用属性

属性说明
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 ：表⽰总时间（以毫秒为单位）

3.2 例子1，漫无止境的进度条

一个一直重复加载的进度条

在widet.ui中导入一个QProgessBar，widget.h内容如下

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QTimer>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();void timerHandler();private:Ui::Widget *ui;QTimer* timer;
};
#endif // WIDGET_H

widget.cpp内容如下

#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::timerHandler);// 每100ms发送一次信号timer->start(100);
}Widget::~Widget()
{delete ui;
}void Widget::timerHandler()
{int val = ui->progressBar->value();if(val >= 100) {// 重新设置valueui->progressBar->setValue(0);} else {// 每次让val+5ui->progressBar->setValue(val+5);}
}

运行结果如下

image-20241124171030923

问题：若将widget.h中的include <QTimer>移动到widget.cpp中，代码仍能正常运行。正常来说应该是找不到QTimer的，这是为什么呢？

解答：这是因为Qt设计了一个专门的头文件，该头文件包含了Qt所有类的“前置声明”。当我们包含其它的Qt文件的时候，都会间接的包含该头文件
形如

...;
class QTimer;
class QLbel;
class QLCDNumber;
...

这样即使widget.h中没有包含QTimer，但是包含了QWidget，该类间接包含了有前置声明的头文件，改头文件展开后，widget.h就能通过编译了。

这样设计的目的是为了减少include头文件的数量，进而加快编译代码的速度。

4. QCalendarWidget

4.1 属性和信号

属性说明
selectDate当前选中的⽇期
minimumDate最⼩⽇期
maximumDate最⼤⽇期
firstDayOfWeek每周的第⼀天(也就是⽇历的第⼀列)是周⼏.
gridVisible是否显⽰表格的边框
selectionMode是否允许选择⽇期
navigationBarVisible⽇历上⽅标题是否显⽰
horizontalHeaderFormat⽇历上⽅标题显⽰的⽇期格式
verticalHeaderFormat⽇历第⼀列显⽰的内容格式
dateEditEnabled是否允许⽇期被编辑
信号说明
selectionChanged()当选中的⽇期发⽣改变时发出
activated(constQDate&)当双击⼀个有效的⽇期或者按下回⻋键时发出，形参是⼀个QDate类型，保存了选中的⽇期
currentPageChanged(int, int)当年份⽉份改变时发出，形参表⽰改变后的新年份和⽉份

4.2 显示当前选中的的日期

在widet.ui中放置一个ClendarWidget和一个Label

image-20241124211504669

给日历的selectionChanged()信号添加槽函数，改变Lable的内容

void Widget::on_calendarWidget_selectionChanged()
{// 获取当前选择的日期QDate date = ui->calendarWidget->selectedDate();// 更改QLabelui->label->setText("选择的日期是: " + date.toString());
}

image-20241124212712279


http://www.ppmy.cn/ops/136733.html

相关文章

大连环保公益管理系统｜Java｜SSM｜Vue｜ 前后端分离

大连环保公益管理系统｜Java｜SSM｜Vue｜ 前后端分离

【重要①】前后端源码万字文档部署文档 【重要②】正版源码有问题包售后 【包含内容】 【一】项目提供非常完整的源码注释 【二】相关技术栈文档 【三】源码讲解视频 【其它服务】 【一】可以提供远程部署安装&#xff0c;包扩环境 【…
阅读更多...
linux从0到1——shell编程9

linux从0到1——shell编程9

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…
阅读更多...
双因子认证：统一运维平台安全管理策略

双因子认证：统一运维平台安全管理策略

01双因子认证概述 双因子认证&#xff08;Two-Factor Authentication&#xff0c;简称2FA&#xff09;是一种身份验证机制&#xff0c;它要求用户提供两种不同类型的证据来证明自己的身份。这通常包括用户所知道的&#xff08;如密码&#xff09;、用户所拥有的&#xff08;如…
阅读更多...
【数据结构 | C++】并查操作

【数据结构 | C++】并查操作

现在有一个并查集&#xff0c;你需要完成合并和查询操作。 输入格式: 第一行包含两个整数 N,M ,表示共有 N 个元素和 M 个操作。 接下来 M 行&#xff0c;每行包含三个整数 zi,xi,yi 。 当 zi1 时&#xff0c;将 xi与yi所在的集合合并。 当 zi2 时&#xff0c;输出xi与yi 是否…
阅读更多...
【AIGC】破解ChatGPT！如何使用高价值提示词Prompt提升响应质量

【AIGC】破解ChatGPT！如何使用高价值提示词Prompt提升响应质量

文章目录 为什么高价值提示词如此重要&#xff1f;&#x1f50d;1.1 提升响应的相关性和准确性1.2 节省时间与资源1.3 增强用户体验 了解ChatGPT的工作原理&#x1f9e0;2.1 语言模型的训练过程2.2 上下文理解与生成2.3 限制与挑战 高价值提示词的核心要素✍️3.1 清晰明确的指…
阅读更多...
修改仓库中子模块并推送到远程仓库的指定分支

修改仓库中子模块并推送到远程仓库的指定分支

因为现在修改的是仓库的子模块的东西&#xff0c;我们要先提交子模块&#xff0c;然后在提交主题仓库。 提交的时候我们要 首先&#xff0c;进入 XGBDIM 子模块目录。 cd XGBDIM查看子模块中的更改情况&#xff0c;确认哪些文件需要添加和提交。 git status添加子模块中的文件…
阅读更多...
2024年11月最新 Alfred 5 Powerpack (MACOS)下载

2024年11月最新 Alfred 5 Powerpack (MACOS)下载

在现代数字化办公中&#xff0c;我们常常被繁杂的任务所包围&#xff0c;而时间的高效利用成为一项核心需求。Alfred 5 Powerpack 是一款专为 macOS 用户打造的高效工作流工具&#xff0c;以其强大的定制化功能和流畅的用户体验&#xff0c;成为众多效率爱好者的首选。 点击链…
阅读更多...
Mac下的vscode远程ssh免密码登录

Mac下的vscode远程ssh免密码登录

Mac下的vscode远程ssh免密码登录&#xff08;同理可迁移至windows及linux系统&#xff09; 在日常开发中&#xff0c;使用远程服务器进行开发是非常常见的&#xff0c;而通过 SSH 免密码登录可以显著提高效率&#xff0c;避免每次连接时都需要输入密码。本文将介绍如何在 macOS…
阅读更多...
最新文章

Copyright @ 2022~2023