Qt 按钮与显示类控件实战：从交互到展示全攻略

🔥草莓熊Lotso： 个人主页
❄️个人专栏: 《C++知识分享》《Linux 入门到实践：零基础也能懂》
✨生活是默默的坚持，毅力是永久的享受！

🎬 博主简介：

文章目录

前言：
[一. 按钮类控件：交互逻辑的核心载体](#一. 按钮类控件：交互逻辑的核心载体)
- [1.1 PushButton：最常用的普通按钮](#1.1 PushButton：最常用的普通按钮)
- [1.2 RadioButton：单选按钮（互斥选择）](#1.2 RadioButton：单选按钮（互斥选择）)
- [1.3 CheckBox：复选按钮（多选选择）](#1.3 CheckBox：复选按钮（多选选择）)
- [1.4 按钮类控件关键区别与选型](#1.4 按钮类控件关键区别与选型)
[二. 显示类核心控件：Label（文本与图片展示）](#二. 显示类核心控件：Label（文本与图片展示）)
[三. 关键避坑指南](#三. 关键避坑指南)
结尾：

前言：

Qt 的控件体系中，按钮类控件是用户交互的核心，显示类控件是信息呈现的基础。 从单选 / 复选按钮的选择逻辑，到 Label 的文本图片展示，这些控件覆盖了 GUI 开发中 "输入" 与 "输出" 的核心场景。本文参考聚焦按钮类（PushButton、RadioButton、CheckBox）和显示类核心控件 Label，通过实战代码拆解属性用法、交互逻辑和常见场景，帮你快速掌握这类控件的核心技能，为复杂界面开发筑牢基础。

一. 按钮类控件：交互逻辑的核心载体

按钮类控件继承自QAbstractButton，共享文本、图标、快捷键等基础属性，同时各自具备独特交互逻辑，适用于不同选择场景。

1.1 PushButton：最常用的普通按钮

QPushButton是 Qt 中最基础的交互按钮，支持文本、图标、快捷键、重复触发等功能，是界面中 "确认""提交""取消" 等操作的首选。

核心属性与 API（继承 + 独有）：

基础属性 ：text（按钮文本）、icon（图标）、iconSize（图标尺寸）、shortcut（快捷键）；
交互属性 ：autoRepeat（长按重复触发）、autoRepeatDelay（重复触发延时）、autoRepeatInterval（重复触发周期）；
核心 API ：
- setText(const QString& text)：设置按钮文本；
- setIcon(const QIcon& icon)：设置按钮图标；
- setShortcut(const QKeySequence& key)：设置快捷键（支持单个键或组合键）；
- setAutoRepeat(bool flag)：开启 / 关闭长按重复触发。

实战示例 1：带图标 + 快捷键的按钮

新增 qrc 资源文件，添加图标（如code.png），前缀设为/；
代码中设置按钮图标、尺寸和快捷键：

cpp 复制代码

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

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 设置图标（从qrc资源读取）
    QIcon icon(":/doge.png");
    ui->pushButton->setIcon(icon);
    ui->pushButton->setIconSize(QSize(50, 50)); // 图标尺寸50x50
    // 设置快捷键（支持"w"单个键或"Ctrl+C"组合键）
    ui->pushButton->setShortcut(QKeySequence("w"));
    // 开启长按重复触发（类似游戏连发效果）
    ui->pushButton->setAutoRepeat(true);
    ui->pushButton->setAutoRepeatDelay(300); // 长按300ms后开始重复
    ui->pushButton->setAutoRepeatInterval(100); // 每100ms触发一次
}

// 按钮点击槽函数
void Widget::on_pushButton_clicked()
{
    qDebug() << "按钮被触发";
}

效果：按钮显示图标 + 文本，按w键或点击按钮均可触发，长按后会连续输出日志。

实战示例 2：控制目标按钮移动(带图片)

用四个方向 PushButton 控制目标按钮移动，结合geometry属性实现位置调整：

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 设置这些按钮的图标
    ui->pushButton_target->setIcon(QIcon(":/image/code.png"));
    ui->pushButton_target->setIconSize(QSize(120, 120));

    ui->pushButton_up->setIcon(QIcon(":/image/up.png"));
    ui->pushButton_up->setIconSize(QSize(50, 50));

    ui->pushButton_down->setIcon(QIcon(":/image/down.png"));
    ui->pushButton_down->setIconSize(QSize(50, 50));

    ui->pushButton_left->setIcon(QIcon(":/image/left.png"));
    ui->pushButton_left->setIconSize(QSize(50, 50));

    ui->pushButton_right->setIcon(QIcon(":/image/right.png"));
    ui->pushButton_right->setIconSize(QSize(50, 50));

    // 设置快捷键
//    ui->pushButton_up->setShortcut(QKeySequence("w"));
//    ui->pushButton_down->setShortcut(QKeySequence("s"));
//    ui->pushButton_left->setShortcut(QKeySequence("a"));
//    ui->pushButton_right->setShortcut(QKeySequence("d"));

    ui->pushButton_up->setShortcut(QKeySequence(Qt::Key_W));
    ui->pushButton_down->setShortcut(QKeySequence(Qt::Key_S));
    ui->pushButton_left->setShortcut(QKeySequence(Qt::Key_A));
    ui->pushButton_right->setShortcut(QKeySequence(Qt::Key_D));

    // 开启鼠标点击的连发功能
    ui->pushButton_up->setAutoRepeat(true);
    ui->pushButton_down->setAutoRepeat(true);
    ui->pushButton_left->setAutoRepeat(true);
    ui->pushButton_right->setAutoRepeat(true);
}

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


void Widget::on_pushButton_up_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    ui->pushButton_target->setGeometry(rect.x(), rect.y() - 5, rect.width(), rect.height());
}

void Widget::on_pushButton_down_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    ui->pushButton_target->setGeometry(rect.x(), rect.y() + 5, rect.width(), rect.height());
}

void Widget::on_pushButton_left_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    ui->pushButton_target->setGeometry(rect.x() - 5, rect.y(), rect.width(), rect.height());
}

void Widget::on_pushButton_right_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    ui->pushButton_target->setGeometry(rect.x() + 5, rect.y(), rect.width(), rect.height());
}

1.2 RadioButton：单选按钮（互斥选择）

QRadioButton适用于 "多选一" 场景（如性别选择、选项切换），默认具备互斥性(排他性) （选中一个会取消其他），可通过QButtonGroup分组实现多组单选。

核心属性与 API：

关键属性 ：checkable（是否可选中，默认 true）、checked（是否已选中）、autoExclusive（是否互斥，默认 true）；
核心 API ：
- setChecked(bool flag)：设置默认选中状态；
- isChecked()：判断是否被选中；
- setAutoExclusive(bool flag)：开启 / 关闭互斥（关闭后可多选，不推荐）。

实战示例：性别选择（基础单选）

拖放 3 个 RadioButton（男 / 女 / 其他）和 1 个 Label；
编写槽函数实现选择联动：

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"

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

    // 初始一个默认选择的按钮
    // 设置默认选中"男"
    ui->radioButton_male->setChecked(true);
    ui->label->setText("您的性别是: 男");

    // 禁用一个按钮
    // 但这样点了之后文本还是会显示，只是不能被选中了而已
    // ui->radioButton_other->setCheckable(false);
    ui->radioButton_other->setEnabled(false);
}

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


void Widget::on_radioButton_male_clicked()
{
    ui->label->setText("您的性别是: 男");
}

void Widget::on_radioButton_female_clicked()
{
    ui->label->setText("您的性别是: 女");
}

void Widget::on_radioButton_other_clicked()
{
    ui->label->setText("您的性别是: 其他");
}

效果：选中一个选项时，其他选项自动取消，并且默认是男，且其他选不了。Label 实时更新选择结果。

实战示例：click, press, release, toggled 的区别

clicked 表示一次 "点击"
pressed 表示鼠标 "按下"
released 表示鼠标 "释放"
toggled 表示按钮状态切换.

cpp 复制代码

#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_radioButton_clicked(bool checked)
{
    // 此处从 checked 就表示了当前 radioButton 的选中状态
    qDebug() << "clicked: " << checked;
}

void Widget::on_radioButton_2_pressed()
{
    qDebug() << "pressed";
}

void Widget::on_radioButton_3_released()
{
    qDebug() << "released";
}

void Widget::on_radioButton_4_toggled(bool checked)
{
    // checked 状态发生改变，就会触发这个信号
    qDebug() << "toggled: " << checked;
}

运行程序, 可以看到
- clicked 是⼀次鼠标按下+鼠标释放触发的.
- pressed 是鼠标按下触发的.
- released 是鼠标释放触发的.
- toggled 是 checked 属性改变时触发的.(这个是比较适配 QRadioButton 的)

实战示例：单选框分组（多组互斥）

默认情况下，同一父控件下的 RadioButton 会全局互斥，用QButtonGroup可实现分组互斥（如点餐时的汉堡、小食、饮料分组）：

cpp 复制代码

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

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

    // 使用 QButtonGroup 对单选按钮进行分组
    // 创建3个按钮组，分别管理汉堡、小食、饮料
    QButtonGroup* group1 = new QButtonGroup(this);
    QButtonGroup* group2 = new QButtonGroup(this);
    QButtonGroup* group3 = new QButtonGroup(this);

    // 把上述单选按钮, 放进不同的组里
    group1->addButton(ui->radioButton);
    group1->addButton(ui->radioButton_2);
    group1->addButton(ui->radioButton_3);

    group2->addButton(ui->radioButton_4);
    group2->addButton(ui->radioButton_5);
    group2->addButton(ui->radioButton_6);

    group3->addButton(ui->radioButton_7);
    group3->addButton(ui->radioButton_8);
}

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

效果：每组内部互斥，不同组之间可独立选择，符合真实点餐场景。

1.3 CheckBox：复选按钮（多选选择）

QCheckBox适用于 "多选多" 场景（如兴趣爱好、功能开启 / 关闭），支持多个选项同时选中，无默认互斥性。

核心属性与 API：

核心属性 ：checkable（默认 true）、checked（是否选中）；
核心 API ：
- isChecked()：判断是否被选中；
- setChecked(bool flag)：设置选中状态。

实战示例：获取多选结果

拖放 3 个 CheckBox（学习 / 打游戏 / 打工）和 1 个确认按钮；
点击确认按钮时，汇总选中的选项：

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"

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

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

void Widget::on_pushButton_clicked()
{
    QString result = "今天你的安排是：";
    if(ui->checkBox_study->isChecked())
    {
        result += ui->checkBox_study->text() + " ";
    }
    if(ui->checkBox_game->isChecked())
    {
        result += ui->checkBox_game->text() + " ";
    }
    if(ui->checkBox_work->isChecked())
    {
        result += ui->checkBox_work->text() + " ";
    }
    ui->label->setText(result);
}

效果：可同时选中多个选项，点击确认后汇总并显示结果。

1.4 按钮类控件关键区别与选型

还有一个 QToolButton 没讲，他的功能大部分和 QPushButton 一致。主要用于工具栏，菜单等场景，这里就先不介绍了。

控件类型	核心特性	适用场景
`PushButton`	单次触发、无选择状态	确认、提交、取消等操作
`RadioButton`	互斥选中、单选项	性别、单选选项切换
`CheckBox`	非互斥选中、多选项	兴趣爱好、功能开启 / 关闭

二. 显示类核心控件：Label（文本与图片展示）

QLabel是 Qt 中最常用的显示控件，支持纯文本、富文本、Markdown、图片等多种展示形式，还可设置对齐、换行、缩进等样式，是信息呈现的 "万能载体"。

核心属性与 API：

文本相关 ：text（显示文本）、textFormat（文本格式）、alignment（对齐方式）、wordWrap（自动换行）、indent（文本缩进）、margin（内边距）；
图片相关 ：pixmap（图片）、scaledContents（图片自适应填充）；
其他特性 ：buddy（关联伙伴控件）、openExternalLinks（打开外部链接）；
核心 API ：
- setText(const QString& text)：设置显示文本；
- setPixmap(const QPixmap& pixmap)：设置显示图片；
- setAlignment(Qt::Alignment alignment)：设置文本 / 图片对齐方式；
- setScaledContents(bool flag)：开启图片自适应 Label 尺寸；
- setBuddy(QWidget* buddy)：关联伙伴控件（点击 Label 激活伙伴）。

实战示例 1：显示不同格式文本

支持纯文本、富文本（HTML 标签）、Markdown 三种格式，满足不同排版需求：

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"

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

    // 给第一个 label 设置成纯文本
    ui->label->setTextFormat(Qt::PlainText);
    // ui->label->setText("这是一段纯文本");
    // ui->label->setText("<b>这是一段纯文本</b>");
    ui->label->setText("# 这是一段纯文本");

    // 给第二个 label 设置成富文本
    ui->label_2->setTextFormat(Qt::RichText);
    ui->label_2->setText("<b>这是一段富文本</b>");

    // 给第三个 label 设置成 markdown
    ui->label_3->setTextFormat(Qt::MarkdownText);
    ui->label_3->setText("# 这是一段 Markdown");
}

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

实战示例 2：显示图片并自适应窗口

新增 qrc 资源文件，添加图片（如code.png）；
代码中设置图片，并实现窗口大小改变时图片同步缩放(虚函数重写，看后面的图解)：

cpp 复制代码

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

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

    QRect rect = this->geometry();
    ui->label->setGeometry(0, 0, rect.width(), rect.height());

    QPixmap pixmap(":/code.png");
    ui->label->setPixmap(pixmap);
     // 开启图片自适应填充
    ui->label->setScaledContents(true);
}

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

// 重写窗口大小改变事件，同步更新Label尺寸
void Widget::resizeEvent(QResizeEvent *event)
{
    qDebug() << event->size();
    ui->label->setGeometry(0, 0, event->size().width(), event->size().height());
}

效果：图片填充整个 Label，拖动窗口改变大小时，图片同步缩放。

实战示例 3：文本样式精细化设置（对齐、换行、缩进）

通过属性组合实现文本的多样化排版：

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 在构造函数中,给这几个 label 设置不同的属性

    // 设置对齐方式
    ui->label->setText("这是一段文本");
    ui->label->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);

    // 设置自动换行
    ui->label_2->setText("这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本");
    ui->label_2->setWordWrap(true);

    // 设置缩进
    ui->label_3->setText("这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本");
    ui->label_3->setWordWrap(true);
    ui->label_3->setIndent(50);

    // 设置边距
    ui->label_4->setText("这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本");
    ui->label_4->setWordWrap(true);
    ui->label_4->setMargin(50);
}

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

实战示例 4：关联伙伴控件（提升操作便捷性）

Label 可关联输入框、单选框等控件，点击 Label 即可激活伙伴（如聚焦输入框、选中单选框）：

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"

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

    // 设置 label 和 radioButton 伙伴关系
    ui->label->setBuddy(ui->radioButton);
    ui->label_2->setBuddy(ui->radioButton_2);
}

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

效果：按下Alt+A选中 "选项 1"，Alt+B选中 "选项 2"，提升操作效率。

三. 关键避坑指南

RadioButton 互斥性 ：默认同一父控件下的 RadioButton 互斥，若需多组互斥，必须用QButtonGroup分组；
Label 图片自适应 ：scaledContents开启后，图片会拉伸填充 Label，若需保持比例，需手动缩放QPixmap（用scaled方法）；
PushButton 快捷键 ：组合键需用QKeySequence("Ctrl+C")格式，单个键直接写字符（如"w"）,当然也还有别的格式；
CheckBox 选中状态 ：判断是否选中必须用isChecked()，不可通过text()间接判断；
资源路径：Label 和按钮的图标需通过 qrc 资源文件引用，避免绝对路径导致程序移植后资源丢失。

结尾：

html 复制代码

🍓 我是草莓熊 Lotso！若这篇技术干货帮你打通了学习中的卡点：
👀 【关注】跟我一起深耕技术领域，从基础到进阶，见证每一次成长
❤️ 【点赞】让优质内容被更多人看见，让知识传递更有力量
⭐ 【收藏】把核心知识点、实战技巧存好，需要时直接查、随时用
💬 【评论】分享你的经验或疑问（比如曾踩过的技术坑？），一起交流避坑
🗳️ 【投票】用你的选择助力社区内容方向，告诉大家哪个技术点最该重点拆解
技术之路难免有困惑，但同行的人会让前进更有方向～愿我们都能在自己专注的领域里，一步步靠近心中的技术目标！

结语：本文覆盖了 Qt 按钮类（PushButton、RadioButton、CheckBox）和显示类核心控件 Label 的核心用法，从交互逻辑到展示样式，基本满足 GUI 开发中 "输入" 与 "输出" 的基础需求。实际开发中，可结合 QSS 美化控件样式、布局管理器调整位置，进一步提升界面美观度和适配性。后续可深入学习 LCD Number、ProgressBar 等其他显示类控件，拓展信息展示的多样性。

✨把这些内容吃透超牛的！放松下吧✨ ʕ˘ᴥ˘ʔ づきらど