QML如何实现点击触发图片显示5秒后隐藏，且支持重复点击触发

该需求可直接在QML中实现，核心是通过可手动控制的属性动画实现淡出效果，同时封装重置方法响应点击事件。

修改说明 #

• 替换原visible属性动画为opacity属性动画，实现真实的渐变淡出效果
• 给动画绑定唯一ID，支持手动启停
• 封装重置显示的公共方法，初始化、点击场景均可复用
• 在对应点击事件中调用重置方法即可实现重新计时显示

完整修改后的img2组件代码 #

Image{
    id:img2
    width:parent.width/5
    height:parent.height/5
    anchors.bottom:video.bottom
    anchors.right:video.right
    source: isFullScreen? 'qrc:enter-outline.svg':'qrc:exit-outline.svg'
    opacity: 1 // 初始完全可见
    visible: true

    // 淡出动画
    PropertyAnimation {
        id: fadeOutAnim
        target: img2
        property: 'opacity'
        from: 1
        to: 0
        duration: 5000 // 5秒淡出到完全透明
        onFinished: img2.visible = false // 完全透明后设为不可见，避免响应无效点击
    }

    // 公共方法：重置显示计时，调用后立即显示图片并重新开始5秒倒计时
    function resetDisplay() {
        img2.visible = true
        img2.opacity = 1
        fadeOutAnim.stop() // 停止之前正在运行的动画
        fadeOutAnim.start() // 重新启动5秒淡出动画
    }

    // 初始化时调用一次，实现加载后显示5秒自动隐藏
    Component.onCompleted: resetDisplay()

    MouseArea{
        anchors.fill:parent
        onClicked: {
            isFullScreen=!isFullScreen
            img2.resetDisplay() // 点击后重置计时，继续显示5秒
        }
    }
}

扩展说明 #

如果需要点击视频任意区域都触发该图片重新显示，可以在Video组件内新增一个透传点击的MouseArea：

Video {
    // 原有Video配置不变
    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.NoButton // 不拦截原有点击事件，只做事件监听
        onPressed: img2.resetDisplay()
    }
    // 原有img1、img2组件不变
}

内容的提问来源于stack exchange，提问作者irena