QML 完全重写Menu代码例子

下面是一个简单的 QML 代码示例，演示如何完全重写菜单：

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    // 自定义菜单项的样式
    property var menuItemStyle: "MenuItem { font.bold: true; font.pointSize: 18; padding: 5 }"
    
    // 菜单项数组
    property var menuItems: [
        { text: "File", subMenu: [
            { text: "New", shortcut: "Ctrl+N" },
            { text: "Open", shortcut: "Ctrl+O" },
            { text: "Save", shortcut: "Ctrl+S" },
            { text: "Save As", shortcut: "Ctrl+Shift+S" },
            { separator: true },
            { text: "Exit" }
        ]},
        { text: "Edit", subMenu: [
            { text: "Cut", shortcut: "Ctrl+X" },
            { text: "Copy", shortcut: "Ctrl+C" },
            { text: "Paste", shortcut: "Ctrl+V" },
            { separator: true },
            { text: "Undo", shortcut: "Ctrl+Z" },
            { text: "Redo", shortcut: "Ctrl+Y" },
        ]},
        { text: "View", subMenu: [
            { text: "Zoom In", shortcut: "Ctrl++" },
            { text: "Zoom Out", shortcut: "Ctrl+-" },
            { separator: true },
            { text: "Full Screen", shortcut: "F11" },
        ]}
    ]
    
    // 菜单项被点击的信号
    signal menuItemClicked(var item)
    
    // 菜单项组件
    Component {
        id: menuItemComponent
        property var item
        MenuItem {
            id: menuItem
            text: item.text
            shortcut: item.shortcut
            separator: item.separator
            style: root.menuItemStyle
            onClicked: {
                if (item.subMenu) {
                    // 显示子菜单
                    subMenu.visible = true
                } else {
                    // 触发菜单项被点击的信号
                    root.menuItemClicked(item)
                }
            }
            // 子菜单
            SubMenu {
                id: subMenu
                visible: false
                x: menuItem.width
                y: menuItem.y
                menuItems: item.subMenu
                onMenuItemClicked: {
                    // 触发菜单项被点击的信号
                    root.menuItemClicked(item)
                }
            }
        }
    }
    
    // 菜单组件
    Component {
        id: menuComponent
        Item {
            id: menu
            width: contentItem.width
            height: contentItem.height
            visible: false
            anchors.top: parent.top
            anchors.right: parent.right
            Rectangle {
                id: contentItem
                width: 200
                height: 300
                color: "#f0f0f0"
                border.width: 1
                border.color: "#ccc"
                ListView {
                    id: listView
                    width: parent.width
                    height: parent.height
                    model: menuItems
                    delegate: menuItemComponent
                }
            }
        }
    }
    
    // 显示菜单的函数
    function showMenu(x, y) {
        // 设置菜单项的位置
        for (var i = 0; i < menuItems.length; i++) {
            var menuItem = menu.listView.itemAt(i)
            menuItem.x = 0
            menuItem.y = i * menuItem.height
        }
        // 显示菜单
        menu.x = x
        menu.y = y
        menu.visible = true
        // 捕捉鼠标事件，点击菜单以外的区域时关闭菜单
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                menu.visible = false
                mouseArea.destroy()
            }
            // 防止点击菜单时触发关闭菜单的事件
            propagateComposedEvents: true
        }
    }
    
    // 显示菜单的按钮
    Button {
        text: "Show Menu"
        anchors.centerIn: parent
        onClicked: showMenu(mouseX, mouseY)
    }
}

在这个示例中，我们定义了一个 `menuItems` 数组来存储菜单项，每个菜单项可以包含一个子菜单。我们还定义了一个 `menuItemStyle` 属性来设置菜单项的样式。

菜单项的组件是 `MenuItem`，它包含一个 `Submenu` 组件，用于显示子菜单。我们使用一个 `menuItemComponent` 组件来生成菜单项。

菜单的组件是 `menu`，它包含一个 `ListView` 组件，用于显示菜单项。我们使用一个 `menuComponent` 组件来生成菜单。

最后，我们定义了一个 `showMenu` 函数来显示菜单，并在该函数中捕捉鼠标事件，以便在点击菜单以外的区域时关闭菜单。

你可以根据自己的需求修改这个示例，例如添加更多的菜单项、更改菜单项的样式、添加菜单项被点击的功能等等。