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

相关文章

使用PyTorch实现手写数字识别功能

《使用PyTorch实现手写数字识别功能》在人工智能的世界里,计算机视觉是最具魅力的领域之一,通过PyTorch这一强大的深度学习框架,我们将在经典的MNIST数据集上,见证一个神经网络从零开始学会识... 目录当计算机学会“看”数字搭建开发环境MNIST数据集解析1. 认识手写数字数据库2. 数据预处理的

java字符串数字补齐位数详解

《java字符串数字补齐位数详解》:本文主要介绍java字符串数字补齐位数,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java字符串数字补齐位数一、使用String.format()方法二、Apache Commons Lang库方法三、Java 11+的St

Qt 中 isHidden 和 isVisible 的区别与使用小结

《Qt中isHidden和isVisible的区别与使用小结》Qt中的isHidden()和isVisible()方法都用于查询组件显示或隐藏状态,然而,它们有很大的区别,了解它们对于正确操... 目录1. 基础概念2. 区别清见3. 实际案例4. 注意事项5. 总结1. 基础概念Qt 中的 isHidd

QT移植到RK3568开发板的方法步骤

《QT移植到RK3568开发板的方法步骤》本文主要介绍了QT移植到RK3568开发板的方法步骤,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录前言一、获取SDK1. 安装依赖2. 获取SDK资源包3. SDK工程目录介绍4. 获取补丁包二

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Qt实现发送HTTP请求的示例详解

《Qt实现发送HTTP请求的示例详解》这篇文章主要为大家详细介绍了如何通过Qt实现发送HTTP请求,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、添加network模块2、包含改头文件3、创建网络访问管理器4、创建接口5、创建网络请求对象6、创建一个回复对

Qt 中集成mqtt协议的使用方法

《Qt中集成mqtt协议的使用方法》文章介绍了如何在工程中引入qmqtt库,并通过声明一个单例类来暴露订阅到的主题数据,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一,引入qmqtt 库二,使用一,引入qmqtt 库我是将整个头文件/源文件都添加到了工程中进行编译,这样 跨平台

Java数字转换工具类NumberUtil的使用

《Java数字转换工具类NumberUtil的使用》NumberUtil是一个功能强大的Java工具类,用于处理数字的各种操作,包括数值运算、格式化、随机数生成和数值判断,下面就来介绍一下Number... 目录一、NumberUtil类概述二、主要功能介绍1. 数值运算2. 格式化3. 数值判断4. 随机

基于Qt Qml实现时间轴组件

《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用