【写在前面】
经常接触前端的朋友应该经常见到下面的控件：
在前端中一般称它为 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 的：
https://download.csdn.net/download/u011283226/89662116https://download.csdn.net/download/u011283226/89662116
