[Writing in front]
Those of you who work with front-ends on a regular basis should have seen the following controls often:
In the front-end it is generally referred to asNotification maybeMessage, but the essence is one thing, viz:Hover pop-up message alert box。
Such components generally have the following characteristics:
1、Global/Local Display: It does not depend on specific page elements and can be displayed anywhere on the entire page.
2、spontaneous disappearance: By default, messages will automatically disappear after a certain amount of time, or they can be set to not disappear automatically.
3、multiform: Supports many types of messages, such asSuccess、Warning、Errorcap (a poem)Messageetc.
4、configurable: You can customize the display position, duration, content, etc. of the message.
Goose Qml doesn't provide a similar component, so I've modeled it after the front-end, and it's much easier to use.
[Text Begins]
Let's take a look.Qml Notification Rendering:
It's fairly simple to implement, requiring onlyColumn + Repeater Ready to go:
Column {
:
: 10
:
spacing: 10
Repeater {
id: repeater
model: ListModel {
id: listModel
}
delegate: Rectangle {
width:
height: __column.height + +
radius:
color:
clip: true
: {
__timer.interval = timeout;
__timer.start();
}
NumberAnimation on height {
id: __removeAniamtion
to: 0
running: false
duration: 500
alwaysRunToEnd: true
onFinished: {
(index);
}
}
Timer {
id: __timer
onTriggered: {
__removeAniamtion.start();
}
}
Column {
id: __column
width:
: parent
spacing:
Row {
:
spacing: 5
Text {
id: __icon
:
:
color: {
switch (type) {
case : return "green";
case : return "orange";
case : return "gray";
case : return "red";
default: return "";
}
}
text: {
switch (type) {
case : return "\uf058";
case : return "\uf071";
case : return "\uf05a";
case : return "\uf057";
default: return "";
}
}
}
Text {
id: __title
font:
color:
text: title
wrapMode:
}
}
Text {
id: __message
width: - 16
:
font:
color:
text: message
horizontalAlignment:
wrapMode:
}
}
Text {
:
:
: 6
text: "×"
: true
MouseArea {
: parent
onClicked: {
__timer.stop();
__removeAniamtion.restart();
}
}
}
}
}
}
Then usenotify() to add a notification message:
function notify(title, message, type = , timeout = 3000) {
({
title: title,
message: message,
type: type,
timeout: timeout
});
}
where the parameters are described:
-
title: The title, i.e. the title at the top of the notice. -
message: The message, i.e., what is in the middle of the notification. -
type: type, which is the type of this notification. -
timeout: timeout, the length of time this notification will be displayed, -1 is infinite.
[How to use]
import QtQuick 2.15
import 2.15
import 2.15
Window {
width: 800
height: 600
title: qsTr("Notification Test")
title: qsTr("Notification Test")
Notification {
id: topNotification
notification { id: topNotification
backgroundWidth: 240
Notification { id: topNotification z: 100
Notification { id: topNotification z: 100
: 11
: 11
}
Column {
spacing: 10
spacing: 10
Row {
spacing: 10
Button {
text: qsTr("Success")
onClicked: {
(qsTr("Success"), qsTr("This is a success alert message"), );
}
}
Button {
text: qsTr("Warning")
onClicked: {
(qsTr("Warning"), qsTr("This is a warning alert message"), ); }
}
}
Button {
text: qsTr("Message")
onClicked: {
(qsTr("Message"), qsTr("This is a message alert message"), ); }
}
}
Button {
text: qsTr("Error")
onClicked: {
(qsTr("Error"), qsTr("This is an error message"), ); }
}
}
}
}
}
Notification You can place it anywhere, then just set the font background and so on.
Of course, this way is to hover on the current page, if you want to hover on the global page, you have to place it on the top of the main window, the specific method is as follows:
import QtQuick 2.15
import 2.15
import 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
:
:
: 11
: 11
}
}
Need to ensure that other pagesz-order less thanNotification Component.
[Conclusion]
And finally: project link (more star yah...). ⭐_⭐):
Github Address:/mengps/QmlControls/tree/master/Notification