Qml 实现仿前端的 Notification (悬浮出现页面上的通知消息)
【写在前面】
经常接触前端的朋友应该经常见到下面的控件：
在前端中一般称它为 Notification 或 Message，但本质是一种东西，即：悬浮弹出式的消息提醒框。
这种组件一般具有以下特点：
1、全局/局部显示：它不依赖于具体的页面元素，可以在整个页面的任意位置显示。
2、自动消失：默认情况下，消息会在一定时间后自动消失，也可以设置为不自动消失。
3、多种类型：支持多种类型的消息，如成功（Success）、警告（Warning）、错误（Error）和 消息（Message）等。
4、可配置：可以自定义消息的显示位置、持续时间、内容等。
然鹅 Qml 中并未提供类似的组件，因此我便仿照前端实现了出来，并且更加简单易用。
【正文开始】
先来看看 Qml Notification 效果图：
实现起来相当简单，只需要 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