CODEWITHSUNDEEP
qtqmlqt-creatorqtquick2qtquickcontrols
dustie
dustie

Reputation: 11

How to hide white rectangle when hovering a button?

I want to make button hover effect in Qt Creator, Qt Quick 6.5.

The below code works, but then a white rectangle appears.

Button {
    anchors.left: inputFromUser.right; anchors.leftMargin: 5
    id: getUserValue
    height: 62
    width: 50

    MouseArea {
        id: mouseArea2
        anchors.fill: parent
        hoverEnabled: true
        onPressed: { bacgroundRectangle.color = 'red' }
        onReleased: { bacgroundRectangle.color = 'gray' }
    }
                        
    background: Rectangle {
        id: bacgroundRectangle
        border.width:5
        color: mouseArea2.containsMouse ? "blue" : "green"
        radius: width/4
    }
    
    onClicked: {
        if (inputFromUser.text !==""){
            chatModel.send(inputFromUser.text)
            chatModel.gpt(inputFromUser.text)
            bling.text = chatModel.cnt()
            inputFromUser.text = ""
        }
    }
}

Default:

Default

When hovering:

When hovering

I tried to create a button inside the rectangle and make the rectangle hover, and it works, but the button appeared as a smaller inner rectangle, maybe there is some method to make button transparent, but color: "transparent" doesn't work.

Upvotes: 1

Views: 107

Answers (1)

Stephen Quan
Stephen Quan

Reputation: 26214

It's a bit odd to have MouseArea overlapping a Button. They both are competing for handling mouse events. As far as I can tell, all your requirements should be handled by the button itself, e.g.

        Button {
            id: btn
            Layout.preferredHeight: 62
            Layout.preferredWidth: 50
            hoverEnabled: true
            background: Rectangle {
                color: btn.pressed && "red"
                    || btn.hovered && "blue"
                    || "grey"
            }
        }

Upvotes: 1

Related Questions