QML中使用Menu，设置Menu内MenuItem选定效果

在QML中，Menu组件是一个用于创建上下文菜单或弹出菜单的组件，而MenuItem是Menu中的一个元素，代表一个可选的菜单项。要设置MenuItem被选定时的效果，可以通过使用状态（states）和过渡（transitions）来实现视觉上的反馈。

以下是一个简单的示例，展示了如何使用QML中的Menu和MenuItem，并设置选定效果：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "Menu Example"

    Menu {
        id: contextMenu
        anchors.top: parent.top
        anchors.left: parent.left
        visible: true

        MenuItem {
            text: "Option 1"
            onTriggered: console.log("Option 1 selected")
        }
        MenuItem {
            text: "Option 2"
            onTriggered: console.log("Option 2 selected")
        }
    }

    Component.onCompleted: {
        contextMenu.open()
    }

    // 为MenuItem设置选定状态的效果
    states: [
        State {
            name: "selected"
            when: contextMenu.activeFocusItem == contextMenu.children[0]
            PropertyChanges {
                target: contextMenu.children[0]
                color: "#a2b8c4" // 改变选中项的背景颜色
            }
        },
        State {
            name: "selected"
            when: contextMenu.activeFocusItem == contextMenu.children[1]
            PropertyChanges {
                target: contextMenu.children[1]
                color: "#a2b8c4"
            }
        }
    ]

    transitions: [
        Transition {
            from: "*"
            to: "selected"
            Parallel {
                NumberAnimation { target: contextMenu.children[0]; property: "color"; duration: 100 }
                NumberAnimation { target: contextMenu.children[1]; property: "color"; duration: 100 }
            }
        }
    ]
}

在这个示例中，当Menu中的某个MenuItem获得焦点时，会触发"selected"状态。此时，选定的MenuItem会改变其背景颜色，并且这个变化会有动画效果，使用户体验更加流畅。