Qt Quick自定义按钮按压时圆角失效问题排查

你遇到的这个问题我之前也碰到过！根源其实是Qt Quick Controls 2的Button组件在按压（pressed）状态下会自动渲染一个默认的半透明反馈层——这个层是不带圆角的矩形，刚好盖在你自定义的圆角背景上面，所以看起来像是圆角没了，实际上你的背景圆角一直都在，只是被挡住了。

哪怕你设置了flat: true和highlighted: false也没用，因为flat只是隐藏了Button的默认静态背景，并没有禁用按压时的动态反馈元素。

修复方案：完全接管Button的视觉状态 #

最可靠的解决方法是直接在Button级别定义状态，彻底控制所有视觉变化，不让默认的反馈层有机会显示。下面是修正后的代码：

import QtQuick 2.15
import QtQuick.Controls 2.15

Button {
    id: customButton
    text: qsTr("Custom Button")
    flat: true // 隐藏默认静态背景，只保留我们自定义的样式
    hoverEnabled: true
    implicitWidth: 200
    implicitHeight: 40

    // 自定义颜色属性
    property color defaultButtonColor: "#DB8000"
    property color hoverButtonColor: "#784491"
    property color pressedButtonColor: "#315718"

    property color defaultBorderColor: "#ffffff"
    property color hoverBorderColor: "#ffffff"
    property color pressedBorderColor: "#FF0800"

    property color defaultTextColor: "#ffffff"
    property color hoverTextColor: "#ffffff"
    property color pressedTextColor: "#000000"

    // 在Button级别定义状态，覆盖默认行为
    states: [
        // 悬停状态：未按压时鼠标悬停
        State {
            name: "hovered"
            when: customButton.hovered && !customButton.down
            PropertyChanges {
                target: bg_customButton
                color: hoverButtonColor
                border.color: hoverBorderColor
            }
            PropertyChanges {
                target: text_customButton
                color: hoverTextColor
            }
        },
        // 按压状态
        State {
            name: "pressed"
            when: customButton.down
            PropertyChanges {
                target: bg_customButton
                color: pressedButtonColor
                border.color: pressedBorderColor
            }
            PropertyChanges {
                target: text_customButton
                color: pressedTextColor
            }
        },
        // 默认状态：非悬停、非按压
        State {
            name: ""
            PropertyChanges {
                target: bg_customButton
                color: defaultButtonColor
                border.color: defaultBorderColor
            }
            PropertyChanges {
                target: text_customButton
                color: defaultTextColor
            }
        }
    ]

    background: Rectangle {
        id: bg_customButton
        anchors.fill: parent
        radius: 15 // 圆角始终生效
        color: defaultButtonColor
        border.color: defaultBorderColor
    }

    contentItem: Text {
        id: text_customButton
        text: customButton.text
        anchors.centerIn: parent
        color: defaultTextColor
    }
}

为什么之前的代码没生效？ #

• 第一个版本中，你用QtObject动态计算颜色的思路没问题，但没处理Button自带的按压反馈层，所以还是会被挡住。
• 第二个版本中，你只在background的States里处理状态，但Button本身的pressed状态依然会触发默认的反馈元素，所以圆角还是会被覆盖。

用上面的代码，我们直接在Button级别定义了所有状态逻辑，完全接管了视觉表现，默认的反馈层就不会再干扰我们的自定义样式了，按压时圆角也能正常显示。

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