Qt之自定义界面(右下角冒泡)

简介:

简述

网页右下角上经常会出现一些提示性的信息,桌面软件中也比较常见,类似360新闻、QQ消息提示一样!

这种功能用动画实现起来很简单,这节我们暂时使用定时器来实现,后面章节会对动画框架进行详细讲解。

下面我们来实现一个右下角冒泡的功能。

效果

这里写图片描述

实现原理

  • 显示
    定时器启动,右下角缓慢弹出,逐渐改变位置

  • 驻留
    让界面停留一定的时间,时间过后自动关闭。

  • 退出
    可以直接点击关闭退出,也可以采用改变透明度的形式模糊退出。

连接信号与槽

m_pShowTimer = new QTimer(this);
m_pStayTimer = new QTimer(this);
m_pCloseTimer = new QTimer(this);

connect(m_pShowTimer, SIGNAL(timeout()), this, SLOT(onMove()));
connect(m_pStayTimer, SIGNAL(timeout()), this, SLOT(onStay()));
connect(m_pCloseTimer, SIGNAL(timeout()), this, SLOT(onClose()));

实现

界面现实的时候调用showMessage(),然后启动定时器开始显示、驻留、关闭。

// 显示
void MainWindow::showMessage()
{
    QRect rect = QApplication::desktop()->availableGeometry();
    m_point.setX(rect.width() - width());
    m_point.setY(rect.height() - height());
    move(m_point.x(), m_point.y());
    m_pShowTimer->start(5);
}

// 移动
void MainWindow::onMove()
{
    m_nDesktopHeight--;
    move(m_point.x(), m_nDesktopHeight);
    if (m_nDesktopHeight <= m_point.y())
    {
        m_pShowTimer->stop();
        m_pStayTimer->start(5000);
    }
}

// 驻留
void MainWindow::onStay()
{
    m_pStayTimer->stop();
    m_pCloseTimer->start(100);
}

// 关闭
void MainWindow::onClose()
{
    m_dTransparent -= 0.1;
    if (m_dTransparent <= 0.0)
    {
        m_pCloseTimer->stop();
        close();
    }
    else
    {
        setWindowOpacity(m_dTransparent);
    }
}
相关文章
|
7月前
|
算法 C++
|
API 计算机视觉
Qt实用技巧:自定义窗口标题栏
Qt实用技巧:自定义窗口标题栏
Qt实用技巧:自定义窗口标题栏
|
5月前
|
前端开发
css动画效果代码淡入淡出折叠展开点击悬浮
css动画效果代码淡入淡出折叠展开点击悬浮
|
11月前
|
UED
【Axure教程】鼠标滚动上下翻页效果
【Axure教程】鼠标滚动上下翻页效果
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
MFC窗口右下角弹窗
MFC窗口右下角弹窗
81 0
|
C++
Qt界面优化:鼠标双击特效
Qt界面优化:鼠标双击特效
195 1
Qt界面优化:鼠标双击特效
Qt6-鼠标移动窗口
新版的Qt6 鼠标事件中函数是有更新了,不过帮助文档还没有更新过来。希望官方也要快速同步呦。 在Qt5中代码
180 0
Qt-网易云音乐界面实现-1 窗口隐藏拖拽移动,自定义标题栏
最近也换了公司,也换了新的工作,工资也象征性的涨了一点点,但是最近心里还是慌慌,不知道为什么,没有那种踏实感,感觉自己随时可以被抛弃的感觉。感觉自己在荒废时间,也感觉自己在浪费生命。
239 0
Qt-网易云音乐界面实现-1 窗口隐藏拖拽移动,自定义标题栏
PyQt5 技术篇-鼠标移动控件显示提示,Qt Designer控件提示设置方法。
PyQt5 技术篇-鼠标移动控件显示提示,Qt Designer控件提示设置方法。
874 0
PyQt5 技术篇-鼠标移动控件显示提示,Qt Designer控件提示设置方法。

推荐镜像

更多