QML MenuItem 突出显示不起作用

Question

有人能给我解释一件事吗？假设我有一个项目，如果我点击它，就会出现一个下拉菜单。当您将鼠标悬停在菜单项上时，如何使它们像那样突出？

代码：

Rectangle {
    id: main_window
    width: 600
    height: 600
    property int mrg: 10   

    Rectangle {
        anchors.centerIn: parent
        width: 500
        height: 500
        color: 'green'

        Text {
            id: field
            text: "Click!"
            font.pointSize: 20
            color: 'white'
            anchors.centerIn: parent

            MouseArea {
                id: ma
                anchors.fill: parent
                hoverEnabled: true

                onClicked: {
                    menu.x = ma.mouseX
                    menu.open()
                }
            }

            Menu {
                id: menu
                y: field.height
                MenuItem {
                    text: "Menu item"
                    highlighted: true

                }
            }
        }
    }
}

在文档中，我发现正确的 highlight 负责选择适当的菜单项。我在 True 中安装了它，但它没有改变任何东西。请告诉我我做错了什么。非常感谢。

Answer 1

MenuItem 的默认实现不包含任何视觉突出显示功能，但您可以根据需要调整图形表示，如 Qt manuals 中所述。所以，你的 MenuItem 应该是这样的：

MenuItem {
    id: control
    text: "Menu item"

    background: Item {
        implicitWidth: 200
        implicitHeight: 40

        Rectangle {
            anchors.fill: parent
            anchors.margins: 1
            color: control.highlighted ? "blue" : "transparent" // blue background if the control is highlighed
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true // enable mouse enter events when no mouse buttons are pressed
                onContainsMouseChanged: control.highlighted = containsMouse // set the highlighted flag when the mouse hovers the MenuItem
            }
        }
    }
}

注意这个实现是基于Qt提供的default implementation:

background: Item {
    implicitWidth: 200
    implicitHeight: 40

    Rectangle {
        x: 1
        y: 1
        width: parent.width - 2
        height: parent.height - 2
        color: control.visualFocus || control.down ? Default.delegateColor : "transparent"
    }
}

请注意，通过消除 MouseArea

简化了此解决方案

Answer 2

尽管这是一个老问题，但我遇到了这个问题，因为这是我想自己做的事情。我认为 m7913d 的答案可以通过使用 MenuItem.

的 hovered 属性来简化一点

MenuItem {
    id: control
    text: "Menu item"
    hoverEnabled: true

    background: Item {
        implicitWidth: 200
        implicitHeight: 40

        Rectangle {
            anchors.fill: parent
            anchors.margins: 1
            color: control.hovered ? "blue" : "transparent"
        }
    }
}

我做的另一件事是保留原始实现的 control.down 处理，因此 color 表达式比这里显示的稍微复杂一些。

QML MenuItem 突出显示不起作用

QML MenuItem Highlighted doesn't work

qt

qml

qtquick2

qtquickcontrols2