Qt Quick 6.5按钮悬停时如何隐藏白色矩形？

问题原因 #

你遇到的悬停时出现白色矩形的问题，本质是两个原因：

1. Button默认自带padding：默认内边距会让自定义背景和Button容器之间出现空白区域，显示为白色
2. 多余的MouseArea干扰+未利用Button内置状态：手动添加的MouseArea属于重复造轮子，且Button自身的hover状态会触发默认背景逻辑，和自定义背景叠加导致异常

修正后的代码 #

直接移除多余MouseArea，利用Button内置的hovered、pressed状态，同时清除默认padding：

Button {
    anchors.left: inputFromUser.right; anchors.leftMargin: 5
    id: getUserValue
    height: 62
    width: 50
    padding: 0  // 清除默认内边距，避免空白

    background: Rectangle {
        id: bacgroundRectangle
        border.width: 5
        // 按状态优先级绑定颜色：按下>悬停>默认
        color: getUserValue.pressed ? "red" : 
               getUserValue.hovered ? "blue" : "green"
        radius: width / 4
        anchors.fill: parent  // 确保背景完全填满Button
    }
    
    onClicked: {
        if (inputFromUser.text !== "") {
            chatModel.send(inputFromUser.text)
            chatModel.gpt(inputFromUser.text)
            bling.text = chatModel.cnt()
            inputFromUser.text = ""
        }
    }
}

关键改动说明 #

• 移除额外的MouseArea：Qt Quick的Button本身继承AbstractButton，内置了hovered、pressed等状态属性，无需手动监听鼠标事件，额外的MouseArea反而可能干扰控件的事件传递逻辑
• 设置padding: 0：清除Button默认的内部padding，让自定义背景完全贴合Button的边界，解决白色空白问题
• 用Button自身状态控制背景色：直接绑定控件的内置状态，符合Qt Quick控件的设计规范，状态切换更可靠

内容的提问来源于stack exchange，提问作者dustie