3. 通过 Image 组件显示 MCU 内置资源图片

任务目标

创建一个可复用的自定义按钮组件 ClickableButton.qml，该组件内部封装点击信号处理逻辑，并在点击后改变按钮的文本与背景颜色。主界面 main.qml 中放置两个该按钮实例，分别验证独立的状态变化。

实现步骤

1. 新建 QML 文件 ClickableButton.qml，基于 Rectangle 实现按钮外观与点击响应。
2. 在按钮内部使用 MouseArea 捕获点击，通过状态切换改变文本与颜色。
3. 在 main.qml 中引入该组件，创建两个实例并设置初始文本。

完整代码

ClickableButton.qml（自定义组件）：

import QtQuick 2.15

Rectangle {
    id: root

    // 对外暴露的文本属性
    property string btnText: "Button"

    width: 160
    height: 48
    radius: 8
    color: "#4A90D9"   // 默认蓝色

    // 文本显示
    Text {
        id: label
        anchors.centerIn: parent
        text: root.btnText
        color: "white"
        font.pixelSize: 16
        font.bold: true
    }

    // 点击区域
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: {
            // 切换状态：若当前为默认态则变为按下态，反之恢复
            if (root.state === "pressed") {
                root.state = ""
            } else {
                root.state = "pressed"
            }
        }
    }

    // 状态定义
    states: [
        State {
            name: "pressed"
            PropertyChanges { target: root; color: "#D94A4A" }   // 红色
            PropertyChanges { target: label; text: "已点击" }
        }
    ]

    // 过渡动画
    transitions: Transition {
        ColorAnimation { duration: 150 }
    }
}

main.qml（主界面，使用两个按钮实例）：

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 400
    height: 200
    visible: true
    title: "按钮点击事件示例"

    Column {
        anchors.centerIn: parent
        spacing: 20

        ClickableButton {
            id: btn1
            btnText: "按钮 A"
        }

        ClickableButton {
            id: btn2
            btnText: "按钮 B"
        }
    }
}

运行方式

1. 将上述两个 .qml 文件放在同一目录下。
2. 使用 Qt Creator 打开 main.qml，选择 Qt Quick 开发环境（Qt 5.15+ 或 Qt 6.x 均可，需支持 QtQuick 2.15 导入）。
3. 直接运行项目（快捷键 Ctrl+R），或使用命令行：qmlscene main.qml（Qt 5）或 qml main.qml（Qt 6）。

验证方法

• 启动程序后，窗口内显示两个蓝色按钮，文本分别为“按钮 A”和“按钮 B”。
• 点击“按钮 A”，该按钮变为红色，文本变为“已点击”；再次点击恢复为蓝色和原文本。
• 点击“按钮 B”时，只有 B 的状态变化，A 不受影响——验证组件实例之间状态独立。
• 观察颜色变化有约 150ms 的平滑过渡动画，说明状态切换生效。

预期输出：两个按钮初始均为蓝色底白字；每次点击目标按钮，其颜色在蓝/红之间切换，文本在原始文本与“已点击”之间切换，且两个按钮互不干扰。