如何在5秒间隔QML之后触发图像在点击时的可见性
如何在5秒间隔QML之后触发图像在点击时的可见性
提问于 2021-09-20 06:29:10
我正在尝试设置一个图像的计时器，但是图像需要在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中实现吗？
回答 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 } }
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69256157
复制相关文章
相似问题
腾讯云开发者
