分享一个qml开发的Dialog

一、效果预览

二、源码分享

PopwindowWidget.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts


ApplicationWindow {
    id:self
    width: 470
    height: 250
    visible: false
    color: "#00000000"
    flags: Qt.Tool | Qt.FramelessWindowHint|Qt.MSWindowsFixedSizeDialogHint

    signal accept()
    signal reject()

    enum MessageType {Ask, Error,Notice,Wait,Warning}

    Rectangle{
        id:background
        anchors.fill: parent
        radius: 15
        gradient: Gradient{
            GradientStop { position: 0.0; color: "#ffff6111" }
            GradientStop { position: 1.0; color: "#50ff6111" }
        }

        ColumnLayout{
            anchors.fill: parent
            Item {
                Layout.fillWidth: true
                Layout.preferredHeight: background.height/4*3
                Row{
                    anchors.fill: parent
                    Image {
                        id:imageIcon
                        height: 100
                        width: 100
                        anchors.verticalCenter: parent.verticalCenter
                        fillMode: Image.Stretch
                        source: "qrc:/image/images/messageDialog/wait.svg"
                    }
                    Column{
                        width: parent.width-100
                        height: parent.height
                        leftPadding: 20
                        Text {
                            id: textTitle
                            width: parent.width
                            height: parent.height/3
                            text: qsTr("text")
                            font{
                                pointSize: 20
                            }
                            verticalAlignment: Qt.AlignVCenter
                        }
                        Text {
                            id: textMessage
                            width: parent.width
                            height: parent.height/3*2
                            text: qsTr("text")
                            wrapMode: Text.WordWrap
                            font{
                                pointSize: 12
                            }
                            verticalAlignment: Qt.AlignVCenter
                        }
                    }
                }
            }
            Item {
                id:itemBtn
                Layout.fillWidth: true
                Layout.preferredHeight: background.height/4
                Row{
                    id:rowBtn
                    anchors.fill: parent
                    anchors.margins: 10
                    spacing: 3
                    Button{
                        id:btnReject
                        width: 120
                        height: parent.height
                        text: qsTr("取消")
                        hoverEnabled: false
                        background:Rectangle{
                            color: btnReject.down?"#ffb6350a":"#50b6350a"
                            radius: 10
                            MouseArea{
                                anchors.fill: parent
                                cursorShape: Qt.PointingHandCursor;
                            }
                        }

                        Behavior on x{
                            NumberAnimation{
                                id:animBtnReject
                                duration: 500
                            }
                        }
                        onClicked: {
                            close()
                            self.reject()
                        }
                    }
                    Button{
                        id:btnAccept
                        width: 120
                        height: parent.height
                        text: qsTr("确定")
                        hoverEnabled: false
                        background:Rectangle{
                            color: btnAccept.down?"#ff777a05":"#50777a05"
                            radius: 10
                            MouseArea{
                                anchors.fill: parent
                                cursorShape: Qt.PointingHandCursor;
                            }
                        }
                        Behavior on x{
                            NumberAnimation{
                                id:animBtnAccept
                                duration: 300
                            }
                        }
                        onClicked: {
                            close()
                            self.accept()
                        }
                    }
                }
            }
        }
    }

    OpacityAnimator{
        id:showAnim
        target: background
        from: 0
        to:1
        duration: 500
        onFinished: {
            animBtnReject.duration = 500
            animBtnAccept.duration = 300
            btnReject.x = rowBtn.width-btnReject.width-btnAccept.width-rowBtn.spacing
            btnAccept.x = rowBtn.width-btnAccept.width
        }
    }
    OpacityAnimator{
        id:closeAnim
        target: background
        from: 1
        to:0
        duration: 500
        onFinished: {
            self.visible = false

        }
    }

    function show(messageType = PopwindowWidget.MessageType.Error,title=qsTr("未知标题"),message=qsTr("未知内容")){
        if(self.visible)
            return
        self.visible = true
        textTitle.text = title
        textMessage.text = message
        switch(messageType){
            case PopwindowWidget.MessageType.Ask:imageIcon.source = "qrc:/image/images/messageDialog/ask.svg"; break
            case PopwindowWidget.MessageType.Error:imageIcon.source = "qrc:/image/images/messageDialog/error.svg"; break
            case PopwindowWidget.MessageType.Notice:imageIcon.source = "qrc:/image/images/messageDialog/notice.svg"; break
            case PopwindowWidget.MessageType.Wait:imageIcon.source = "qrc:/image/images/messageDialog/wait.svg"; break
            case PopwindowWidget.MessageType.Warning:imageIcon.source = "qrc:/image/images/messageDialog/warning.svg"; break
        }

        showAnim.start()
    }
    function close(){
        if(closeAnim.running || !self.visible)
            return
        animBtnReject.duration = 300
        animBtnAccept.duration = 500
        btnReject.x = 0
        btnAccept.x = btnReject.width+rowBtn.spacing
        closeAnim.start()
    }
}

三、使用方法

main.qml

import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels

ApplicationWindow {
    width: 700
    height: 400
    visible: true

    PopwindowWidget{
        id:popwindow
        onAccept: {
            console.log("onAccept")
        }
        onReject: {
            console.log("onReject")
        }
    }
    Row{
        Button{
            width: 200
            height: 200
            text: "show"
            onClicked: {
                popwindow.show()
            }
        }
        Button{
            width: 200
            height: 200
            text: "close"
            onClicked: {
                popwindow.close()
            }
        }
    }


}