Qt显示类控件

🌈个人主页：南桥几晴秋
🌈C++专栏：南桥谈C++
🌈C语言专栏： C语言学习系列
🌈Linux学习专栏：南桥谈Linux
🌈数据结构学习专栏：数据结构杂谈
🌈数据库学习专栏：南桥谈MySQL
🌈Qt学习专栏：南桥谈Qt
🌈菜鸡代码练习：练习随想记录
🌈git学习：南桥谈Git

🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈 本科在读菜鸡一枚，指出问题及时改正

代码仓库

label

QLabel可以用来显示文本和图片

属性	说明
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 就会被选中

例：分别显示纯文本、富文本、markdown文本

cpp 复制代码

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文本");
}

例：显示图片

🖼️ 小提示

QPushButton 确实能"贴"图标，但那就好比把明星照片贴在门把手上------能贴，却没必要 。

真想优雅地展示一张图？请把舞台交给 QLabel，它专一、安静、不抢戏，是 Qt 世界里最纯粹的"画框"。

cpp 复制代码

ui->label_4->setGeometry(0,0,800,600);
QPixmap pixmap(":/dog.png");
ui->label_4->setPixmap(pixmap);

设置图片内容伸缩：

cpp 复制代码

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

通过重写resizeEvent函数实现窗口大小变化时图片大小也会变化：

cpp 复制代码

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

注意

这里的 resizeEvent() 我们并没有手动调用，却在窗口大小变化时被自动触发。

这是 C++ 多态的功劳：Qt 内部用 QWidget* 指向我们的窗口，当尺寸改变时，框架通过该指针调用 resizeEvent()。

由于指针实际指向的是我们自定义的子类，最终执行的就是子类重写后的版本------父类指针，子类行为，多态的经典场景。

例：⽂本对⻬, ⾃动换⾏, 缩进, 边距

在QFrame中设置frameShaow为Box，使得文本框带有黑色线框

形状常量	视觉效果	一句话说明
`QFrame::Box`	▭	最朴素的矩形线框，像给内容贴了一张拍立得。
`QFrame::Panel`	▣	自带"可按"凹凸感，按钮没做成之前先拿它顶班。
`QFrame::WinPanel`	▣	经典 Windows 95 味道，一出现就自带"叮~"音效。
`QFrame::HLine`	─	一条水平分割线，界面秒变"商务简约风"。
`QFrame::VLine`	│	垂直分割线，左右模块瞬间"划清界限"。
`QFrame::StyledPanel`	▣	面板样式随系统主题走，白天浅色、夜间暗黑，自动换装。

QLabel 继承自 QFrame，所以只需一行 label->setFrameShape(QFrame::Box);

就能让平淡的文字披上不同风格的外套。

cpp 复制代码

//居中文字
ui->label->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);
ui->label->setText("居中文字！");
//设置自动换行
ui->label_2->setText("这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本");
ui->label_2->setWordWrap(true);
//设置首行缩进
ui->label_3->setText("这是一句话");
ui->label_3->setIndent(20);
//设置边距
ui->label_4->setText("这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本");
ui->label_4->setMargin(20);

设置伙伴

要点	说明
语法	在文本里插 `&` + 字母，例如 `"快捷键&A"`。
触发方式	`Alt` + `A`（`&` 后面的字母）。
注意	与 `QPushButton` 的"一键直达"不同，必须先按住 `Alt` 再按字母才能生效。
效果	给 `QLabel` 配上"键盘入口"，让界面秒变"无鼠标友好"。

cpp 复制代码

//设置伙伴
ui->label_6->setBuddy(ui->radioButton);
ui->label_7->setBuddy(ui->radioButton_2);

LCD Number

QLCDNumber

一块复古像素风的数字屏，专干一件事------把数字亮给你看。

像把 80 年代计算器拆下来贴在界面上，自带幽绿荧光，瞬间让数据有了"硬核科技"味儿。

QLCDNumber 核心属性速查表

属性	类型	说明
`intValue`	`int`	当前整数值（只读）。
`value`	`double`	当前浮点值；与 `intValue` 联动，四舍五入取整。
`digitCount`	`int`	屏幕最多显示几位数字，不足补空格，超出截断。
`mode`	`QLCDNumber::Mode`	进制开关： `Dec` 十进制（唯一支持小数点） `Hex` 十六进制 `Bin` 二进制 `Oct` 八进制
`segmentStyle`	`QLCDNumber::SegmentStyle`	皮肤任选： `Flat` 扁平素颜 `Outline` 描边立体 `Filled` 实色填充
`smallDecimalPoint`	`bool`	`true` → 迷你小数点，占 1 段；`false` → 常规小数点，占 2 段。

赋值用 display(x)，而不是 setValue！

一行代码即可把"复古计算器"瞬间刷成你想要的进制或风格。

例：倒计时

类似的需要 "周期性修改界⾯状态" 的需求, 需要优先考虑使⽤定时器

实现从10到0的倒计时

cpp 复制代码

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //设置初始值
    ui->lcdNumber->display(10);
    //创建一个Qtimer实例
    timer=new QTimer(this);
    //连接
    connect(timer, &QTimer::timeout, this, &Widget::handle);
    //启动且每个1s触发一次timeout信号
    timer->start(1000);
}

void Widget::handle()
{
    //获取当前的值
    int value = ui->lcdNumber->intValue();
    if(value <= 0)
    {
        timer->stop();
        return;
    }
    ui->lcdNumber->display(value - 1);
}

ProgressBar

使⽤ QProgressBar 表⽰⼀个进度条。

（先默念三遍：是 Progress ，不是 Process！）

属性	说明	常用值/小贴士
`minimum`	起始刻度	默认 0，设成 1 就能让"0%"永不出现。
`maximum`	终点刻度	100 走百分比，200 走"步数"，随你定。
`value`	当前进度	一行 `setValue(x)` 让条子瞬间"长高"。
`alignment`	文字居哪	`Qt::AlignCenter` 最常用，左右两端几乎用不到。
`textVisible`	是否显示百分比	设为 `false` 秒变"纯颜值"进度条。
`orientation`	横 or 竖	`Qt::Horizontal` / `Qt::Vertical`，侧边栏常用竖条。
`invertAppearance`	反向增长	右到左、下到上，适合做"剩余量"效果。
`textDirection`	文字朝向	配合竖条时用，防文字倒立。
`format`	模板占位符	`%p` → 百分比（24%） `%v` → 当前值 `%m` → 剩余毫秒 `%t` → 总毫秒

一行代码示例：
progress->setFormat("已用 %v / 总计 %m 秒");

立刻把冷冰冰的百分比换成"人类可读"倒计时。

例：设置进度条按时间增⻓

cpp 复制代码

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //进度条
    //设置初始值、最大值最小值
    ui->progressBar->setValue(0);
    ui->progressBar->setMinimum(0);
    ui->progressBar->setMaximum(100);
    //
    timer2 = new QTimer(this);
    connect(timer2, &QTimer::timeout, this, &Widget::handlePro);
    timer2->start(100);

}

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

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

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

例：创建⼀个红⾊的进度条

在QWidget 的 styleSheet 中：

QProgressBar::chunk {background-color: #FF0000;}

QCalendarWidget 表⽰⼀个 "⽇历" 。

核心属性	说明	小贴士
`selectedDate`	用户点中的那一天	只读，用 `setSelectedDate(QDate)` 可代码改期。
`minimumDate` `maximumDate`	可选范围	把最小值设成今天，就能防"穿越"回昨天。
`firstDayOfWeek`	日历第一列放星期几	欧美习惯 `Qt::Sunday`，国内常用 `Qt::Monday`。
`gridVisible`	是否画格子线	关掉瞬间变"极简风"。
`selectionMode`	能否点选日期	设成 `NoSelection` 就变"只读月历"。
`navigationBarVisible`	顶部年月栏是否现身	关了你就能做"嵌入式小日历"。
`horizontalHeaderFormat`	星期标题样式	`ShortDayNames` 最省空间。
`verticalHeaderFormat`	行首是否显周数	默认不显示，打工人的"第几周"福音。
`dateEditEnabled`	允许键盘直接改日期	关掉后只能靠点击，防手滑误改。

重磅信号	触发时机	参数彩蛋
`selectionChanged(QDate)`	点选新日期	直接拿到 `QDate`，无需再 `selectedDate()`。
`activated(QDate)`	双击 or 回车	适合"选好就关"的弹窗场景。
`currentPageChanged(int,int)`	翻月/翻年	两 `int` 分别是新年、新月，做"数据懒加载"正好。

一行代码秒变"今天按钮"：
calendar->setSelectedDate(QDate::currentDate());

让每次打开弹窗都自动定位到当下。

例：获取选中的⽇期

cpp 复制代码

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

> 一行代码秒变"今天按钮"：  
> `calendar->setSelectedDate(QDate::currentDate());`  
> 让每次打开弹窗都自动定位到当下。

## 例：获取选中的⽇期  

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

label

例：分别显示纯文本、富文本、markdown文本

例：显示图片

例：⽂本对⻬, ⾃动换⾏, 缩进, 边距

设置伙伴

LCD Number

QLCDNumber 核心属性速查表

例：倒计时

ProgressBar

例：设置进度条按时间增⻓

例：创建⼀个红⾊的进度条

Calendar Widget

例：获取选中的⽇期