4. Qt Quick核心组件

在Qt Quick中，HMI界面的构建方式与传统的QWidget体系有本质区别。QML采用声明式语法，界面由一棵可视元素树组成，每个元素都是Item或其派生类型。理解这些核心组件的职责边界与组合方式，是开发嵌入式HMI的基础。本节将围绕最常用的六类可视元素展开，说明它们的属性体系、使用场景以及相互之间的协作关系。

一、核心原理：Item是可视元素的根基

Item是所有可视元素的基类，它本身不绘制任何内容，但定义了所有可视元素共享的基础能力：位置（x、y）、尺寸（width、height）、锚点（anchors）、层级（z）、可见性（visible）、透明度（opacity）、旋转与缩放（rotation、scale）以及焦点和键盘处理。任何可视元素都可以通过anchors与其他元素建立相对定位关系，这是QML布局的核心机制。

Rectangle继承自Item，增加了填充色（color）、边框（border）、圆角（radius）和渐变（gradient）等绘制能力，是HMI中最常用的背景与容器元素。Text同样继承自Item，负责文本渲染，支持字体、颜色、对齐、换行和富文本。Image用于加载并显示图片资源，支持本地文件、资源系统（qrc）和网络URL。MouseArea是一个不可见的交互区域，通过信号与槽机制捕获点击、按压、拖拽等鼠标或触摸事件。Button则是Qt Quick Controls 2提供的标准控件，内部封装了背景、文本和交互状态，适合快速构建规范化的操作按钮。

二、方法流程：从静态布局到交互响应

使用这些组件的典型流程分为四步。第一步，用Rectangle搭建界面骨架，确定各区域的位置和尺寸，通常配合anchors实现自适应布局。第二步，在容器内放置Text和Image，完成信息展示。第三步，在需要交互的区域上覆盖MouseArea，或者直接使用Button控件。第四步，通过属性绑定和信号处理将界面与后端逻辑连接起来。

下面是一个完整的QML片段，展示了一个设备状态卡片的结构：

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    id: statusCard
    width: 320; height: 180
    color: "#ffffff"
    radius: 12
    border.color: "#e2e8f0"
    border.width: 1

    Image {
        id: deviceIcon
        source: "qrc:/icons/device_on.png"
        width: 48; height: 48
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 20
        fillMode: Image.PreserveAspectFit
    }

    Text {
        id: deviceName
        text: "温控器 A1"
        font.pixelSize: 18
        font.bold: true
        color: "#1a202c"
        anchors.left: deviceIcon.right
        anchors.leftMargin: 16
        anchors.verticalCenter: deviceIcon.verticalCenter
    }

    Text {
        id: deviceStatus
        text: "运行中"
        font.pixelSize: 14
        color: "#38a169"
        anchors.left: deviceName.left
        anchors.top: deviceName.bottom
        anchors.topMargin: 6
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            console.log("卡片被点击：" + deviceName.text)
        }
    }
}

这段代码中，Rectangle作为卡片容器，Image和Text通过anchors建立相对定位，MouseArea覆盖整个卡片区域以捕获点击。这种组合方式在嵌入式HMI中非常常见，既保持了结构的清晰，又避免了过度嵌套。

三、案例场景：工业HMI中的状态指示面板

假设我们需要为一个嵌入式温控设备设计状态指示面板，包含三个区域：设备图标、状态文字和操作按钮。使用Rectangle划分三个横向区域，Image显示设备图标，Text显示实时温度，Button提供“启动/停止”操作。Button内部已经封装了背景和文本，但若需要更精细的视觉控制，可以用Rectangle加MouseArea自行组合。

在实际项目中，选择Button还是自定义组合，取决于设计规范。如果界面风格统一且交互简单，优先使用Button；如果需要特殊的圆角、渐变或动画效果，则用Rectangle加MouseArea更灵活。下表对比了两种方式的适用场景：

四、误区与复盘