QML弹出覆盖.模式转换不起作用

Question

我有以下QML组件，它使用Overlay.modal功能来模糊和调暗背景：

import QtQuick 2.0
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.12
Popup {
readonly property color backdropColor
id: root
visible: true
padding: 50
modal: true
anchors.centerIn: parent
width: 500
height: 300
contentItem: CB.Button {}
background: CB.Card {}
Overlay.modal: GaussianBlur {
source: ShaderEffectSource {
sourceItem: root.parent
live: true
}
radius: 10
samples: radius * 2
Rectangle {
id: backdropDim
color: backdropColor
anchors.fill: parent
}
}
exit: Transition {
NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 120 }
NumberAnimation { target: backdropDim; property: "opacity"; from: 1; to: 0; duration: 120 }
}
enter: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 120 }
}
}

我正在尝试让背景淡出(就像弹出窗口本身一样，这很有效(。为了做到这一点，我给背景的矩形id为backdropDim。然而，一旦模态关闭，Overlay.modal就会消失，我得到以下错误：

ReferenceError: backdropDim is not defined

我做错了什么？/如何使背景以平滑过渡的方式消失？

Answer 1

问题是Overlay.modal是Component，它(用C++术语来说(就像一个类定义，而不是该类的实例。您试图访问一个类的成员，但实际上并没有引用该类的实例。

解决此问题的最佳方法是取出要更改的属性(opacity(，使其位于组件定义之外：

Popup {
// Maintain backdrop opacity outside of the modal component
property real backdropOpacity: 1.0

然后在组件中使用新属性：

Rectangle {
id: backdropDim
color: backdropColor
anchors.fill: parent
opacity: backdropOpacity    // <--
}

最后，也要在您的过渡中使用该属性：

exit: Transition {
NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 120 }
NumberAnimation { property: "backdropOpacity"; from: 1; to: 0; duration: 120 }
}

更新：

Popup对象通过更改其opacity属性来隐藏/显示模态组件。因此，您可以通过使用Behavior而不是过渡来轻松地设置动画。

Overlay.modal: GaussianBlur {
source: ShaderEffectSource {
sourceItem: root.parent
live: true
}
radius: 10
samples: radius * 2
Rectangle {
id: backdropDim
color: backdropColor
anchors.fill: parent
}
Behavior on opacity {
NumberAnimation {
duration: 120
}
}
}
exit: Transition {
NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 120 }
}
enter: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 120 }
}