当前位置：首页 > news >正文

QML使用Popup实现弹出Message

news 2025/1/7 9:18:48

方案一：popup

在这里插入图片描述

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15ApplicationWindow {visible: truewidth: 640height: 480title: qsTr("Top Message Popup Example")ColumnLayout {anchors.centerIn: parentspacing: 10Button {text: "Show Success Message"onClicked: showMessage("Success", "Operation completed successfully!")}Button {text: "Show Warning Message"onClicked: showMessage("Warning", "Please be cautious!")}Button {text: "Show Error Message"onClicked: showMessage("Error", "An error occurred!")}}Popup {id: messagePopupx: (parent.width - width) / 2y: 10width: parent.width * 0.9height: 60modal: falsefocus: trueclosePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsidebackground: Rectangle {id: backgroundRectradius: 5border.width: 1// 使用属性别名来允许从外部更改颜色property alias bgColor: backgroundRect.colorproperty alias borderColor: backgroundRect.border.color}RowLayout {anchors.fill: parentanchors.margins: 10Text {id: messageTitlefont.bold: truefont.pixelSize: 16}Text {id: messageTextLayout.fillWidth: truefont.pixelSize: 14horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}Button {text: "Close"onClicked: messagePopup.close()}}enter: Transition {ParallelAnimation {NumberAnimation { target: messagePopup; property: "opacity"; from: 0.0; to: 1.0; duration: 300 }NumberAnimation { target: messagePopup; property: "y"; from: -messagePopup.height; to: 10; duration: 300; easing.type: Easing.OutBack }}}exit: Transition {ParallelAnimation {NumberAnimation { target: messagePopup; property: "opacity"; from: 1.0; to: 0.0; duration: 300 }NumberAnimation { target: messagePopup; property: "y"; from: 10; to: -messagePopup.height; duration: 300; easing.type: Easing.InBack }}}Timer {id: autoCloseTimerinterval: 2000running: messagePopup.visibleonTriggered: messagePopup.close()}}function showMessage(title, message) {let color = ""switch (title.toLowerCase()) {case "info":color =  "#2196F3"; // 蓝色breakcase "success":color = "#4CAF50"; // 绿色breakcase "warning":color = "#FFC107"; // 黄色breakcase "error":color = "#F44336"; // 红色breakdefault:color = "#323232"; // 默认灰色break}messageTitle.text = title + ": "messageText.text = message// 设置背景颜色和边框颜色messagePopup.background.bgColor = Qt.lighter(color, 1.5)messagePopup.background.borderColor = color// 设置文本颜色messageTitle.color = colormessageText.color = Qt.darker(color, 1.2)messagePopup.open()}
}

方案二：Rectangle

在这里插入图片描述


import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {visible: truewidth: 640height: 480title: qsTr("Notification Example")function showMessage(category, message) {notificationModel.append({"category": category,"message": message});}ListModel {id: notificationModel}Column {id: notificationContaineranchors.margins: 10// anchors.right: parent.rightanchors.top: parent.topspacing: 8Repeater {model: notificationModelRectangle {id: notificationItemproperty string category: model.categoryproperty string message: model.messageproperty int yOffset: 0// 根据类别设置背景颜色color: {switch (category) {case "info":return "#2196F3"; // 蓝色case "success":return "#4CAF50"; // 绿色case "warning":return "#FFC107"; // 黄色case "error":return "#F44336"; // 红色default:return "#323232"; // 默认灰色}}height: 30opacity: 0.0radius: 8visible: opacity > 0 || height > 0width: 300transform: Translate {y: notificationItem.yOffset}Component.onCompleted: {showAnimation.start();}Text {anchors.centerIn: parentcolor: "white"font.weight: Font.Boldopacity: notificationItem.opacitytext: message}// 显示动画ParallelAnimation {id: showAnimationNumberAnimation {duration: 300from: 0.0property: "opacity"target: notificationItemto: 1.0}NumberAnimation {duration: 300from: -10property: "yOffset"target: notificationItemto: 0}}// 隐藏动画SequentialAnimation {id: hideAnimationParallelAnimation {NumberAnimation {duration: 200property: "opacity"target: notificationItemto: 0.0}NumberAnimation {duration: 200property: "yOffset"target: notificationItemto: -10}}NumberAnimation {duration: 100property: "height"target: notificationItemto: 0}}Timer {id: hideTimerinterval: 3000repeat: falserunning: trueonTriggered: {hideAnimation.start();}}Connections {function onFinished() {notificationModel.remove(index);}target: hideAnimation}}}}Row {anchors.bottom: parent.bottomspacing: 10Button {text: "Info"onClicked: showMessage("info", "This is an information message!")}Button {text: "Success"onClicked: showMessage("success", "Operation completed successfully!")}Button {text: "Warning"onClicked: showMessage("warning", "This is a warning message!")}Button {text: "Error"onClicked: showMessage("error", "An error occurred!")}}}

查看全文

http://www.mrgr.cn/news/82563.html