QML自定義操作提示框

Message.qml元件

import QtQuick 2.0

Item {
    id: messageBox
    width: msgBox.width
    y: 50
    anchors {
        horizontalCenter: parent.horizontalCenter
    }
    //提示框内容
    property alias text: msg.text
    property bool show: false
    property var type: "info"        
    visible: show
    //執行定時器
    function openTimer() {
        timerId.start()
        messageBox.y = 80
    }
    Behavior on y {
        NumberAnimation {
            duration: 200
        }
    }
    Timer {
        id: timerId
        interval: 3000
        repeat: false
        onTriggered: {

            messageBox.y = 50
             timerHide.start()
        }
    }
    Timer {
        id: timerHide
        interval: 300
        repeat: false
        onTriggered: {
            show = false
        }
    }
    //$Utils.boxWidth封裝的一個函數 計算元素的寬度  自身寬度+leftMargin+rightMargin
    Rectangle {
        id: msgBox
        clip: true
        width: {
            if ($Utils.boxWidth(img) + $Utils.boxWidth(msg) < 300
                    || $Utils.boxWidth(img) + $Utils.boxWidth(msg) === 300)
                return 300
            else
                return $Utils.boxWidth(img) + $Utils.boxWidth(msg) > 
                            600 ? 600 : $Utils.boxWidth(
                                       img) + $Utils.boxWidth(msg) + 15
        }
        height: 50
         color:  type=== "info" ? "#fdf6ec" : type=== "success" ? "#f0f9eb" : "#fef0f0"
        border.color:type=== "info" ? "#faecd8" : type=== "success" ? "#e1f3d8" : "#fde2e2"
        radius: 5
        Image {
            id: img
            source: type
                    === "info" ? "qrc:/images/remind.png" : type
                                 === "success" ? "qrc:/images/true.png" : "qrc:/images/error.png"
            width: 24
            height: 24
            anchors {
                verticalCenter: parent.verticalCenter
                left: parent.left
                leftMargin: 15
            }
        }
        Text {
            id: msg
            color: type=== "info" ? "#e6a23c" : type=== "success" ? "#67c23a" : "#f56c6c"
            font.pixelSize: 16
            anchors {
                verticalCenter: img.verticalCenter
                left: img.right
                leftMargin: 10
            }
        }
    }
}
           

Message.qml在你需要的元件内使用  我是放在main.qml根元件下，作為全局元件

在main.qml下用法如下：

Message{
        
        id:message


    }

    function $message(data){
        if(data&&data.show){
            message.show=data.show
        }
        if(data&&data.message){
            message.text=data.message
        }

        if(data&&data.type){
            message.type=data.type
        }

        if(data&&data.type&&data.type!=='success'&&data.type!=='error'&&data.type!=='info'){
            return false
        }

        message.openTimer()  //調用Message元件下定時器方法
    }
           

當你執行某操作就調用$message（）方法

//執行删除成功操作 
$message({
              "message": '删除成功！',
              "type": 'success',
              "show": true
         })
//執行删除失敗操作  
$message({
              "message": '删除失敗！',
              "type": 'error',
              "show": true
         })
           

背景顔色，邊框可以根據狀态對應不同的顔色，你可以根據需要做調整