超酷的Qt消息提示框,仿126邮箱登录提示

原创 2013年12月04日 18:11:05

最近正在学习Qt,根据实际业务需求花了一天的时候制作了一个消息提示框,仿造126邮箱登录的提示。第一次开源发布代码,还请高手轻拍,并请留下宝贵意见用来完善以及以后制作更多更有趣的插件。谢谢。


主要代码如下:

cmsgtooltip.h

 

#include <QtCore>
#include <QWidget>
#include <QLabel>
#include <QMouseEvent>
#include <QFrame>

#if defined(MSGTOOLTIP_LIBRARY)
#  define MSGTOOLTIPSHARED_EXPORT Q_DECL_EXPORT
#else
#  define MSGTOOLTIPSHARED_EXPORT Q_DECL_IMPORT
#endif

class MSGTOOLTIPSHARED_EXPORT CMsgToolTip : public QWidget
{
    Q_OBJECT
public:
    explicit CMsgToolTip(QWidget *parent = 0);
    ~CMsgToolTip();
    void setArrowDirection(int);
    void setTipType(int);
    void setTipTitle(QString newSTipTitle);
    void setTipContent(QString newSTipContent);
    void setObjectP(QWidget*);
    void init();
    enum ArrowDirecion
    {
        Top     = 0x0000,
        Right   = 0x0001,
        Bottom  = 0x0002,
        Left    = 0x0003,
        Warm    = 0x0004,
        Error   = 0x0005,
        Info    = 0x0006,
        Success = 0x0007
    };
public slots:
    void closeDlg();
private:
    void _DrawBg();
    void _DrawArrow();
    void _DrawIcon();
    void _CalculateHeight();
protected:
    void mousePressEvent(QMouseEvent *event);

private:
    /* 提示框箭头指向位置 */
    int nArrowDirection;

    /* 提示类型 */
    int nTipType;
    /* 提示的标题 */
    QString sTipTitle;
    /* 提示内容 */
    QString sTipContent;
    /* 对象指针 */
    QWidget* p_object;

    /* 提示框的总高度 */
    int nHeight;
    /* 起点X值 */
    int nPosX;
    /* 起点Y值 */
    int nPosY;
    /* 控件宽度 */
    int nWidgetWidth;
    /* 控件高度 */
    int nWidgetHeight;

    /* 动画类 */
    QPropertyAnimation* animation;

    QFrame* p_myframe;
};

cmsgtooltip.cpp

/***********************************************************************
 * Module:  CMsgToolTip.cpp
 * Author:  后天下雪
 * Email:   dwx1011@126.com
 * Modified: 2013年12月4日 14:06:06
 * Comment: 仿126登录消息提示框
 ***********************************************************************/

#include "cmsgtooltip.h"

CMsgToolTip::CMsgToolTip(QWidget *parent) :
    QWidget(parent)
{
}

void CMsgToolTip::init()
{

    _CalculateHeight();
    _DrawBg(); // 绘制背景
    _DrawArrow();
    _DrawIcon();

    int pos_x = 0, pos_y = 0,nWidgetWidth = 0,nWidhetHeight = 0;
    if(p_object!=NULL)
    {
        QPoint GlobalPoint(p_object->mapToParent(QPoint(0, 0)));
        pos_x = GlobalPoint.x();
        pos_y = GlobalPoint.y();
        nWidgetWidth = p_object->width();
        nWidhetHeight = p_object->height();
    }


    animation = new QPropertyAnimation(this,"pos");
    animation->setDuration(1000);
    if(nArrowDirection == CMsgToolTip::Top || nArrowDirection == CMsgToolTip::Bottom){

        if(nArrowDirection == CMsgToolTip::Top){
            // 当箭头向上时候
            // 有效实际y坐标 应该为当前控件的y坐标+当前控件的实际高度+偏差值(默认6)
            pos_y = pos_y+nWidhetHeight+6;
        }
        else{
            // 当箭头向下时候
            // 有效实际y坐标 应该为当前控件的y坐标 - 当前消息总高度 - 偏差值(默认6)
            pos_y = pos_y-nHeight-24;
        }
        // 实际有效的x坐标 应该为当前坐标的正中间,即 控件当前x坐标减去 消息固定宽度380与空间实际宽度差/4
        pos_x = pos_x - (380-nWidgetWidth)/4;

        animation->setKeyValueAt(0, QPoint(pos_x,pos_y));
        animation->setKeyValueAt(0.3, QPoint(pos_x,pos_y-5));
        animation->setKeyValueAt(0.6, QPoint(pos_x,pos_y));
        animation->setKeyValueAt(0.8, QPoint(pos_x,pos_y-5));
        animation->setKeyValueAt(1, QPoint(pos_x,pos_y));
    }else{

        if(nArrowDirection == CMsgToolTip::Right){
            // 当箭头向右时候
            // 有效实际x坐标 应该为当前控件的x坐标-消息实际宽度380 -偏差值(默认12)
            pos_x = pos_x-360;
        }
        else{
            // 当箭头向下时候
            // 有效实际x坐标 应该为当前控件的x坐标 + 当前控件的实际宽度 + 偏差值(默认12)
            pos_x = pos_x+nWidgetWidth+12;
        }
        // 实际有效的y坐标 应该为当前坐标的正中间,即 控件当前y坐标 - 窗体有效高/2 加上 当前控件高度的一半高度
        pos_y = pos_y -nHeight/2 +nWidhetHeight/2;

        animation->setKeyValueAt(0, QPoint(pos_x,pos_y));
        animation->setKeyValueAt(0.3, QPoint(pos_x-5,pos_y));
        animation->setKeyValueAt(0.6, QPoint(pos_x,pos_y));
        animation->setKeyValueAt(0.8, QPoint(pos_x-5,pos_y));
        animation->setKeyValueAt(1, QPoint(pos_x,pos_y));
    }

    animation->start();
}

////////////////////////////////////////////////////////////////////////
// Name:       CMsgToolTip::_DrawBg()
// Purpose:    绘制消息框背景
// Return:     void
////////////////////////////////////////////////////////////////////////
void CMsgToolTip::_DrawBg()
{
    p_myframe = new QFrame(this);
    p_myframe->setStyleSheet("background-color:#fbfbfb;border-radius:4px;");

    if(nArrowDirection == CMsgToolTip::Left){
        p_myframe->setGeometry(12,0,338,nHeight);
    }else if(nArrowDirection == CMsgToolTip::Top){
        p_myframe->setGeometry(0,12,338,nHeight);
    }else if(nArrowDirection == CMsgToolTip::Bottom){
        p_myframe->setGeometry(0,0,338,nHeight);
    }else{
        p_myframe->setGeometry(0,0,338,nHeight);
    }

    QLabel* titleLabel = new QLabel(p_myframe);
    titleLabel->setText(sTipTitle);
    titleLabel->setStyleSheet("margin:20px 0px 0px 60px;font-size:12pt;font-weight:bold");
    if(!sTipContent.isEmpty()) // 当提示详细信息不为空的时候,绘制提示信息详细内容
    {
        QLabel* lineLabel = new QLabel(p_myframe);
        lineLabel->setText("");
        lineLabel->setStyleSheet("border:1px solid #cccccc;");
        lineLabel->setGeometry(25,55,300,1);

        QLabel* contentLabel = new QLabel(p_myframe);
        contentLabel->setText(sTipContent);
        contentLabel->setStyleSheet("margin:65px 0px 0px 25px;");
    }
}

////////////////////////////////////////////////////////////////////////
// Name:       CMsgToolTip::_DrawArrow()
// Purpose:    绘制三角形背景
// Return:     void
////////////////////////////////////////////////////////////////////////
void CMsgToolTip::_DrawArrow()
{
    QLabel* arrow = new QLabel(this);

    if(nArrowDirection == CMsgToolTip::Left){
        QPixmap pixmap(":/img/arrow-left.png");
        arrow->setPixmap(pixmap);
        arrow->setGeometry(0,(nHeight/2-10),12,19);
    }else if(nArrowDirection == CMsgToolTip::Top){
        QPixmap pixmap(":/img/arrow-top.png");
        arrow->setPixmap(pixmap);
        arrow->setGeometry(160,0,19,12);
    }else if(nArrowDirection == CMsgToolTip::Bottom){
        QPixmap pixmap(":/img/arrow-bottom.png");
        arrow->setPixmap(pixmap);
        arrow->setGeometry(160,nHeight,19,12);
    }else{
        QPixmap pixmap(":/img/arrow-right.png");
        arrow->setPixmap(pixmap);
        arrow->setGeometry(338,(nHeight/2-10),12,19);
    }

}

////////////////////////////////////////////////////////////////////////
// Name:       CMsgToolTip::_DrawIcon()
// Purpose:    绘制提示信息的类型图片
// Return:     void
////////////////////////////////////////////////////////////////////////
void CMsgToolTip::_DrawIcon()
{
    QLabel* icon = new QLabel(p_myframe);
    QString imgPath = QString();
    if(nTipType == CMsgToolTip::Error){
        imgPath = ":/img/error.png";
    }else if(nTipType == CMsgToolTip::Warm){
        imgPath = ":/img/warm.png";
    }else{
        imgPath = ":/img/info.png";
    }
    QPixmap pixmap(imgPath);
    icon->setPixmap(pixmap);
    icon->setStyleSheet("margin:15px 0px 0px 25px");
}

////////////////////////////////////////////////////////////////////////
// Name:       CMsgToolTip::_CalculateHeight()
// Purpose:    计算对话框的高度
// Parameters:
// - newBFixedPostion
// Return:     void
////////////////////////////////////////////////////////////////////////
void CMsgToolTip::_CalculateHeight()
{
    // 对话框的高度 = title高度+content高度
    if(sTipContent.isEmpty())
    {
        nHeight = 60;
    }
    else
    {
        int m = sTipContent.count("\n");
        m++;
        nHeight = 80+m*20;
    }
}

////////////////////////////////////////////////////////////////////////
// Name:       CMsgToolTip::setNArrowDirection(int newNArrowDirection)
// Purpose:    Implementation of CMsgToolTip::setNArrowDirection()
// Parameters:
// - newNArrowDirection
// Return:     void
////////////////////////////////////////////////////////////////////////
void CMsgToolTip::setArrowDirection(int newNArrowDirection)
{
    nArrowDirection = newNArrowDirection;
}

////////////////////////////////////////////////////////////////////////
// Name:       CMsgToolTip::setNPosY(int newNPosY)
// Purpose:    Implementation of CMsgToolTip::setNPosY()
// Parameters:
// - newNPosY
// Return:     void
////////////////////////////////////////////////////////////////////////
void CMsgToolTip::setTipType(int newNTipType)
{
    nTipType = newNTipType;
}

////////////////////////////////////////////////////////////////////////
// Name:       CMsgToolTip::setSTipTitle(QString newSTipTitle)
// Purpose:    Implementation of CMsgToolTip::setSTipTitle()
// Parameters:
// - newSTipTitle
// Return:     void
////////////////////////////////////////////////////////////////////////
void CMsgToolTip::setTipTitle(QString newSTipTitle)
{
    sTipTitle = newSTipTitle;
}

////////////////////////////////////////////////////////////////////////
// Name:       CMsgToolTip::setSTipContent(QString newSTipContent)
// Purpose:    Implementation of CMsgToolTip::setSTipContent()
// Parameters:
// - newSTipContent
// Return:     void
////////////////////////////////////////////////////////////////////////
void CMsgToolTip::setTipContent(QString newSTipContent)
{
    sTipContent = newSTipContent;
}

////////////////////////////////////////////////////////////////////////
// Name:       CMsgToolTip::setObjectP(QObject  *p)
// Purpose:    设置对象指针
// Parameters:
// - newSTipContent
// Return:     void
////////////////////////////////////////////////////////////////////////
void CMsgToolTip::setObjectP(QWidget *p)
{
    p_object = p;
}


void CMsgToolTip::mousePressEvent(QMouseEvent *e)
{
    if(e->button() == Qt::LeftButton)
    {
        closeDlg();
    }
}
////////////////////////////////////////////////////////////////////////
// Name:       CMsgToolTip::_CloseDlg()
// Purpose:    Implementation of CMsgToolTip::_CloseDlg()
// Return:     void
////////////////////////////////////////////////////////////////////////
void CMsgToolTip::closeDlg()
{
    // TODO : implement
   this->close();
}

///////////////////////////////////////////////////////////////////////////////////////////
// 释放资源函数
///////////////////////////////////////////////////////////////////////////////////////////
CMsgToolTip::~CMsgToolTip()
{
    delete animation;
    delete p_myframe;
}

插件是导出类,可以在任意位置调用。


效果图如下:


内附调用示意代码。

源码下载地址:http://download.csdn.net/detail/bsbsxll/6657509



欢迎一起讨论Qt技术。 

ps:第一次做Qt 第一次做c++,对于很多还是不熟悉的。请大牛们指点指点。谢谢!

Qt之自定义提示框二(右下角冒泡)

网页右下角上经常会出现一些提示性的信息,B/S有的东西,C/S当然也可以有,就像QQ的消息提示一样! 实现一个类似的东西并不困难,只要想明白原理实现起来就很简单了!   实现原理: ...
  • qustdjx
  • qustdjx
  • 2014年03月03日 19:36
  • 3018

冒泡提示框的纯css脚本

/* 这个是用来存放显示内容的div样式 */ .tip-bubble {  position: absolute;  background-color: #202020;  width: 10...
  • xq30397022
  • xq30397022
  • 2013年08月06日 11:06
  • 1567

QT2.3.10下冒泡式弹出式对户框的制作

Qt2.3.10制作冒泡式弹出对话框Snail    07年7月第一个星期制作制作冒泡式弹出对话框主要涉及2个技术要点(主要供触摸屏使用)1 实用的Qtimer类的使用(计算鼠标在对象上的停留时间确定...
  • snailjava
  • snailjava
  • 2007年07月12日 12:26
  • 2361

QT弹出消息框

QMessageBox::information(this, QString::fromLocal8Bit("警告"),QString::fromLocal8Bit("有种你再点击一次"));...
  • lcalqf
  • lcalqf
  • 2015年10月09日 14:41
  • 4778

Qt学习笔记:画一条带箭头的线

QPainterPathQPainterPath其实是一个容器,他可以包含一个或者多个不同的绘画步骤,通过这些步骤组成较为复杂的图案,然后使用QPainter.drawPath()将这些图案一次性画出...
  • founderznd
  • founderznd
  • 2016年06月14日 00:15
  • 3748

Qt小提示Demo(三种提示框)

Qt的提示功能有3种: 1、自带的部件提示函数setToolTip(QString) 2、QToolTip定义单词提示,提升部件就可以了 3、自定义类和自画提示框 针对每一个提示,分别做了De...
  • u014597198
  • u014597198
  • 2016年11月22日 13:16
  • 1711

Qt 之 自定义提示信息框—QQ风格

一、简述在 Qt 之 自定义提示信息框—迅雷风格 这篇文章中讲述了如何实现迅雷风格的自定义提示框。那么在这一篇中我们就讲述一下如何实现QQ风格的提示框。整体代码与Qt 之 自定义提示信息框—迅雷风格 ...
  • GoForwardToStep
  • GoForwardToStep
  • 2016年12月20日 12:42
  • 3456

Qt浅谈之四十八窗口下方弹出提示信息

一、简介       在项目中一般都会弹出新的子对话框显示提示信息,但对于一些因后台数据变化引发的提示还是在窗口下方弹出提示信息比较合理。点击按钮弹出提示信息,当鼠标放在提示信息对话框上时,暂时动画...
  • taiyang1987912
  • taiyang1987912
  • 2016年03月31日 23:16
  • 2132

Qt 实现桌面右下角消息弹窗提示

简单的做了一个类似QQ消息提示的消息弹窗提示的小模块,便于在系统后台程序提示检测的信息,使用Qt开发,设计整体思路是做一个无框架的widget,自己实现标题栏和内容栏,添加了向上移出,自动消隐退出效果...
  • u012739657
  • u012739657
  • 2013年11月06日 11:29
  • 1949

Qt中自定义MessageBox提示框

概述: 在做项目时,我们经常会用到QMessageBox这个控件,但有时候Qt自己提供的不能 满足我们项目的需求,于是打算用自己定义的MessageBox。下面是自己定义的一个 消息提示框的控件类,...
  • Andy_93
  • Andy_93
  • 2016年11月18日 11:47
  • 2306
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:超酷的Qt消息提示框,仿126邮箱登录提示
举报原因:
原因补充:

(最多只允许输入30个字)