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

相关文章

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

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

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

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

Android实现悬浮按钮功能

《Android实现悬浮按钮功能》在很多场景中,我们希望在应用或系统任意界面上都能看到一个小的“悬浮按钮”(FloatingButton),用来快速启动工具、展示未读信息或快捷操作,所以本文给大家介绍... 目录一、项目概述二、相关技术知识三、实现思路四、整合代码4.1 Java 代码(MainActivi

Qt中QGroupBox控件的实现

《Qt中QGroupBox控件的实现》QGroupBox是Qt框架中一个非常有用的控件,它主要用于组织和管理一组相关的控件,本文主要介绍了Qt中QGroupBox控件的实现,具有一定的参考价值,感兴趣... 目录引言一、基本属性二、常用方法2.1 构造函数 2.2 设置标题2.3 设置复选框模式2.4 是否

QT进行CSV文件初始化与读写操作

《QT进行CSV文件初始化与读写操作》这篇文章主要为大家详细介绍了在QT环境中如何进行CSV文件的初始化、写入和读取操作,本文为大家整理了相关的操作的多种方法,希望对大家有所帮助... 目录前言一、CSV文件初始化二、CSV写入三、CSV读取四、QT 逐行读取csv文件五、Qt如何将数据保存成CSV文件前言

Qt中QUndoView控件的具体使用

《Qt中QUndoView控件的具体使用》QUndoView是Qt框架中用于可视化显示QUndoStack内容的控件,本文主要介绍了Qt中QUndoView控件的具体使用,具有一定的参考价值,感兴趣的... 目录引言一、QUndoView 的用途二、工作原理三、 如何与 QUnDOStack 配合使用四、自

Qt spdlog日志模块的使用详解

《Qtspdlog日志模块的使用详解》在Qt应用程序开发中,良好的日志系统至关重要,本文将介绍如何使用spdlog1.5.0创建满足以下要求的日志系统,感兴趣的朋友一起看看吧... 目录版本摘要例子logmanager.cpp文件main.cpp文件版本spdlog版本:1.5.0采用1.5.0版本主要

使用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