QML 矩形按钮高亮延迟
QML Rectangle button highlight delay
我有一个按钮列表,我想在用户按下它时单独突出显示这些按钮,直到它被释放。
问题在于,当您滚动列表时,您触摸的第一个按钮将突出显示,即使您触摸了它一毫秒。它看起来不太好,所以我想为高亮动画添加延迟。
在高亮动画发生之前稍作延迟可能会解决我认为的这个外观问题。
如何为高亮动画添加延迟?
我一直在尝试类似的方法:
Rectangle {
id: folderButton
property bool pressed: false
signal clicked
height: mainWindoww.height * 0.1
width: parent.width
color: pressed ? "lightgrey" : "white"
function release() {
autoRepeatClicks.stop()
folderButton.pressed = false
}
SequentialAnimation on pressed {
id: autoRepeatClicks
running: false
PropertyAction { target: folderButton; property: "pressed"; value: true }
ScriptAction { script: folderButton.clicked() }
PauseAnimation { duration: 1000 }
SequentialAnimation {
loops: Animation.Infinite
ScriptAction { script: folderButton.clicked() }
PauseAnimation { duration: 500 }
}
}
MouseArea {
anchors.fill: parent
onPressed: autoRepeatClicks.start()
onReleased: folderButton.release()
onCanceled: folderButton.release()
}
}
但这段代码似乎没有添加任何时差
您可以使用 Timer
来实现这一点。例如,您可以这样做:
Item {
Timer {
interval: 500;
running: true;
repeat: true
onTriggered: time.text = Date().toString()
}
Text { id: time }
}
如果您只想为颜色设置动画 属性,请尝试以下操作:
Behavior on color { ColorAnimation { duration: 1000 } }
我有一个按钮列表,我想在用户按下它时单独突出显示这些按钮,直到它被释放。
问题在于,当您滚动列表时,您触摸的第一个按钮将突出显示,即使您触摸了它一毫秒。它看起来不太好,所以我想为高亮动画添加延迟。
在高亮动画发生之前稍作延迟可能会解决我认为的这个外观问题。
如何为高亮动画添加延迟?
我一直在尝试类似的方法:
Rectangle {
id: folderButton
property bool pressed: false
signal clicked
height: mainWindoww.height * 0.1
width: parent.width
color: pressed ? "lightgrey" : "white"
function release() {
autoRepeatClicks.stop()
folderButton.pressed = false
}
SequentialAnimation on pressed {
id: autoRepeatClicks
running: false
PropertyAction { target: folderButton; property: "pressed"; value: true }
ScriptAction { script: folderButton.clicked() }
PauseAnimation { duration: 1000 }
SequentialAnimation {
loops: Animation.Infinite
ScriptAction { script: folderButton.clicked() }
PauseAnimation { duration: 500 }
}
}
MouseArea {
anchors.fill: parent
onPressed: autoRepeatClicks.start()
onReleased: folderButton.release()
onCanceled: folderButton.release()
}
}
但这段代码似乎没有添加任何时差
您可以使用 Timer
来实现这一点。例如,您可以这样做:
Item {
Timer {
interval: 500;
running: true;
repeat: true
onTriggered: time.text = Date().toString()
}
Text { id: time }
}
如果您只想为颜色设置动画 属性,请尝试以下操作:
Behavior on color { ColorAnimation { duration: 1000 } }