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

相关文章

从去中心化到智能化:Web3如何与AI共同塑造数字生态

在数字时代的演进中,Web3和人工智能(AI)正成为塑造未来互联网的两大核心力量。Web3的去中心化理念与AI的智能化技术,正相互交织,共同推动数字生态的变革。本文将探讨Web3与AI的融合如何改变数字世界,并展望这一新兴组合如何重塑我们的在线体验。 Web3的去中心化愿景 Web3代表了互联网的第三代发展,它基于去中心化的区块链技术,旨在创建一个开放、透明且用户主导的数字生态。不同于传统

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

usaco 1.2 Name That Number(数字字母转化)

巧妙的利用code[b[0]-'A'] 将字符ABC...Z转换为数字 需要注意的是重新开一个数组 c [ ] 存储字符串 应人为的在末尾附上 ‘ \ 0 ’ 详见代码: /*ID: who jayLANG: C++TASK: namenum*/#include<stdio.h>#include<string.h>int main(){FILE *fin = fopen (

【QT】基础入门学习

文章目录 浅析Qt应用程序的主函数使用qDebug()函数常用快捷键Qt 编码风格信号槽连接模型实现方案 信号和槽的工作机制Qt对象树机制 浅析Qt应用程序的主函数 #include "mywindow.h"#include <QApplication>// 程序的入口int main(int argc, char *argv[]){// argc是命令行参数个数,argv是

Python QT实现A-star寻路算法

目录 1、界面使用方法 2、注意事项 3、补充说明 用Qt5搭建一个图形化测试寻路算法的测试环境。 1、界面使用方法 设定起点: 鼠标左键双击,设定红色的起点。左键双击设定起点,用红色标记。 设定终点: 鼠标右键双击,设定蓝色的终点。右键双击设定终点,用蓝色标记。 设置障碍点: 鼠标左键或者右键按着不放,拖动可以设置黑色的障碍点。按住左键或右键并拖动,设置一系列黑色障碍点

C# 防止按钮botton重复“点击”的方法

在使用C#的按钮控件的时候,经常我们想如果出现了多次点击的时候只让其在执行的时候只响应一次。这个时候很多人可能会想到使用Enable=false, 但是实际情况是还是会被多次触发,因为C#采用的是消息队列机制,这个时候我们只需要在Enable = true 之前加一句 Application.DoEvents();就能达到防止重复点击的问题。 private void btnGenerateSh

使用Qt编程QtNetwork无法使用

使用 VS 构建 Qt 项目时 QtNetwork 无法使用的问题 - 摘叶飞镖 - 博客园 (cnblogs.com) 另外,强烈建议在使用QNetworkAccessManager之前看看这篇文章: Qt 之 QNetworkAccessManager踏坑记录-CSDN博客 C++ Qt开发:QNetworkAccessManager网络接口组件 阅读目录 1.1 通用API函数

AIGC6: 走进腾讯数字盛会

图中是一个程序员,去参加一个技术盛会。AI大潮下,五颜六色,各种不确定。 背景 AI对各行各业的冲击越来越大,身处职场的我也能清晰的感受到。 我所在的行业为全球客服外包行业。 业务模式为: 为国际跨境公司提供不同地区不同语言的客服外包解决方案,除了人力,还有软件系统。 软件系统主要是提供了客服跟客人的渠道沟通和工单管理,内部管理跟甲方的合同对接,绩效评估,BI数据透视。 客服跟客人

Qt多语种开发教程

Qt作为跨平台的开发工具,早已应用到各行各业的软件开发中。 今天讲讲,Qt开发的正序怎么做多语言开发。就是说,你设置中文,就中文显示;设置英语就英文显示,设置繁体就繁体显示,设置发育就显示法语等。 开发环境(其实多语种这块根环境没太大关系):win10,Qt.5.12.10 一.先用QtCreator创建一个简单的桌面程序 1.工程就随便命名“LanguageTest”,其他默认。 2.在设计师

PNG透明背景按钮的实现(MFC)

问题描述: 当前要在对话框上添加一个以两个PNG图片作为背景的按钮,PNG图的背景是透明的,按钮也要做出相同的透明效果。并且鼠标不在按钮上时,按钮显示"bg1.png";鼠标移动到按钮上时,按钮显示"bg2.png" 开发环境为VS2010。 解决办法: 使用GDI+库装载PNG图片,并使用MFC Button Control和CMFCButton类结合,调用CMFCButton