菜单的QML动画

Question

我想在弹出过程中设置上下文菜单的动画。我使用了Behavior QML类型，但这对我不起作用：

Menu {
Behavior on width{
NumberAnimation{
duration: 200
}
}
Behavior on height{
NumberAnimation{
duration: 200
}
}

id: contextMenu
MenuItem { text: "Cut" }
MenuSeparator{}
MenuItem { text: "Copy" }
MenuItem { text: "Paste" }
}

使用contentHeight或implicitHeight代替height也不起作用
知道吗？

Answer 1

Menu是Popup，所有弹出窗口都支持enter和exit转换。为菜单打开设置动画，例如：

import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
visible: true
width: 640
height: 480
Button {
text: "Open menu"
onClicked: contextMenu.open()
}
Menu {
id: contextMenu
enter: Transition {
ParallelAnimation {
NumberAnimation { property: "width"; from: 0.0; to: contextMenu.implicitWidth }
NumberAnimation { property: "height"; from: 0.0; to: contextMenu.implicitHeight }
}
}
MenuItem { text: "Cut" }
MenuSeparator {}
MenuItem { text: "Copy" }
MenuItem { text: "Paste" }
}
}

使用implicitWidth和implicitHeight的好处是，您不必声明属性来存储width和height的初始值，以避免它们被其他动画覆盖，就像使用已接受的答案一样。

Answer 2

Menu组件有一些属性，其中包含转换。如CCD_ 13和CCD_。你可以在这里找到所有属性

我想你想实现宽度和高度从0到任意值的转换。但菜单似乎有预设的宽度和高度。因此，您需要隐式设置动画的from和to属性。例如：

Menu {
id: contextMenu
enter: Transition {
ParallelAnimation {
NumberAnimation { property: "height"; from: 0; to: contextMenu.implicitHeight; duration: 200 }
NumberAnimation { property: "width"; from: 0; to: contextMenu.implicitWidth; duration: 200 }
}
}
MenuItem { text: "Cut" }
MenuSeparator{}
MenuItem { text: "Copy" }
MenuItem { text: "Paste" }
}