ToB企服应用市场:ToB评测及商务社交产业平台

标题: Qml 实现仿前端的 Notification (悬浮出现页面上的通知消息) [打印本页]
作者: 王海鱼    时间: 2024-9-12 18:50
标题: 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.     }
复制代码
其中参数说明：
【如何使用】
  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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4