Important: Please read the Qt Code of Conduct -

ActiveFocus draws outside rounded menu corners

  • Hi!
    I'm trying to make a menu with rounded corners using components from QtQuick.Controls 2.15.
    However, the activeFocus background from the MenuItems is not rounded, and so the corners of the MenuItem background ends up sticking out from the menu background for the top and bottom choice when hovered over.

    Is it possible to ensure that the MenuItem background does not protrude from the Menu background?

    Thanks for any responses, and please ask for more information if needed. I'm new to qt :)

  • Post your working code, it's the quickest way to get a response.

  • I'll keep that in mind next time, thanks.

    It turns out what I wanted had a name, clipping. You can set clip: true, and that should prevent the menuitems' backgrounds from drawing outside of the menu itself. However, due to performance concerns, clip regions can only be rectangular so that did not solve the problem in this case.

    The solution was to redefine the background of the menuItems like this:
    (keep in mind that I'm still a noob, so while this code solves this specific problem, it might not be so great in other ways)

    background: Item {
            height: root.implicitHeight 
            width: root.implicitWidth
            anchors.bottom: root.bottom
            opacity: root.activeFocus ? 0.5 : 0
            layer.enabled: true
            Rectangle {
                implicitHeight: 0.5 * root.implicitHeight
                color: "#000000"
                opacity: (root.activeFocus && (isFirst || isLast)) ? 1 : 0
       isFirst ? undefined :
                anchors.right: roundRect.right
                anchors.left: roundRect.left
                anchors.bottom: isFirst ? roundRect.bottom : undefined
                visible: opacity
            Rectangle {
                id: roundRect
                radius: (isLast || isFirst) ? 15 : 0
                implicitHeight: root.implicitHeight
                color: "#000000"
                anchors.fill: parent

Log in to reply