QML自定义组件属性设置异常：按钮点击后颜色持续加深问题排查

核心问题分析 #

1. 双向绑定篡改基础颜色：property alias color: btn.color是双向绑定，当内部用Qt.darker()修改btn.color后，外部main.qml中设置的原始颜色（如"red"）会被同步替换为加深后的深色。后续点击时，会基于这个已被修改的深色再次加深，形成恶性循环。
2. onReleased触发有局限：只有鼠标在按钮区域内松开时，onReleased才会执行。如果按下鼠标后拖动到按钮外再松开，onReleased不会触发，按钮会一直保持深色，进而通过双向绑定永久修改外部的颜色属性。
3. 临时颜色保存不可靠：old_color仅保存按下瞬间的当前颜色，而非原始基础颜色，一旦onReleased未触发，就会丢失原始颜色，后续操作只能基于错误的深色继续加深。

修复后的代码 #

CustomButton.qml

import QtQuick 2.12

Item {
    property alias text: name.text
    // 定义基础颜色属性，外部可设置，内部不会修改它
    property color baseColor: "beige"

    Rectangle {
        id: btn
        width: name.implicitWidth
        height: name.implicitHeight
        radius: 4
        // 绑定到基础颜色，确保初始状态正确
        color: baseColor
        border {
            color: Qt.darker(baseColor)
            width: 2
        }

        Text {
            id: name
            padding: 20
            text: "Click Me"
            // 优化：根据背景亮度自动调整文字颜色，避免过暗时无法辨认
            color: baseColor.lightness < 0.5 ? "white" : "black"
        }

        MouseArea {
            anchors.fill: parent

            onPressed: {
                // 直接基于原始基础颜色生成深色，避免累积
                btn.color = Qt.darker(baseColor)
            }

            onReleased: {
                btn.color = baseColor
            }

            // 补充：鼠标按下后移出按钮区域时，恢复原始颜色
            onExited: {
                if (pressed) {
                    btn.color = baseColor
                }
            }

            onClicked: {
                console.log("clicked " + name.text)
            }
        }
    }
}

main.qml

import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480

    CustomButton {
        text: "Register"
        x: 100; y: 100
        // 使用baseColor设置按钮原始颜色
        baseColor: "red"
    }

    CustomButton {
        text: "Login"
        x: 200; y: 200
    }

    CustomButton {
        x: 300; y: 300
    }
}

修复说明 #

• 移除双向绑定的color别名，改用独立的baseColor属性保存原始颜色，确保内部修改不会影响外部设置的初始值。
• 按下按钮时直接基于baseColor生成深色，彻底避免颜色累积加深的问题。
• 增加onExited事件处理，确保鼠标按下后移出按钮区域时，颜色能恢复到原始状态，覆盖所有交互场景。
• 优化文字颜色逻辑，根据背景亮度自动切换黑白文字，避免背景过暗时文字无法辨认。

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