qt实现带数字的消息通知

cpp 复制代码
#include <QPushButton>
#include <QLabel>
#include <QHBoxLayout>

class BadgeButton : public QPushButton
{
    Q_OBJECT
public:
    explicit BadgeButton(QWidget *parent = nullptr) : QPushButton(parent)
    {
        // 创建提示徽章(红色背景+数字)
        m_badge = new QLabel(this);
        m_badge->setStyleSheet(R"(
            background-color: red;
            color: white;
            border-radius: 8px;  /* 圆角 */
            font-size: 12px;
            padding: 0px 4px;    /* 左右留白,让数字居中 */
        )");
        m_badge->setAlignment(Qt::AlignCenter);  // 文字居中
        m_badge->hide();  // 默认隐藏
    }

    // 设置未读数量(0则隐藏,>9显示"9+")
    void setUnreadCount(int count)
    {
        if (count <= 0) {
            m_badge->hide();
            return;
        }
        // 超过9条显示"9+"
        m_badge->setText(count > 9 ? "9+" : QString::number(count));
        // 调整徽章大小(根据文字长度自动适应)
        m_badge->adjustSize();
        // 确保最小尺寸(至少能显示一个数字)
        m_badge->setMinimumSize(16, 16);
        m_badge->show();
        // 更新位置
        updateBadgePosition();
    }

protected:
    // 按钮大小改变时更新徽章位置
    void resizeEvent(QResizeEvent *event) override
    {
        QPushButton::resizeEvent(event);
        updateBadgePosition();
    }

private:
    QLabel *m_badge;

    // 更新徽章到右上角
    void updateBadgePosition()
    {
        if (!m_badge->isVisible()) return;
        // 右上角定位(向右上方偏移,避免完全贴边)
        int x = width() - m_badge->width() + 2;  // 右偏移2px(部分超出按钮边缘更美观)
        int y = -m_badge->height() / 2;          // 上偏移一半高度(部分超出顶部)
        m_badge->move(x, y);
    }
};

使用方法

cpp 复制代码
BadgeButton *btn = new BadgeButton(this);
btn->setText("消息");
btn->setGeometry(50, 50, 100, 40);
btn->setUnreadCount(3);  // 显示3条未读
// btn->setUnreadCount(15);  // 显示"9+"
相关推荐
十日十行7 小时前
信号槽连接不上的可能
qt
Source.Liu8 小时前
【CMakeLists.txt】QtSvg 头文件包含配置详解
c++·qt·librecad
sulikey10 小时前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
sulikey15 小时前
Qt 入门简洁笔记:信号与槽
前端·c++·笔记·qt·前端框架·1024程序员节·qt框架
yugi98783816 小时前
基于Qt实现百度地图路径规划功能
开发语言·qt
油炸自行车1 天前
【Qt】VS Code配置Qt UI插件,vscode打开Qt Designer ,vscode打开Qt*.ui文件
qt·ui·cursor·qt designer·vscode插件·trae·qt ui
Jay Chou why did1 天前
3. Qt 信号槽
qt
包饭厅咸鱼1 天前
QT----使用onnxRuntime运行图像分类模型
开发语言·qt·分类
碰大点2 天前
Ubuntu 16.04交叉编译arm-linux-gnueabihf的QT5.6.2
linux·arm开发·qt·ubuntu·arm-linux