【Qt】控件基础：QPushButton(按钮) QRadioButton(单选按钮)和QCheckBox(复选框)的交互实现

于 2024-05-14 08:55:09 发布
阅读量1k 收藏 13
点赞数 18
分类专栏： Qt 文章标签： qt 交互 开发语言 c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Colorful___/article/details/138707352
版权

文章目录

前言：

在Qt框架中，控件是构建用户界面的基本元素，它们允许用户与应用程序进行交互。本段代码主要介绍了Qt中的几种常用控件：QPushButton（按钮）、QRadioButton（单选按钮）和QCheckBox（复选框）。这些控件不仅具有基本的交互功能，还支持图标、快捷键设置、状态变更信号等高级特性，使得开发者可以创建出既美观又实用的用户界面。通过具体的代码示例，我们可以看到如何利用这些控件来实现具体的功能，如按钮的图标和快捷键设置、单选按钮的分组管理以及复选框的状态管理。
之前，QWidget 中涉及到的各种属性/函数/使用方法，针对接下来要介绍的Qt的各种控件都是有效的。

1.Push Button

使用 QPushButton 表示一个按钮，这也是当前我们最熟悉的一个控件了。
QPushButton 继承自 QAbstractButton。这个类是一个抽象类，是其他按钮的父类。
在这里插入图片描述
抽象类 这个类包含了纯虚函数，无法创建出实例（对象）
就得创建子类，重写上述虚函数，才能创建出子类的实例。

QAbstractButton中，和QPushButton相关性较大的属性：
在这里插入图片描述

1.1.给按钮加图标（图片）

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

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 创建一个图标对象
    QIcon icon(":/sdq.png");
    // 设置图标
    ui->pushButton->setIcon(icon);
    //设置图标尺寸
    ui->pushButton->setIconSize(QSize(50, 50));
}

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

在这里插入图片描述

1.2. 给按钮添加快捷键

前面写过一个例子，通过四个按钮，控制target 按钮移动
之前这个移动述同过鼠标点击按钮来实现的
此处就可以引入快捷键，通过快捷键来实现操作
此处按钮直接用图片来表示

  • 步骤：

1)创建 qrc 文件，导入资源
2）编辑ui文件，创建界面
3）编写构造函数，来完成一些初始化操作
4）实现方向键的槽函数
5）设置快捷键（关键点） 也是需要再Widget的构造函数中完成，程序一启动，快捷键就是有效的
6）连发功能
键盘快捷键，默认就是能连发的，但是鼠标快捷键点击按钮则不行

#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(":/sdq.png"));
    ui->pushButton_target->setIconSize(QSize(70, 70));

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

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

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

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

    // 直接通过按键的名字设置跨界键设置快捷键
    ui->pushButton_up->setShortcut(QKeySequence("ctrl+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::CTRL + 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()
{
    // 获取 target 的位置
    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()
{
    // 获取 target 的位置
    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()
{
    // 获取 target 的位置
    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()
{
    // 获取 target 的位置
    QRect rect = ui->pushButton_target->geometry();
    // 基于上次的位置，设置新的位置
    ui->pushButton_target->setGeometry(rect.x() + 5, rect.y(), rect.width(), rect.height());
}

2. Radio Button

QRadioButton 是单选按钮. 可以让我们在多个选项中选择⼀个.
作为 QAbstractButton 和 QWidget 的子类, 上面介绍的属性和用法, 对于 QRadioButton
同样适用。
QAbstractButton 中和 QRadioButton 关系较大的属性
在这里插入图片描述

#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("您选择的性别为: 男");

    // 禁用 其他 这个选项
    // checkedable 只是能让这个按钮不被选中，仍然可以响应点击事件
    //ui->radioButton_other->setCheckable(false);
    ui->radioButton_other->setEnabled(false);
    // ui->radioButton_other->setDisabled(true);
}

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



void Widget::on_radioButton_male_clicked()
{
    // 把界面上的 label 的内容进行更新
    ui->label->setText("您选择的性别为：男");
}

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

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

在这里插入图片描述
在这里插入图片描述

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;
}
  • 基于 QRadioButton 实现一个简单的模拟点餐的功能：
    在这里插入图片描述
    RadioButton 默认是排他的
    一旦界面上需要“多组”单选按钮的时候，希望组和组之间不要有互相影响。

QButtonGroup类，可以针对单选按钮进行分组：

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

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

    // 使用 QButtonGroup 对单选按钮进行分组
    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);
    group3->addButton(ui->radioButton_9);
}

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

3. Check Box

QCheckBox 表示复选按钮. 可以允许选中多个.
和 QCheckBox 最相关的属性也是 checkable 和 checked , 都是继承⾃
QAbstractButton .
⾄于 QCheckBox 独有的属性 tristate 用来实现 “三态复选框” . 这个东西比较冷门, 咱们不
做讨论。

#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_learn->isChecked()) {
        result += ui->checkBox_learn->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);
}

在这里插入图片描述

总结：

本文通过具体的代码示例，详细介绍了Qt中的几种常用控件及其使用方法。首先，我们学习了如何使用QPushButton来创建按钮，并为其添加图标和快捷键，还了解了如何通过重写信号和槽函数来响应按钮的点击事件。接着，我们探讨了QRadioButton单选按钮的使用，包括如何通过QButtonGroup类来实现单选按钮的分组，确保不同组的单选按钮互不影响。最后，我们了解了QCheckBox复选框的使用方法，包括如何检查复选框的状态，并根据选中的复选框更新界面上的信息。

Q_hd
关注
  • 18
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于QT+QML+C++的可交互的创意动态按钮QPushButton+源码
04-29
用法链接：https://menghui666.blog.csdn.net/article/details/138323059?spm=1001.2014.3001.5502 该项目实现了可交互的创意动态按钮，包含如下功能： 所有颜色自定义 鼠标悬浮渐变 两种点击效果：鼠标点击渐变 / 水波纹动画（可多层波纹叠加） 额外鼠标移入/移出/按下/弹起的实时/延迟共8种事件 鼠标悬浮图标位置主动变化 鼠标拖动图标抖动反弹效果 鼠标进入父控件时开启出现效果，或启动时出现 延迟出现的动画效果（多个按钮连续） 记录开关状态 直接设置 x、y 的圆角显示 边框颜色设置 禁用时半透明+点击穿透效果 添加额外的边缘角标 三种前景模式：图标、文字、带遮罩的图标（任意变色） 支持QSS直接设置部分属性 与父类 QPushButton 兼容 时间准确性：根据时间戳计算动画进度，即使在低性能机器上也可准时完成动画 稳定性：一按钮多功能，完美兼容多种情况下焦点事件 极其强大的可扩展性，继承该按钮后可任意修改显示效果和动画效果
Qt 常用控件按钮Button 案例分析
wei_Embedded_z的博客
10-11 352
Qt 常用控件按钮Button 案例分析 QPushButton 2.QToolButton 3.QRadioButton 4.QCheckBox 5.QCommandLinkButton 6.QDialogButtonBox
【Qt学习】QPushButton添加图标 并通过快捷键控制该图标
卜及中的博客
02-23 1062
我们知道：QPushButton表示一个按钮用于响应用户的点击事件。QPushButton可以显示文本、图标或同时显示两者，也可以设置按钮的样式和状态。用QPushButton设置图标，并设置快捷键控制该图标。
QPushbutton设置ICON和文字
beibeix2015的博客
05-09 2882
2.如果想让icon显示在文字上方可使用QToolButton。3.在pushbutton上面使用label进行布局。缺点：无法设置icon和文字之间的距离。1.使用系统自带api。
qt界面中Pushbutton添加图片的三种显示效果
Littlehero_121的博客
11-29 1万+
一、首先就是加载资源进来，这个可以参考之前自己写的https://blog.csdn.net/Littlehero_121/article/details/90032443 二、开始演示加载图片进来的几种效果： 1、选择按钮1，然后找到以下位置： 找到找到上述图片2中的位置，也就是倒三角，并且添加资源先开始第一个background_image，然后就是如图： 发现图片不能...
QPushButton使用css设置图标和文本
chenyijun的专栏
06-24 1880
平时我们设置QPushButton时只设置它的normal, hover, pressed三种状态的文本类型或者背景图片，很少用到图标和文本同时显示，本篇介绍图标和文本同时显示，并且图标可以动态调整显示位置，
qt改变按钮PushButtion图标
Hat_man_的博客
05-09 1965
QPushButton *button = new QPushButton("按钮");// 设置按钮的图标 button->setIcon(icon);// 显示按钮 button->show();// 创建一个 QPushButton 对象。// 创建一个 QIcon 对象。
Qt案例之利用QPushButton实现按钮长按事件.zip
05-01
Qt案例之利用QPushButton实现按钮长按事件，可参考文章：https://blog.csdn.net/didi_ya/article/details/124524420
基于QT+C++实现的会逃跑的按钮+源码
最新发布
05-04
该项目实现了会逃跑的按钮： 两个按钮，一个为普通按钮，另一个为会跑走的按钮 鼠标移到上面时，立刻跑掉 针对鼠标、键盘、触屏进行优化 随机交换两个按钮的文字、偶尔钻到另一个按钮下面、鼠标移开自动重置到...
基于Qt实现炫酷的自定义控件包括单选/多选/登录/进度条/编辑框/滑动条/按钮等+源码+项目说明（期末大作业&课程设计&项目开发
03-22
基于Qt实现炫酷的自定义控件包括单选/多选/登录/进度条/编辑框/滑动条/按钮等+源码+项目说明，适合期末大作业、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于Qt实现炫酷的...
Qt 4.8.2 QPushButton 按钮贴图
08-10
Qt 4.8.2 QPushButton 按钮贴图 源码 可执行文件
pyqt QStatusBar显示提示信息
sky0Lan的博客
09-22 420
QStatusBar 显示提示信息
【Qt】使用Qss设置QPushButton图标和显示文本的位置
iriczhao的博客
01-06 2万+
使用Qss设置QPushButton图标和显示文本的位置 一、背景 ​ 在开发中，经常使用到按钮作为人的一种输入部件，然而很多时候按钮又有不同的开发设计需求，本文重点分享：如何使用Qss来设置按钮的图标和按钮文本的位置。从而实现预期的开发效果。 【效果】 二、Css样式表 （2-1）常用的QPushButton样式表模板 QPushButton{ background-color: #2786ba; /* 背景颜色 */ border-radius:5px; /*
Qt之使用QSS设置QPushButton图标和文本的位置
草上爬的博客
08-11 8213
Qt之使用QSS设置QPushButton图标和文本的位置，本文将演示如何使用样式表控制按钮中的图标和本文。
QPushbutton设置icon和文字 （文字在图标下方）
thequitesunshine007的博客
03-09 1万+
1.使用系统自带api QIcon myicon1; myicon1.addFile(tr(":/image/Resource/new.png")); ui->new_btn->setIcon(myicon1); ui->new_btn->setIconSize(ui->new_btn->size()); //ui.btn_calib->setIconSize(QSize(90, 90));
QPushButton设置背景图片变换（素材四连图）
热门推荐
yixianfeng41的专栏
08-09 4万+
在QT中，QPushButton是我们经常用的控件，但是系统默认控件的样式不好看，因此我们一般都会给QPushButton设置背景图片，并且一般想达到的效果是，当鼠标放上去时是一张图片，当鼠标点击时是一张图片，当鼠标离开时，又是另外一张图片，怎么实现这个效果了。 1、setStyleSheet setStyleSheet("QPushButton{background-image: u
Qt pushbutton设置icon和文字
qq_24127015的博客
11-12 2万+
1.使用系统自带api ui->pushButton->setIconSize(QSize(32,32)); ui->pushButton->setIcon(QIcon(":/images/Setting.png")); ui->pushButton->setText(QString::fromLocal8Bit("系统设置"));...
QPushButton设置Icon在右文本在左显示
木可的博客
04-23 1万+
实现QPushButton控件Icon居右，text居左显示 如下效果图： function: QPushButton::setLayoutDirection(Qt::LayoutDirection direction);//设置部件的布局方向 实现： QPushButton * btn_button = new QPushButton(u8"点击按钮", this); btn_b...
QPushButton添加gif图标
hanzengyi的专栏
12-18 5303
#include class TOOTBtn : public QPushButton {     Q_OBJECT public:     TOOTBtn(const QString &imgPath, const QString &label, QWidget *parent = 0 )         : QPushButton(parent), _label(labe
介绍QPushButton命令按钮控件：
06-04
QPushButton是Qt中的命令按钮控件，它可以用于触发操作或执行命令。它提供了丰富的属性和方法用于控制按钮的外观和行为，可以设置按钮的文本、图标、样式、可用状态等等。同时，它还支持鼠标事件和键盘事件的响应，可以通过信号槽机制实现与其他控件的交互。 常见的用法包括： 1. 触发操作或执行命令：可以通过connect()方法将按钮的clicked()信号连接到槽函数，实现按钮被点击时执行相应的操作或命令。 2. 显示文本或图标：可以通过setText()方法设置按钮的文本内容，也可以通过setIcon()方法设置按钮的图标，还可以通过setStyleSheet()方法设置按钮的样式。 3. 控制按钮状态：可以通过setEnabled()方法设置按钮的可用状态，还可以通过setDefault()方法设置按钮的默认状态，以及通过setCheckable()方法设置按钮的选择状态等等。 总之，QPushButton是一个非常实用的控件，可以广泛应用于各种图形界面设计中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Q_hd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值