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

【写在前面】

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

在前端中一般称它为 Notification 或 Message，但本质是一种东西，即：悬浮弹出式的消息提醒框。
这种组件一般具有以下特点：
1、全局/局部表现：它不依赖于具体的页面元素，可以在整个页面的任意位置表现。
2、主动消失：默认情况下，消息会在肯定时间后主动消失，也可以设置为不主动消失。
3、多种类型：支持多种类型的消息，如乐成（Success）、告诫（Warning）、错误（Error）和 消息（Message）等。
4、可配置：可以自定义消息的表现位置、连续时间、内容等。
然鹅 Qml 中并未提供类似的组件，因此我便仿照前端实现了出来，而且更加简朴易用。
【正文开始】

先来看看 Qml Notification 效果图：

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

1.     Column {
2.         anchors.top: parent.top
3.         anchors.topMargin: 10
4.         anchors.horizontalCenter: parent.horizontalCenter
5.         spacing: 10
7.         Repeater {
8.             id: repeater
9.             model: ListModel {
10.                 id: listModel
11.             }
12.             delegate: Rectangle {
13.                 width: root.backgroundWidth
14.                 height: __column.height + root.topMargin + root.bottomMargin
15.                 radius: root.backgroundRadius
16.                 color: root.backgroundColor
17.                 clip: true
19.                 Component.onCompleted: {
20.                     __timer.interval = timeout;
21.                     __timer.start();
22.                 }
24.                 NumberAnimation on height {
25.                     id: __removeAniamtion
26.                     to: 0
27.                     running: false
28.                     duration: 500
29.                     alwaysRunToEnd: true
30.                     onFinished: {
31.                         listModel.remove(index);
32.                     }
33.                 }
35.                 Timer {
36.                     id: __timer
37.                     onTriggered: {
38.                         __removeAniamtion.start();
39.                     }
40.                 }
42.                 Column {
43.                     id: __column
44.                     width: parent.width
45.                     anchors.centerIn: parent
46.                     spacing: root.titleSpacing
48.                     Row {
49.                         anchors.horizontalCenter: parent.horizontalCenter
50.                         spacing: 5
52.                         Text {
53.                             id: __icon
54.                             font.family: fontAwesome.name
55.                             font.pointSize: root.titleFont.pointSize
56.                             color: {
57.                                 switch (type) {
58.                                 case Notification.Success: return "green";
59.                                 case Notification.Warning: return "orange";
60.                                 case Notification.Message: return "gray";
61.                                 case Notification.Error: return "red";
62.                                 default: return "";
63.                                 }
64.                             }
65.                             text: {
66.                                 switch (type) {
67.                                 case Notification.Success: return "\uf058";
68.                                 case Notification.Warning: return "\uf071";
69.                                 case Notification.Message: return "\uf05a";
70.                                 case Notification.Error: return "\uf057";
71.                                 default: return "";
72.                                 }
73.                             }
74.                         }
76.                         Text {
77.                             id: __title
78.                             font: root.titleFont
79.                             color: root.titleColor
80.                             text: title
81.                             wrapMode: Text.WrapAnywhere
82.                         }
83.                     }
85.                     Text {
86.                         id: __message
87.                         width: parent.width - 16
88.                         anchors.horizontalCenter: parent.horizontalCenter
89.                         font: root.messageFont
90.                         color: root.messageColor
91.                         text: message
92.                         horizontalAlignment: Text.AlignHCenter
93.                         wrapMode: Text.WrapAnywhere
94.                     }
95.                 }
97.                 Text {
98.                     anchors.right: parent.right
99.                     anchors.top: parent.top
100.                     anchors.margins: 6
101.                     text: "×"
102.                     font.bold: true
104.                     MouseArea {
105.                         anchors.fill: parent
106.                         onClicked: {
107.                             __timer.stop();
108.                             __removeAniamtion.restart();
109.                         }
110.                     }
111.                 }
112.             }
113.         }
114.     }

复制代码

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

1.     function notify(title, message, type = Notification.None, timeout = 3000) {
2.         listModel.append({
3.                              title: title,
4.                              message: message,
5.                              type: type,
6.                              timeout: timeout
7.                          });
8.     }

复制代码

其中参数说明：

• title：标题，即通知顶端的标题。
  
• message：消息，即通知中间的内容。
  
• type：类型，即该通知的类型。
  
• timeout：超时，即该通知表现的时长，-1 则是无限。
  

【如何使用】

1. import QtQuick 2.15
2. import QtQuick.Controls 2.15
3. import QtQuick.Window 2.15
5. Window {
6.     width: 800
7.     height: 600
8.     visible: true
9.     title: qsTr("Notification Test")
11.     Notification {
12.         id: topNotification
13.         z: 100
14.         backgroundWidth: 240
15.         anchors.top: parent.top
16.         anchors.horizontalCenter: parent.horizontalCenter
17.         titleFont.pointSize: 11
18.         messageFont.pointSize: 11
19.     }
21.     Column {
22.         anchors.centerIn: parent
23.         spacing: 10
25.         Row {
26.             spacing: 10
28.             Button {
29.                 text: qsTr("成功")
30.                 onClicked: {
31.                     topNotification.notify(qsTr("成功"), qsTr("这是一条成功的提示消息"), Notification.Success);
32.                 }
33.             }
35.             Button {
36.                 text: qsTr("警告")
37.                 onClicked: {
38.                     topNotification.notify(qsTr("警告"), qsTr("这是一条警告的提示消息"), Notification.Warning);
39.                 }
40.             }
42.             Button {
43.                 text: qsTr("消息")
44.                 onClicked: {
45.                     topNotification.notify(qsTr("消息"), qsTr("这是一条消息的提示消息"), Notification.Message);
46.                 }
47.             }
49.             Button {
50.                 text: qsTr("错误")
51.                 onClicked: {
52.                     topNotification.notify(qsTr("错误"), qsTr("这是一条错误的提示消息"), Notification.Error);
53.                 }
54.             }
55.         }
56.     }
57. }

复制代码

Notification 可放置在任意位置，然后设置字体配景等等即可。
当然，这种方式是悬浮在当前页面的，假如想要悬浮在全局页面，则必须将其置于主窗口的顶部，具体方法如下：

1. import QtQuick 2.15
2. import QtQuick.Controls 2.15
3. import QtQuick.Window 2.15
5. Window {
6.     width: 800
7.     height: 600
8.     visible: true
9.     title: qsTr("Notification Test")
11.     Page { z: 1 }
13.     Page { z: 1 }
15.     Notification {
16.         id: topNotification
17.         z: 100
18.         backgroundWidth: 240
19.         anchors.top: parent.top
20.         anchors.horizontalCenter: parent.horizontalCenter
21.         titleFont.pointSize: 11
22.         messageFont.pointSize: 11
23.     }
24. }

复制代码

需要包管其他页面 z-order 小于 Notification 组件。
【结语】

末了：项目链接(多多star呀..⭐_⭐)：
Github 地点：https://github.com/mengps/QmlControls/tree/master/Notification

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。