QML 无法在菜单中创建子菜单答案

【问题标题】：QML Cannot create Submenu in MenuQML 无法在菜单中创建子菜单
【发布时间】：2017-10-18 14:25:03
【问题描述】：

我正在尝试创建一个菜单

import QtQuick 2.0
import QtQuick.Controls 2.2

...

Menu {
      id: menu
      title: "mainMenu"
      MenuItem {
         text: "menuItem1"
      }
      MenuItem {
         text: "menuItem2"
      }
      Menu {
          title: "contextMenu"
            MenuItem {
               text: "item1"
            }
            MenuItem {
               text: "item2"
            }
      }
}

但是当我尝试menu.open() 时，没有contextMenu 请在下面找到屏幕截图。

我该如何解决这个问题？

【问题讨论】：

你使用的是哪个 Qt 版本？
我的qt版本是5.9.2
也许是一些特定的 WM？基于 Wayland 的帧缓冲或类似的东西？

标签： qt qml qtquick2 qtquickcontrols2

【解决方案1】：

Qt Quick Controls 2.3 (Qt 5.10) 增加了对nested menus 和cascading sub-menus 的支持。

【讨论】：

附言。您已经可以试用 Qt 5.10 beta1，它可以在在线安装程序中方便地获得。但请注意，由于 Qt Quick 核心中正在进行一些与触摸和鼠标输入处理相关的工作，已知第一个 beta 版本在这方面存在一些问题。在 Qt Quick Controls 2 中，弹出窗口受到影响，在单击或点击外部时它们并不总是按预期关闭。这些问题已在即将发布的 Qt 5.10 beta2 中修复。

【解决方案2】：

也许您打算在支持这些子菜单的地方使用QtQuick.Controls 1.x。

在QtQuick.Controls 2.2 - 您正在使用的版本 - Menu 继承自 Popup，因此行为类似 - 意思是，它们默认关闭，您需要设置它们 visible 或 open() 它们.

另一方面，MenuItem 是 AbstractButtons，它们是预先配置的，单击时会关闭 Popups。如果您想使用QtQuick.Controls 2.x 样式Menu，您可以定义自己的子类型SubMenu，这是一个按钮，不会关闭父Popup，而是根据需要打开第二个菜单或插入点击时右 MenuItems（手风琴风格）。

正确的实施取决于您的要求，但不应太具有挑战性。如果您需要更多帮助，请随时询问。

【讨论】：

【解决方案3】：

也许你可以用Button代替MenuItem，自己调整Button的背景，把它们包起来


Item {
    id: root
    width: 500
    height: 500

    MouseArea {
        id: mouse
        anchors.fill: parent

        onClicked: {
            rootMenu.open()
        }
    }

    Menu {
        id: rootMenu
        title: "rootMenu"

        Button {
            text: "menuItem1"
            onClicked: {
                console.log("choose A")
                rootMenu.close()
            }
        }

        Button {
            text: "menuItem2"
            onClicked: {
                console.log("choose B")
                rootMenu.close()
            }
        }

        Button {
            id: menu_c
            text: "menuItem3"
            onClicked: secondMenu.open()
        }
    }
    Menu {
        id: secondMenu
        x: rootMenu.width
        y: menu_c.y
        MenuItem {
            text: "item1"
            onTriggered: {
                console.log("item1")
                rootMenu.close();
            }
        }
        MenuItem {
            text: "item2"
            onTriggered: {
                console.log("item2")
                rootMenu.close();
            }
        }
    }
}

【讨论】：