首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

Qml 实现仿前端的 Notification (悬浮出现页面上的通知消息)

编程知识
2024年09月12日 19:27

【写在前面】

经常接触前端的朋友应该经常见到下面的控件:

image

image

在前端中一般称它为 Notification 或 Message,但本质是一种东西,即:悬浮弹出式的消息提醒框

这种组件一般具有以下特点:

1、全局/局部显示:它不依赖于具体的页面元素,可以在整个页面的任意位置显示。

2、自动消失:默认情况下,消息会在一定时间后自动消失,也可以设置为不自动消失。

3、多种类型:支持多种类型的消息,如成功(Success)警告(Warning)错误(Error)消息(Message)等。

4、可配置:可以自定义消息的显示位置、持续时间、内容等。

然鹅 Qml 中并未提供类似的组件,因此我便仿照前端实现了出来,并且更加简单易用。


【正文开始】

先来看看 Qml Notification 效果图:

image

实现起来相当简单,只需要 Column + Repeater 即可:

    Column {
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 10

        Repeater {
            id: repeater
            model: ListModel {
                id: listModel
            }
            delegate: Rectangle {
                width: root.backgroundWidth
                height: __column.height + root.topMargin + root.bottomMargin
                radius: root.backgroundRadius
                color: root.backgroundColor
                clip: true

                Component.onCompleted: {
                    __timer.interval = timeout;
                    __timer.start();
                }

                NumberAnimation on height {
                    id: __removeAniamtion
                    to: 0
                    running: false
                    duration: 500
                    alwaysRunToEnd: true
                    onFinished: {
                        listModel.remove(index);
                    }
                }

                Timer {
                    id: __timer
                    onTriggered: {
                        __removeAniamtion.start();
                    }
                }

                Column {
                    id: __column
                    width: parent.width
                    anchors.centerIn: parent
                    spacing: root.titleSpacing

                    Row {
                        anchors.horizontalCenter: parent.horizontalCenter
                        spacing: 5

                        Text {
                            id: __icon
                            font.family: fontAwesome.name
                            font.pointSize: root.titleFont.pointSize
                            color: {
                                switch (type) {
                                case Notification.Success: return "green";
                                case Notification.Warning: return "orange";
                                case Notification.Message: return "gray";
                                case Notification.Error: return "red";
                                default: return "";
                                }
                            }
                            text: {
                                switch (type) {
                                case Notification.Success: return "\uf058";
                                case Notification.Warning: return "\uf071";
                                case Notification.Message: return "\uf05a";
                                case Notification.Error: return "\uf057";
                                default: return "";
                                }
                            }
                        }

                        Text {
                            id: __title
                            font: root.titleFont
                            color: root.titleColor
                            text: title
                            wrapMode: Text.WrapAnywhere
                        }
                    }

                    Text {
                        id: __message
                        width: parent.width - 16
                        anchors.horizontalCenter: parent.horizontalCenter
                        font: root.messageFont
                        color: root.messageColor
                        text: message
                        horizontalAlignment: Text.AlignHCenter
                        wrapMode: Text.WrapAnywhere
                    }
                }

                Text {
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.margins: 6
                    text: "×"
                    font.bold: true

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            __timer.stop();
                            __removeAniamtion.restart();
                        }
                    }
                }
            }
        }
    }

然后使用 notify() 来添加通知消息:

    function notify(title, message, type = Notification.None, timeout = 3000) {
        listModel.append({
                             title: title,
                             message: message,
                             type: type,
                             timeout: timeout
                         });
    }

其中参数说明:

  • title:标题,即通知顶端的标题。

  • message:消息,即通知中间的内容。

  • type:类型,即该通知的类型。

  • timeout:超时,即该通知显示的时长,-1 则是无限。


【如何使用】

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

Window {
    width: 800
    height: 600
    visible: true
    title: qsTr("Notification Test")

    Notification {
        id: topNotification
        z: 100
        backgroundWidth: 240
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        titleFont.pointSize: 11
        messageFont.pointSize: 11
    }

    Column {
        anchors.centerIn: parent
        spacing: 10

        Row {
            spacing: 10

            Button {
                text: qsTr("成功")
                onClicked: {
                    topNotification.notify(qsTr("成功"), qsTr("这是一条成功的提示消息"), Notification.Success);
                }
            }

            Button {
                text: qsTr("警告")
                onClicked: {
                    topNotification.notify(qsTr("警告"), qsTr("这是一条警告的提示消息"), Notification.Warning);
                }
            }

            Button {
                text: qsTr("消息")
                onClicked: {
                    topNotification.notify(qsTr("消息"), qsTr("这是一条消息的提示消息"), Notification.Message);
                }
            }

            Button {
                text: qsTr("错误")
                onClicked: {
                    topNotification.notify(qsTr("错误"), qsTr("这是一条错误的提示消息"), Notification.Error);
                }
            }
        }
    }
}

Notification 可放置在任意位置,然后设置字体背景等等即可。

当然,这种方式是悬浮在当前页面的,如果想要悬浮在全局页面,则必须将其置于主窗口的顶部,具体方法如下:

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

Window {
    width: 800
    height: 600
    visible: true
    title: qsTr("Notification Test")

    Page { z: 1 }

    Page { z: 1 }

    Notification {
        id: topNotification
        z: 100
        backgroundWidth: 240
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        titleFont.pointSize: 11
        messageFont.pointSize: 11
    }
}

需要保证其他页面 z-order 小于 Notification 组件。


【结语】

最后:项目链接(多多star呀..⭐_⭐):

Github 地址:https://github.com/mengps/QmlControls/tree/master/Notification

From:https://www.cnblogs.com/mengps/p/18411003
本文地址: http://www.shuzixingkong.net/article/1960
0评论
提交 加载更多评论
其他文章 LinkedHashMap原理详解—从LRU缓存机制说起
写在前面 从一道Leetcode题目说起 首先,来看一下Leetcode里面的一道经典题目:146.LRU缓存机制,题目描述如下: 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类: LRUCache(int capacity) 以 正整数 作为容
LinkedHashMap原理详解—从LRU缓存机制说起 LinkedHashMap原理详解—从LRU缓存机制说起 LinkedHashMap原理详解—从LRU缓存机制说起
搭建ipv6并发代理池
声明 本文章中所有内容仅供学习交流,抓包内容、敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 学习目标 ounter(lineipv6代理池学习 前置环境配置 要求linux系统。我是pve下的ubuntugolang的
搭建ipv6并发代理池 搭建ipv6并发代理池 搭建ipv6并发代理池
Java怎么把多个对象的list的数据合并
1.示例一:创建几个包含Person对象的List,并将它们合并成一个新的List 在Java中,将多个对象的List合并通常涉及到遍历这些List并将它们的元素添加到一个新的List中。这里,我将给出一个详细的代码示例,该示例将展示如何将多个包含相同类型对象的List合并成一个List。 假设我们
JAVA基础之5-函数式接口的实现
之所以单独把这个列出来,是因为本人被一个源码给震撼了。 所以,本人目的是看看这个震撼实现,并模仿,最后把常规的实现也贴上,让读者可以看到相对完整的实现 注:本文代码基于JDK17 一、让人震撼的代码 Collectors.toList() public static <T> Collec
JAVA基础之5-函数式接口的实现
Vert.x HttpClient调用后端服务时使用Idle Timeout和KeepAlive Timeout的行为分析
其实网上有大量讨论HTTP长连接的文章,而且Idle Timeout和KeepAlive Timeout都是HTTP协议上的事情,跟Vert.x本身没有太大关系,只不过最近在项目上遇到了一些问题,用到了Vert.x的HttpClient,就干脆总结一下,留给自己今后做参考。 在使用Vert.x的Ht
Vert.x HttpClient调用后端服务时使用Idle Timeout和KeepAlive Timeout的行为分析 Vert.x HttpClient调用后端服务时使用Idle Timeout和KeepAlive Timeout的行为分析 Vert.x HttpClient调用后端服务时使用Idle Timeout和KeepAlive Timeout的行为分析
DECL: 针对噪声时间序列的去噪感知对比学习《Denoising-Aware Contrastive Learning for Noisy Time Series》(时间序列、对比学习、去噪)
今天是2024年9月12日,组会摸鱼,很久没看论文了,在摸鱼看代码,最近IJCAI 2024出来了,找了几篇论文看,首先这是第一篇。 论文:Denoising-Aware Contrastive Learning for Noisy Time Series 或者是:Denoising-Aware C
Go日志管理库zap
一、zap介绍 在许多Go语言项目中,我们需要一个好的日志记录器能够提供下面这些功能: 1.能够将事件记录到文件中,而不是应用程序控制台。 2.日志切割-能够根据文件大小、时间或间隔等来切割日志文件。 3.支持不同的日志级别。例如INFO,DEBUG,ERROR等。 4.能够打印基本信息,如调用文件
Go日志管理库zap Go日志管理库zap Go日志管理库zap
vue3项目部署到Github
此教程适应于以webpack,vue-cli,vite等脚手架构建的vue项目。当然,vue2和vue3都是可以滴。 1. 前提:你的代码库已经提交到Github上 如果没有的话,请到GitHub上新建仓库,并把你本地的项目提交到GitHub上新建的仓库里。 具体方法,可以参考我的博客 Git使用记
vue3项目部署到Github vue3项目部署到Github vue3项目部署到Github