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

【写在前面】

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

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

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

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

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

3、多种类型：支持多种类型的消息，如成功（Success）、警告（Warning）、错误（Error）和消息（Message）等。

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

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

【正文开始】

先来看看 Qml Notification 效果图：

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

    Column {anchors.top: parent.topanchors.topMargin: 10anchors.horizontalCenter: parent.horizontalCenterspacing: 10Repeater {id: repeatermodel: ListModel {id: listModel}delegate: Rectangle {width: root.backgroundWidthheight: __column.height + root.topMargin + root.bottomMarginradius: root.backgroundRadiuscolor: root.backgroundColorclip: trueComponent.onCompleted: {__timer.interval = timeout;__timer.start();}NumberAnimation on height {id: __removeAniamtionto: 0running: falseduration: 500alwaysRunToEnd: trueonFinished: {listModel.remove(index);}}Timer {id: __timeronTriggered: {__removeAniamtion.start();}}Column {id: __columnwidth: parent.widthanchors.centerIn: parentspacing: root.titleSpacingRow {anchors.horizontalCenter: parent.horizontalCenterspacing: 5Text {id: __iconfont.family: fontAwesome.namefont.pointSize: root.titleFont.pointSizecolor: {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: __titlefont: root.titleFontcolor: root.titleColortext: titlewrapMode: Text.WrapAnywhere}}Text {id: __messagewidth: parent.width - 16anchors.horizontalCenter: parent.horizontalCenterfont: root.messageFontcolor: root.messageColortext: messagehorizontalAlignment: Text.AlignHCenterwrapMode: Text.WrapAnywhere}}Text {anchors.right: parent.rightanchors.top: parent.topanchors.margins: 6text: "×"font.bold: trueMouseArea {anchors.fill: parentonClicked: {__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.15Window {width: 800height: 600visible: truetitle: qsTr("Notification Test")Notification {id: topNotificationz: 100backgroundWidth: 240anchors.top: parent.topanchors.horizontalCenter: parent.horizontalCentertitleFont.pointSize: 11messageFont.pointSize: 11}Column {anchors.centerIn: parentspacing: 10Row {spacing: 10Button {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.15Window {width: 800height: 600visible: truetitle: qsTr("Notification Test")Page { z: 1 }Page { z: 1 }Notification {id: topNotificationz: 100backgroundWidth: 240anchors.top: parent.topanchors.horizontalCenter: parent.horizontalCentertitleFont.pointSize: 11messageFont.pointSize: 11}
}

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

【结语】

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

Github 地址：

QmlControls/Notification at master · mengps/QmlControls · GitHubQtQml 控件 & 实用工具. Contribute to mengps/QmlControls development by creating an account on GitHub.https://github.com/mengps/QmlControls/tree/master/Notification CSDN 的：