外部定义contentItem时，如何在自定义按钮内部处理按压状态并显示覆盖层？

我有一个自定义ButtonOverlay按钮，按压时会在内容和背景区域显示白色覆盖层。按钮使用者可通过定义contentItem来指定内容（标签+文本）的对齐方式。当前实现可正常运行，但我希望在按钮内部控制按压状态，同时要让白色覆盖层显示在contentItem上方，而且不想为按钮添加大量属性来定义文本/图标的布局，有没有其他实现方式？

使用示例 #

ButtonOverlay {
    id: btnOverlay
    width: 100
    height: 50
    state: ""
    contentItem: Rectangle {
        color: "red"
        Label {
            text: "button"
        }
        Rectangle {
            id: rectId
            anchors.fill: parent
            color: "white"
            opacity: 0.5
            visible: btnOverlay.state === "pressed"
        }
    }
    onPressed: {
          btnOverlay.state = "pressed"
    }
    onReleased: {
          btnOverlay.state = ""
    }
}

ButtonOverlay.qml 实现 #

Button {
   id: root

   background: Rectangle {
      radius: 10
      color: "gray"

      Rectangle {
        id: overlay
        anchors.fill: parent
        radius: parent.radius
        visible: root.state === "pressed"
        color: "white"
        opacity: 0.5
     }
   }
}

可以通过重写Button的contentItem容器，将覆盖层放在用户自定义内容的上方，同时利用Button自带的pressed属性控制状态，无需手动维护state。修改后的ButtonOverlay.qml如下：

Button {
    id: root

    // 自定义contentItem容器，整合用户内容与覆盖层
    contentItem: Item {
        anchors.fill: parent

        // 承载用户自定义的内容区域
        Item {
            id: userContentContainer
            anchors.fill: parent
            // 通过default property让用户直接设置内容，保留原有使用习惯
            default property alias userContent: userContentContainer.data
        }

        // 按压覆盖层，层级位于用户内容之上
        Rectangle {
            id: overlay
            anchors.fill: parent
            radius: root.background.radius
            visible: root.pressed // 直接复用Button原生的按压状态
            color: "white"
            opacity: 0.5
        }
    }

    background: Rectangle {
        radius: 10
        color: "gray"
    }
}

对应的简化使用示例：

ButtonOverlay {
    width: 100
    height: 50
    // 和原来设置contentItem的逻辑一致，直接定义内容
    userContent: Rectangle {
        color: "red"
        Label {
            text: "button"
            anchors.centerIn: parent
        }
    }
}

关键说明 #

• 复用Button原生的pressed属性，省去手动处理按压事件和维护状态的代码，逻辑更简洁
• 通过Item容器分层，覆盖层在渲染层级上自然位于用户内容上方，无需额外调整层级
• 使用default property alias保持用户原有使用习惯，无需新增大量布局相关属性
• 覆盖层的圆角半径绑定背景的圆角，保证按钮样式统一

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