时间戳

首页 > 解决方案 > 如何在 5 秒间隔 QML 后触发点击图像的可见性

image - 如何在 5 秒间隔 QML 后触发点击图像的可见性

问题描述

我正在尝试为图像设置计时器，但是图像需要可见 5 秒钟然后消失，除非它再次被点击触发。这是我的代码：


 Video{
                 id:video
                 //width:500
                 //height:300
                 //anchors.left:parent
                 autoLoad: true
                 autoPlay: true
                 //hasVideo: true
                 //source:"http://qthttp.apple.com.edgesuite.net/1010qwoeiuryfg/0640_vod.m3u8"
                 width:isFullScreen?1080:500
                 height:isFullScreen?1060:300


                 Image{
                     id:img1
                     width:parent.width/5
                     height:parent.height/5
                     anchors.centerIn: parent
                     source:'qrc:play-circle-outline.svg'
                     property int duration:5000




                     MouseArea{
                        anchors.fill:parent
                        onClicked:{
                            if(video.playbackState===1){
                                  video.pause()
                                  img1.source='qrc:play-circle-outline.svg'
                                }else if(video.playbackState===2){
                                  video.play()
                                  img1.source='qrc:pause-outline.svg'

                               }
                          }
                       }

                   }

                 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'

                     Timer {
                            interval: 5000
                            onTriggered: img2.visible = true
                            running: false

                        }



                     MouseArea{
                        anchors.fill:parent
                       /* onClicked:{
                              if(isFullScreen){
                                  video.height=300
                                  video.width=500
                                  img2.source='qrc:exit-outline.svg'
                                }else{
                                  video.height=1060
                                  video.width=1080/2
                                  img2='qrc:enter-outline.svg'
                               }
                          }*/

                          onClicked:isFullScreen=!isFullScreen


                       }

                 }

      }

我在下面设置了一个计时器，img2但在播放视频的整个过程中图像仍然可见。点击后再次触发的图像部分最让我烦恼。任何想法将不胜感激。

编辑：我设法在 5 秒后使用下面的 PropertyAnimation 隐藏图像img2：

 PropertyAnimation {
        running: true
        target: rect
        property: 'visible'
        to: false
        duration: 5000 // turns to false after 5000 ms
    }

我只需要在点击 5 秒后再次看到图像。这可以在 QML 中实现吗？

标签： imagevideotimerqml

解决方案

可见性只是一个布尔值，你不能那样淡化 QML 项目。您必须设置不透明度。我使用 Rectangle 而不是 Image 只是为了让事情变得简单。在这个例子中，淡入和淡出都会发生。如果您希望图像立即出现，则需要进行一些调整。

import QtQuick 2.12
import QtQuick.Controls 2.12

Rectangle
{
    id: bg
    anchors.fill: parent
    color: "red"

    Timer {
        id: tmr
        interval: 5000
    }

    Button {
        z: img.z+1
        anchors.centerIn: parent
        text: tmr.running ? "Running" : "Start timer"
        onClicked: {
            tmr.stop()
            tmr.start()
        }
    }

    Rectangle {
        id: img
        width: 200
        height: 200
        anchors.centerIn: parent
        opacity: tmr.running ? 1.0 : 0.0
        Behavior on opacity { PropertyAnimation { duration: 1000 } }
    }
}

推荐阅读