问如何在5秒间隔QML之后触发图像在点击时的可见性
EN

Stack Overflow用户

提问于 2021-09-20 06:29:10

回答 1查看 53关注 0票数 0

我正在尝试设置一个图像的计时器，但是图像需要在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秒后用img2下面的PropertyAnimation隐藏了图像

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

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

video

timer

qml

image

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-20 08:23:50

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

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 } }
    }
}