分享一个qml开发的Dialog-编程知识

分享一个qml开发的Dialog

一、效果预览

在这里插入图片描述

二、源码分享

PopwindowWidget.qml

import QtQuick
import QtQuick.Controls
import QtQuick.LayoutsApplicationWindow {id:selfwidth: 470height: 250visible: falsecolor: "#00000000"flags: Qt.Tool | Qt.FramelessWindowHint|Qt.MSWindowsFixedSizeDialogHintsignal accept()signal reject()enum MessageType {Ask, Error,Notice,Wait,Warning}Rectangle{id:backgroundanchors.fill: parentradius: 15gradient: Gradient{GradientStop { position: 0.0; color: "#ffff6111" }GradientStop { position: 1.0; color: "#50ff6111" }}ColumnLayout{anchors.fill: parentItem {Layout.fillWidth: trueLayout.preferredHeight: background.height/4*3Row{anchors.fill: parentImage {id:imageIconheight: 100width: 100anchors.verticalCenter: parent.verticalCenterfillMode: Image.Stretchsource: "qrc:/image/images/messageDialog/wait.svg"}Column{width: parent.width-100height: parent.heightleftPadding: 20Text {id: textTitlewidth: parent.widthheight: parent.height/3text: qsTr("text")font{pointSize: 20}verticalAlignment: Qt.AlignVCenter}Text {id: textMessagewidth: parent.widthheight: parent.height/3*2text: qsTr("text")wrapMode: Text.WordWrapfont{pointSize: 12}verticalAlignment: Qt.AlignVCenter}}}}Item {id:itemBtnLayout.fillWidth: trueLayout.preferredHeight: background.height/4Row{id:rowBtnanchors.fill: parentanchors.margins: 10spacing: 3Button{id:btnRejectwidth: 120height: parent.heighttext: qsTr("取消")hoverEnabled: falsebackground:Rectangle{color: btnReject.down?"#ffb6350a":"#50b6350a"radius: 10MouseArea{anchors.fill: parentcursorShape: Qt.PointingHandCursor;}}Behavior on x{NumberAnimation{id:animBtnRejectduration: 500}}onClicked: {close()self.reject()}}Button{id:btnAcceptwidth: 120height: parent.heighttext: qsTr("确定")hoverEnabled: falsebackground:Rectangle{color: btnAccept.down?"#ff777a05":"#50777a05"radius: 10MouseArea{anchors.fill: parentcursorShape: Qt.PointingHandCursor;}}Behavior on x{NumberAnimation{id:animBtnAcceptduration: 300}}onClicked: {close()self.accept()}}}}}}OpacityAnimator{id:showAnimtarget: backgroundfrom: 0to:1duration: 500onFinished: {animBtnReject.duration = 500animBtnAccept.duration = 300btnReject.x = rowBtn.width-btnReject.width-btnAccept.width-rowBtn.spacingbtnAccept.x = rowBtn.width-btnAccept.width}}OpacityAnimator{id:closeAnimtarget: backgroundfrom: 1to:0duration: 500onFinished: {self.visible = false}}function show(messageType = PopwindowWidget.MessageType.Error,title=qsTr("未知标题"),message=qsTr("未知内容")){if(self.visible)returnself.visible = truetextTitle.text = titletextMessage.text = messageswitch(messageType){case PopwindowWidget.MessageType.Ask:imageIcon.source = "qrc:/image/images/messageDialog/ask.svg"; breakcase PopwindowWidget.MessageType.Error:imageIcon.source = "qrc:/image/images/messageDialog/error.svg"; breakcase PopwindowWidget.MessageType.Notice:imageIcon.source = "qrc:/image/images/messageDialog/notice.svg"; breakcase PopwindowWidget.MessageType.Wait:imageIcon.source = "qrc:/image/images/messageDialog/wait.svg"; breakcase PopwindowWidget.MessageType.Warning:imageIcon.source = "qrc:/image/images/messageDialog/warning.svg"; break}showAnim.start()}function close(){if(closeAnim.running || !self.visible)returnanimBtnReject.duration = 300animBtnAccept.duration = 500btnReject.x = 0btnAccept.x = btnReject.width+rowBtn.spacingcloseAnim.start()}
}

三、使用方法

main.qml

import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodelsApplicationWindow {width: 700height: 400visible: truePopwindowWidget{id:popwindowonAccept: {console.log("onAccept")}onReject: {console.log("onReject")}}Row{Button{width: 200height: 200text: "show"onClicked: {popwindow.show()}}Button{width: 200height: 200text: "close"onClicked: {popwindow.close()}}}}