菜单的 QML 动画

Question

我想在 popup.I 使用 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 and 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 组件有一些属性，其中包含转换。如enter和exit。您可以找到所有属性 here

我想你想实现宽度和高度从 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" }
}

菜单的 QML 动画

QML animation for Menus

animation

qt

contextmenu

qml

qt5