QML 实现上浮后消失的提示框

news2024/11/25 15:22:30

基本效果:上浮逐渐显示,短暂停留后上浮逐渐消失

为了能同时显示多个提示框,一是需要动态创建每个弹框 Item,二是弹出位置问题,如果是底部为基准位置就把已经弹出的往上移动。

效果展示:

主要实现代码:

(github链接:https://github.com/gongjianbo/MyTestCode/tree/master/Qml/TestQml_20240622_Toast)

(组件分ToastItem、ToastManager两个部分)

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

// 消息提示框
// 龚建波 2024-06-22
Window {
    id: control

    // width: context.implicitWidth + 40
    // height: context.implicitHeight + 30
    y: yShow - yOffset
    flags: Qt.ToolTip
    color: "transparent"

    // 移动起始位置
    property real yFrom: 0
    // 移动暂留位置
    property real yStay: 0
    // 移动结束位置
    property real yTo: 0
    // 移动当前位置
    property real yShow: 0
    // 位置偏移
    property real yOffset: 0

    // 背景
    Rectangle {
        id: bg
        anchors.fill: parent
        radius: 4
        color: "#99000000"
    }

    // 文字内容
    Text {
        id: context
        anchors.centerIn: parent
        color: "white"
    }

    Behavior on yOffset {
        NumberAnimation {
            duration: 200
        }
    }

    SequentialAnimation {
        id: sequential
        ParallelAnimation {
            NumberAnimation {
                target: control
                properties: "opacity"
                from: 0.1
                to: 1
                duration: 200
            }
            NumberAnimation {
                target: control
                properties: "yShow"
                from: control.yFrom
                to: control.yStay
                duration: 200
            }
        }
        NumberAnimation {
            target: control
            properties: "opacity"
            to: 1
            duration: 2500
        }
        ParallelAnimation {
            NumberAnimation {
                target: control
                properties: "opacity"
                to: 0.1
                duration: 200
            }
            NumberAnimation {
                target: control
                properties: "yShow"
                to: control.yTo
                duration: 200
            }
        }
        onFinished: {
            control.close()
        }
    }

    // 弹出消息框
    function pop(tipText, screenRect) {
        context.text = tipText

        control.width = context.implicitWidth + 40
        control.height = context.implicitHeight + 20
        control.x = screenRect.x + (screenRect.width - control.width) / 2
        control.yStay = screenRect.y + (screenRect.height - control.height) / 4
        control.yFrom = control.yStay + 80
        control.yTo = control.yStay - 80
        control.opacity = 0.1
        control.yShow = control.yFrom
        control.show()
        sequential.start()
    }

    // 需要显示下一个消息,位置上移
    property int nextCount: 0
    function next() {
        // 限制同时显示的个数,多余的关闭
        if (nextCount >= 2) {
            control.close()
            return
        }
        nextCount++
        // 消息框之间保留间隔
        control.yOffset = nextCount * (control.height + 10)
    }
}
import QtQuick 2.15
import Test 1.0

// 消息框管理
// 龚建波 2024-06-22
Item {
    id: control

    // 弹出新的消息时,信号通知已有的消息框上移
    signal showNext()

    property var toastArray: []

    Component {
        id: toast_comp
        ToastItem {
            id: toast_item
            Connections {
                target: control
                function onShowNext() {
                    toast_item.next()
                }
            }
            onClosing: {
                toastArray.shift()
                toast_item.destroy()
            }
            Component.onDestruction: {
                console.log("onDestruction")
            }
            Component.onCompleted: {
                console.log("onCompleted")
            }
        }
    }

    ScreenTool {
        id: screen_tool
    }

    function showToast(msg) {
        let rect = screen_tool.focusRect()
        if (rect.width <= 0)
            return
        control.showNext()
        let toast = toast_comp.createObject()
        // 存起来避免被gc
        toastArray.push(toast)
        toast.pop(msg, rect)
    }
}
#include "ScreenTool.h"
#include <QGuiApplication>
#include <QWindow>

QRect ScreenTool::focusRect()
{
    QScreen *screen{nullptr};
    auto &&window = qApp->focusWindow();
    if (window) {
        screen = window->screen();
    } else {
        screen = qApp->primaryScreen();
    }
    if (screen) {
        return screen->availableGeometry();
    }
    return QRect();
}
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml Toast")

    // 也可以注册为单例使用
    ToastManager {
        id: toast_manager
    }

    Row {
        anchors.centerIn: parent
        spacing: 10
        TextField {
            id: text_filed
            text: "GongJianBo"
        }
        Button {
            text: "Pop"
            onClicked: {
                toast_manager.showToast(text_filed.text)
            }
        }
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1852517.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

路由模式--哈希模式下使用a标签跳转会有问题

路由模式分为 history 和 hash 两种模式&#xff0c;在 hash 模式下&#xff0c;使用 a 标签去跳转路由&#xff0c;可能会有问题。 比如&#xff1a; <a href"/home"><img src"/logo.png" class"logo" /></a> 在跳转路由时…

机器学习数学原理专题——线性分类模型:损失函数推导新视角——交叉熵

目录 二、从回归到线性分类模型&#xff1a;分类 3.分类模型损失函数推导——极大似然估计法 &#xff08;1&#xff09;二分类损失函数——极大似然估计 &#xff08;2&#xff09;多分类损失函数——极大似然估计 4.模型损失函数推导新视角——交叉熵 &#xff08;1&#x…

Java | Leetcode Java题解之第174题地下城游戏

题目&#xff1a; 题解&#xff1a; class Solution {public int calculateMinimumHP(int[][] dungeon) {int n dungeon.length, m dungeon[0].length;int[][] dp new int[n 1][m 1];for (int i 0; i < n; i) {Arrays.fill(dp[i], Integer.MAX_VALUE);}dp[n][m - 1] …

C语言入门系列:初识函数

文章目录 一&#xff0c;C语言函数与数学函数的区别1&#xff0c;回忆杀-初中数学2&#xff0c;C语言中的函数 二&#xff0c; 函数的声明1&#xff0c;函数头1.1&#xff0c;函数名称1.2&#xff0c;返回值类型1.3&#xff0c;参数列表 2&#xff0c;函数体2.1&#xff0c;函数…

idea右侧找不到Maven,在View-> Tool Windows下也找不到

正常情况Idea右侧没有Maven&#xff0c;只需去View -> Tool Windows 目录中找到Maven并点击Maven&#xff0c;Idea右侧就会出现 问题&#xff1a; idea右侧找不到Maven&#xff0c;在View -> Tool Windows 目录中也找不到Maven&#xff0c;下图 全局搜索ctrl N&#xff…

数据结构历年考研真题对应知识点(栈和队列的应用)

目录 3.3栈和队列的应用 3.3.2栈在表达式求值中的应用 【中缀表达式转后缀表达式的过程(2012、2014)】 【栈的深度分析(2009、2012)】 【用栈实现表达式求值的分析(2018)】 3.3.3栈在递归中的应用 【栈在函数调用中的作用和工作原理(2015、2017)】 3.3.5队列在计算机系…

苹果智能和人工智能最大化

苹果智能和人工智能最大化 除了苹果公司&#xff0c;还没有人真正使用过苹果的智能功能。它要到秋天才会分阶段发布&#xff0c;即使到那时&#xff0c;它也无法在80%或90%的iPhone安装基础上运行&#xff0c;因为它需要只有iPhone 15 Pro才能使用的设备上处理功能。没有什么能…

如何从magento1迁移到magento2

m2相较m1 变化可以说非常大&#xff0c;相当于从头到位都改写一遍&#xff0c;更现代化&#xff0c;更优雅。除了数据库表变化不是很大。 主要迁移的内容有&#xff1a; 1&#xff0c;主题 2&#xff0c;插件(自己开发的或者第三方插件) 3&#xff0c;数据库 主题 不能迁移到m…

如何在Windows 11和10上清除更新缓存?这里提供了几种方法

​Windows 11和Windows 10都可以非常轻松地清除Windows更新缓存。可以使用图形方法或命令行选项删除保存的更新文件。我们将向你展示你的可用选项。 为什么要清除Windows更新缓存 你可能希望清除Windows更新缓存的原因有很多。 你可能在查找或安装更新时遇到问题,清除缓存通…

如何恢复丢失的文件?免费为 Mac 恢复数据

丢失 Mac 上的重要文件是一件非常痛苦的事情。无论是重要的工作文件、重要文件还是心爱的照片&#xff0c;意外删除它们或出现系统错误都会非常令人沮丧。别担心&#xff1b;有办法&#xff1a;奇客数据恢复Mac版。这款免费的 Mac 文件恢复软件就像您文件的救星 - 当出现问题时…

每日一练:攻防世界:5-1 MulTzor

一、XorTool 基于 XOR&#xff08;异或&#xff09;运算实现。它可以帮助您快速地对文本、二进制文件进行加密解密操作。 认识XorTool工具&#xff1a; 让我们先去认识一下工具&#xff1a; xortool.py 是基于 python 的脚本&#xff0c;用于完成一些 xor 分析&#xff0c;…

持久化、主从 、分片、哨兵

目录 持久化 RDB&#xff08;存数据&#xff09; 使用场景 bgsave 使用方法 原理 AOF&#xff08;存命令&#xff09; 使用方法 原理 bgrewriteaof AOF和RDB 主从集群 搭建 数据同步原理(slave宕机&#xff09; 全量同步 增量同步 集群优化 总结 哨兵机制&…

JAVA学习过程中遇到的问题

前言 记录学习过程中遇见的各种问题。希望对你有帮助。 目录 前言 1、新建maven项目时&#xff0c;archetype项目骨架加载慢 2、maven的pop.xml添加依赖项无法检测到 3、java: 无效的目标发行版: 20 4、idea添加maven依赖太慢 5、CTRLCV复制粘贴太慢 6、Swagger写接口文…

手持弹幕LED滚动字幕屏夜店表白手灯接机微信抖音小程序开源版开发

手持弹幕LED滚动字幕屏夜店表白手灯接机微信抖音小程序开源版开发 专业版 插件版 手持弹幕小程序通常提供多种功能&#xff0c;以便用户在不同的场合如夜店、表白、接机等使用。以下是一些常见的功能列表&#xff1a; 文本输入&#xff1a; 输入要显示的文字内容&#xff0c;…

Android招聘市场技术要求越来越高,从事三年开发是否应该考虑转行?

UI这块知识是现今使用者最多的。当年火爆一时的Android入门培训&#xff0c;学会这小块知识就能随便找到不错的工作了。 不过很显然现在远远不够了&#xff0c;拒绝无休止的CV&#xff0c;亲自去项目实战&#xff0c;读源码&#xff0c;研究原理吧&#xff01; 《Framework精编…

HeidiSQL导入与导出数据

HeidiSQL两种导入与导出数据的方法&#xff1a;整个库复制&#xff0c;和仅复制数据 一 整个库复制 1 选中需要导出的数据库(这里是MyDBdata)&#xff0c;点击导出为SQL脚本。 2 按照如图进行选择 3 选做&#xff1a;删除当前数据库【如果有】 -- 删除数据库 USE mysql; D…

Linux-cp命令实现-系统调用和函数区别-文件截断-文件空洞

1、实现CP命令 vimdiff file1 file2 vimdiff是Vim编辑器的一个功能&#xff0c;主要用于比较两个或多个文件之间的差异&#xff0c;并在一个Vim窗口中显示这些差异。这个功能特别适合用于比较修改前后的文件&#xff0c;或者比较两个不同版本的文件。 注意&#xff1a;用…

SD卡无法读取:原因解析与数据恢复策略

一、SD卡无法读取的尴尬场景 在数字化日益普及的今天&#xff0c;SD卡作为便携式存储设备&#xff0c;广泛应用于各类电子设备中。然而&#xff0c;当您急需访问SD卡中的数据时&#xff0c;却发现设备无法读取SD卡&#xff0c;这无疑是一个令人沮丧的场景。SD卡无法读取可能表…

【已解决】在IDEA中使用Git拉取代码时提示:Can‘t update / master has no tracked branch

文章目录 问题描述原因分析解决方案 问题描述 在IDEA中使用Git拉取代码&#xff0c;尝试更新本地项目代码&#xff0c;提示 " Cant update / master has no tracked branch "&#xff0c;如下图所示&#xff1a; 原因分析 出现上述问题意味着本地名为master的分支&…

Google Earth Engine(GEE)——ui.DateSlider时间进度条的设置

结果 函数: ui.DateSlider(start, end, value, period, <