Qml 实现仿前端的 Notification (悬浮出现页面上的关照消息)
【写在前面】常常打仗前端的朋友应该常常见到下面的控件：
https://i-blog.csdnimg.cn/direct/0b5d1915457b44648d31fb97238c05ad.png
https://i-blog.csdnimg.cn/direct/deab3ff29c8947dfa2077139a0f9d749.png
在前端中一样平常称它为 Notification 或 Message，但本质是一种东西，即：悬浮弹出式的消息提示框。
这种组件一样平常具有以下特点：
1、全局/局部体现：它不依靠于具体的页面元素，可以在整个页面的任意位置体现。
2、主动消失：默认环境下，消息会在一定时间后主动消失，也可以设置为不主动消失。
3、多种范例：支持多种范例的消息，如成功（Success）、警告（Warning）、错误（Error）和 消息（Message）等。
4、可配置：可以自定义消息的体现位置、持续时间、内容等。
然鹅 Qml 中并未提供雷同的组件，因此我便仿照前端实现了出来，并且更加简单易用。
【正文开始】
先来看看 Qml Notification 效果图：
https://i-blog.csdnimg.cn/direct/9a3c2c0afe7a460d82179275dc91fb25.gif
实现起来相称简单，只须要 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 地址：
QmlControls/Notification at master · mengps/QmlControls · GitHubQtQml 控件 & 实用工具. Contribute to mengps/QmlControls development by creating an account on GitHub.https://i-blog.csdnimg.cn/blog_migrate/003a2ce7eb50c2e24a8c624c260c5930.pnghttps://github.com/mengps/QmlControls/tree/master/Notification CSDN 的：
https://download.csdn.net/download/u011283226/89662116https://i-blog.csdnimg.cn/blog_migrate/003a2ce7eb50c2e24a8c624c260c5930.pnghttps://download.csdn.net/download/u011283226/89662116
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]