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"
    }
}

Answer 2

尽管这是一个老问题，但我碰到了这个问题，因为这是我自己想做的事情。我认为m7913d的答案可以通过利用hovered的{{1}}属性来简化。

MenuItem

我要做的另一件事是保留对原始实现的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表达式比此处显示的要复杂得多。

QML MenuItem突出显示不起作用

2 个答案: