[QML開發筆記]-QML陰影遮罩窗口
QML陰影遮罩效果.來自官網示例中.可作爲自定義消息提示窗口,有陰影遮罩效果。
效果:
代碼:
Dialog.qml
import QtQuick 2.0
/**
* @FileName Dialog.qml
* @brief 陰影遮罩效果
* @author Kongdemin
* @date 2020-05
*/
Rectangle {
id: root
color: "transparent"
opacity: 0.0
property alias enabled: mouseArea.enabled
property int dialogWidth: 300
property int dialogHeight: 200
state: enabled ? "on" : "baseState"
states: [
State {
name: "on"
PropertyChanges {
target: root
opacity: 1.0
}
}
]
transitions: [
Transition {
from: "*"
to: "*"
NumberAnimation {
properties: "opacity"
easing.type: Easing.OutQuart
duration: 500
}
}
]
Rectangle {
anchors.fill: parent
color: "black"
opacity: 0.75
}
Rectangle {
anchors.centerIn: parent
width: dialogWidth
height: dialogHeight
radius: 5
color: "white"
Text {
id: text
anchors.fill: parent
anchors.margins: 10
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: "black"
wrapMode: Text.WordWrap
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: root.enabled = false
}
function show(msg) {
text.text = "<b>Dialog</b><br><br>" + msg
root.enabled = true
}
}
main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
/**
* @FileName main.qml
* @brief File Description
* @author Kongdemin
* @date 2020-05
*/
Window {
id: window
visible: true
width: 640
height: 480
title: qsTr("QML陰影遮罩窗口")
Button {
id: control
anchors.centerIn: parent
text: "Show Dialog"
contentItem: Text {
text: control.text
font: control.font
opacity: enabled ? 1.0 : 0.3
color: control.down ? "#17a81a" : "#21be2b"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 100
implicitHeight: 40
opacity: enabled ? 1 : 0.3
border.color: control.down ? "#17a81a" : "#21be2b"
border.width: 2
radius: 2
}
onClicked: {
dialog.show("This is a dialog demo.")
}
}
Dialog {
id: dialog
anchors.fill: parent
enabled: false
}
}