Qt QPushButton 按钮添加数字气泡

2024-09-04 08:20

本文主要是介绍Qt QPushButton 按钮添加数字气泡,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

使用场景

项目中,在某个按钮的右上角添加数字气泡是一个很常见的功能,可以用新建一个组合类来实现。不过这样比较麻烦,如果加气泡是后面的需求,可能改动的地方较多。

下面介绍2种比较简单,不需要改动按钮响应的方式。

实现效果图

方案1

方案2

实现 

方案1:直接在按钮内部贴一个 QLabel

这种情况按钮不能太小,按钮的图片不能占整个按钮最好不要太满。不然效果不理想。

#pragma once#include <QtWidgets/QWidget>
#include "ui_pafeyDemo.h"
#include <QLabel>class pafeyDemo : public QWidget
{Q_OBJECTpublic:pafeyDemo(QWidget *parent = Q_NULLPTR);private:Ui::pafeyDemoClass ui;QLabel *m_pLabelToolRed;
};
#include "pafeyDemo.h"pafeyDemo::pafeyDemo(QWidget *parent): QWidget(parent)
{ui.setupUi(this);m_pLabelToolRed = 0;connect(ui.pushButtonShow,&QPushButton::clicked,this, [=](){if (0 == m_pLabelToolRed){m_pLabelToolRed = new QLabel(ui.btTool);m_pLabelToolRed->setObjectName("btToolNew"); // 设置子控件的对象名m_pLabelToolRed->setFixedSize(16, 16); // 设置小圆点大小 //m_pLabelToolRed->setStyleSheet("background-color: rgba(255, 255, 255, 0);border-image: url(:/pafeyDemo/Resources/bar/bar_new.png);"); // 设置小圆点样式 m_pLabelToolRed->setStyleSheet("QLabel{background-color: rgb(255, 85, 0);color: rgb(255, 255, 255);border-radius:8px}"); // 设置小圆点样式 m_pLabelToolRed->move(ui.btTool->width() - 16, 0); // 将小圆点移动到右上角 m_pLabelToolRed->setText("96");m_pLabelToolRed->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);}m_pLabelToolRed->show();});connect(ui.pushButtonHide, &QPushButton::clicked, this, [=]() {m_pLabelToolRed->hide();});connect(ui.pushButtonNum, &QPushButton::clicked, this, [=]() {int num = m_pLabelToolRed->text().toInt()+1;if (num>99){m_pLabelToolRed->setFixedSize(22, 16); // 设置小圆点大小 m_pLabelToolRed->move(ui.btTool->width() - 22, 0); // 将小圆点移动到右上角 m_pLabelToolRed->setText(QString("99+"));}else{m_pLabelToolRed->setText(QString::number(num));}});}

要注意的是,红色气泡 QLabel 的长宽动态决定了 border-radius: 8px 的值,radius是长宽一半。

如果气泡的数字超过99,需要显示 99+ 的时候,可以加大 QLabel 的宽度。

我这个按钮比较小,99+的时候就挡住按钮本身比较多了。

效果不理想,那就可以用另一方案了。 

方案2:把按钮放在一个 QWidget 里面,再把气泡 QLabel 放在Qwidget 上。
#include "pafeyDemo.h"pafeyDemo::pafeyDemo(QWidget *parent): QWidget(parent)
{ui.setupUi(this);m_pLabelToolRed = 0;ui.widgetBubble->setFixedSize(50,50);connect(ui.pushButtonShow,&QPushButton::clicked,this, [=](){if (0 == m_pLabelToolRed){//m_pLabelToolRed = new QLabel(ui.btTool);m_pLabelToolRed = new QLabel(ui.widgetBubble);m_pLabelToolRed->setObjectName("btToolNew"); // 设置子控件的对象名m_pLabelToolRed->setFixedSize(16, 16); // 设置小圆点大小 //m_pLabelToolRed->setStyleSheet("background-color: rgba(255, 255, 255, 0);border-image: url(:/pafeyDemo/Resources/bar/bar_new.png);"); // 设置小圆点样式 m_pLabelToolRed->setStyleSheet("QLabel{background-color: rgb(255, 85, 0);color: rgb(255, 255, 255);border-radius:8px}"); // 设置小圆点样式 //m_pLabelToolRed->move(ui.btTool->width() - 16, 0); // 将小圆点移动到右上角 m_pLabelToolRed->move(ui.widgetBubble->width() - 16, 0); // 将小圆点移动到右上角 m_pLabelToolRed->setText("96");m_pLabelToolRed->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);}m_pLabelToolRed->show();});connect(ui.pushButtonHide, &QPushButton::clicked, this, [=]() {m_pLabelToolRed->hide();});connect(ui.pushButtonNum, &QPushButton::clicked, this, [=]() {int num = m_pLabelToolRed->text().toInt()+1;if (num > 99){m_pLabelToolRed->setFixedSize(22, 16); // 设置小圆点大小 //m_pLabelToolRed->move(ui.btTool->width() - 22, 0); // 将小圆点移动到右上角 m_pLabelToolRed->move(ui.widgetBubble->width() - 22, 0); // 将小圆点移动到右上角 m_pLabelToolRed->setText(QString("99+"));}else{m_pLabelToolRed->setText(QString::number(num));}});}

其实就是把 QLabel 的父句柄改为 QWidget 即可。

原来的按钮放在 QWidget 中间,气泡放在 QWidget 的右上角。

如果想让气泡压住图标一点可以再调整一下纵坐标。

这篇关于Qt QPushButton 按钮添加数字气泡的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1135494

相关文章

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

Qt QCustomPlot库简介(最新推荐)

《QtQCustomPlot库简介(最新推荐)》QCustomPlot是一款基于Qt的高性能C++绘图库,专为二维数据可视化设计,它具有轻量级、实时处理百万级数据和多图层支持等特点,适用于科学计算、... 目录核心特性概览核心组件解析1.绘图核心 (QCustomPlot类)2.数据容器 (QCPDataC

Qt如何实现文本编辑器光标高亮技术

《Qt如何实现文本编辑器光标高亮技术》这篇文章主要为大家详细介绍了Qt如何实现文本编辑器光标高亮技术,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解下... 目录实现代码函数作用概述代码详解 + 注释使用 QTextEdit 的高亮技术(重点)总结用到的关键技术点应用场景举例示例优化建议

Qt 设置软件版本信息的实现

《Qt设置软件版本信息的实现》本文介绍了Qt项目中设置版本信息的三种常用方法,包括.pro文件和version.rc配置、CMakeLists.txt与version.h.in结合,具有一定的参考... 目录在运行程序期间设置版本信息可以参考VS在 QT 中设置软件版本信息的几种方法方法一:通过 .pro

VS配置好Qt环境之后但无法打开ui界面的问题解决

《VS配置好Qt环境之后但无法打开ui界面的问题解决》本文主要介绍了VS配置好Qt环境之后但无法打开ui界面的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目UKeLvb录找到Qt安装目录中designer.UKeLvBexe的路径找到vs中的解决方案资源

Qt之QMessageBox的具体使用

《Qt之QMessageBox的具体使用》本文介绍Qt中QMessageBox类的使用,用于弹出提示、警告、错误等模态对话框,具有一定的参考价值,感兴趣的可以了解一下... 目录1.引言2.简单介绍3.常见函数4.按钮类型(QMessage::StandardButton)5.分步骤实现弹窗6.总结1.引言

Qt中Qfile类的使用

《Qt中Qfile类的使用》很多应用程序都具备操作文件的能力,包括对文件进行写入和读取,创建和删除文件,本文主要介绍了Qt中Qfile类的使用,具有一定的参考价值,感兴趣的可以了解一下... 目录1.引言2.QFile文件操作3.演示示例3.1实验一3.2实验二【演示 QFile 读写二进制文件的过程】4.

Qt实现网络数据解析的方法总结

《Qt实现网络数据解析的方法总结》在Qt中解析网络数据通常涉及接收原始字节流,并将其转换为有意义的应用层数据,这篇文章为大家介绍了详细步骤和示例,感兴趣的小伙伴可以了解下... 目录1. 网络数据接收2. 缓冲区管理(处理粘包/拆包)3. 常见数据格式解析3.1 jsON解析3.2 XML解析3.3 自定义

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现特殊字符判断并去掉非字母和数字的特殊字符

《Python实现特殊字符判断并去掉非字母和数字的特殊字符》在Python中,可以通过多种方法来判断字符串中是否包含非字母、数字的特殊字符,并将这些特殊字符去掉,本文为大家整理了一些常用的,希望对大家... 目录1. 使用正则表达式判断字符串中是否包含特殊字符去掉字符串中的特殊字符2. 使用 str.isa