如何为QML Item添加前景色以标识其处于禁用状态？

实现方案 #

完全可以实现，有两种常用方案可选，都不会影响你原有按钮的状态触发和动画逻辑：

方案1：半透明前景遮罩（改造成本最低） #

直接在自定义按钮Item内部加一层全屏矩形遮罩，默认隐藏，仅按钮禁用时显示即可，示例代码如下：

Item {
    id: customButton
    // 你的原有属性，这里统一用enabled控制禁用状态
    property bool enabled: true

    // 你原有按钮的所有内容（背景、文字、图标、原有逻辑都可以不动）
    Rectangle {
        anchors.fill: parent
        color: "#2196F3"
        Text {
            anchors.centerIn: parent
            text: "自定义按钮"
            color: "white"
        }
    }

    // 新增禁用状态遮罩
    Rectangle {
        anchors.fill: parent
        color: "#80CCCCCC" // 半透灰色，可自行调整透明度和色值
        visible: !customButton.enabled
    }

    // 你原有的状态、动画、鼠标交互逻辑保留即可，鼠标区域记得和enabled绑定
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        enabled: customButton.enabled
        // 原有点击逻辑
    }
}

方案2：灰度滤镜效果（更真实的禁用质感） #

如果需要让按钮完全变成灰度，而不是单纯覆盖半透层，可以用Qt Quick自带的灰度效果实现，性能足够普通场景使用：
首先引入效果模块：

import QtGraphicalEffects 1.15

然后改造按钮代码：

Item {
    id: customButton
    property bool enabled: true

    // 把原有按钮的所有内容放到统一容器内，方便挂载效果
    Item {
        id: buttonContent
        anchors.fill: parent
        // 原有按钮的所有内容、逻辑都放在这里，不用修改
        Rectangle {
            anchors.fill: parent
            color: "#2196F3"
            Text {
                anchors.centerIn: parent
                text: "自定义按钮"
                color: "white"
            }
        }
    }

    // 灰度效果，仅禁用时生效
    Grayscale {
        anchors.fill: buttonContent
        source: buttonContent
        opacity: customButton.enabled ? 0 : 1
        // 可调整opacity控制灰度程度，也可以加过渡动画让状态切换更自然
        Behavior on opacity { NumberAnimation { duration: 150 } }
    }

    // 原有鼠标区域、状态、动画逻辑保留
    MouseArea {
        anchors.fill: parent
        enabled: customButton.enabled
    }
}

如果需要同时叠加半透效果，在灰度效果之外再加半透遮罩层即可。

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