QML Popup Overlay.modal 过渡不起作用

Posted 2023-02-16

【中文标题】QML Popup Overlay.modal 过渡不起作用

【英文标题】：QML Popup Overlay.modal transition not working

【发布时间】：2021-04-19 19:41:00

【问题描述】：

我有以下 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 
    

我正在尝试让背景淡出（就像弹出窗口本身一样，它有效）。为此，我为背景的 Rectangle 提供了 ID backdropDim。 但是，一旦模式关闭，Overlay.modal 就会消失，并且出现以下错误：

ReferenceError: backdropDim is not defined

我做错了什么？ / 如何使背景消失并平滑过渡？

【参考方案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 
    

【讨论】：

这不起作用。背景在没有过渡的情况下立即消失

是的，你是对的。似乎Popup 在关闭时必须立即隐藏覆盖组件，出于某种原因忽略过渡。我会看看我是否能找到解决方法。我仍然希望这些信息有助于访问 Component 之外的属性值。

是的，可以，谢谢！你是怎么找到的？我没有发现它在任何地方都有记录，对我来说这看起来像是一个错误（或缺少文档）。还是你只是尝试随机的东西？

只是一个有根据的猜测，真的。我尝试查看文档，但找不到。我一开始以为它会改变visible 属性，但测试表明它的值从未改变。所以我认为它必须是opacity。