3. QtMCU中的按钮交互

任务目标

在QML中创建一个按钮，通过MouseArea捕获点击事件，并在点击后改变界面状态（例如切换文本显示与按钮颜色）。本案例聚焦于QML事件处理的最小闭环，不涉及C++后端交互。

环境依赖

Qt 5.15+ 或 Qt 6.x，需安装 Qt Quick 模块。使用qmlscene或qml运行器直接加载QML文件即可，无需构建工程。

完整实现

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    id: root
    width: 320
    height: 240
    color: "#f0f0f0"

    // 界面状态：记录点击次数
    property int clickCount: 0

    // 状态显示文本
    Text {
        id: statusText
        anchors.centerIn: parent
        text: "尚未点击"
        font.pixelSize: 20
        color: "#333333"
    }

    // 自定义按钮（使用Rectangle + MouseArea）
    Rectangle {
        id: button
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        width: 120
        height: 44
        radius: 6
        color: buttonArea.pressed ? "#2d7dd2" : "#4a90d9"

        Text {
            anchors.centerIn: parent
            text: "点击我"
            color: "white"
            font.pixelSize: 16
        }

        MouseArea {
            id: buttonArea
            anchors.fill: parent
            onClicked: {
                root.clickCount += 1
                statusText.text = "已点击 " + root.clickCount + " 次"
            }
        }
    }
}

运行方式

1. 将上述代码保存为 ClickButton.qml。
2. 在终端执行：qmlscene ClickButton.qml（Qt 5）或 qml ClickButton.qml（Qt 6）。

验证方法

• 启动后窗口中央显示“尚未点击”，底部显示蓝色按钮。
• 点击按钮时，按钮颜色变深（按下态），松开后恢复。
• 每次点击，中央文本计数递增，依次显示“已点击 1 次”“已点击 2 次”等。
• 若点击无反应或文本不更新，检查MouseArea是否完全覆盖按钮区域（anchors.fill: parent）。

关键说明

本案例使用Rectangle配合MouseArea实现按钮，而非Button控件，目的是直接展示事件处理机制。MouseArea的pressed属性用于驱动视觉反馈，onClicked信号处理器中修改root.clickCount与statusText.text，即完成“点击→状态变更”的完整链路。若需扩展为真实项目中的按钮，可替换为QtQuick.Controls中的Button，其内部已封装MouseArea逻辑。