2. 使用QML基本元素构建静态界面

任务目标

使用QML基本元素（Rectangle、Text、Image）构建一个嵌入式设备主界面的静态原型。界面包含设备状态栏、功能图标区与底部信息栏，整体尺寸按嵌入式屏幕规格（800×480）设计，所有元素位置与颜色需明确设定。

实现方案

创建单个QML文件，使用Rectangle作为顶层容器与各功能区块背景，Text显示标题与状态文字，Image加载本地SVG图标（需准备图标文件）。布局采用坐标定位，符合嵌入式静态界面的典型做法。

完整代码

// Main.qml
import QtQuick 2.15

Rectangle {
    id: root
    width: 800
    height: 480
    color: "#2E3440"

    // 顶部状态栏
    Rectangle {
        id: statusBar
        width: parent.width
        height: 40
        color: "#3B4252"

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 16
            anchors.verticalCenter: parent.verticalCenter
            text: "设备状态：运行中"
            font.pixelSize: 16
            color: "#ECEFF4"
        }

        Text {
            anchors.right: parent.right
            anchors.rightMargin: 16
            anchors.verticalCenter: parent.verticalCenter
            text: "14:30"
            font.pixelSize: 16
            color: "#ECEFF4"
        }
    }

    // 主标题区
    Text {
        id: titleText
        anchors.top: statusBar.bottom
        anchors.topMargin: 24
        anchors.horizontalCenter: parent.horizontalCenter
        text: "智能控制中心"
        font.pixelSize: 28
        font.bold: true
        color: "#88C0D0"
    }

    // 功能图标区（4个功能块）
    Rectangle {
        id: iconArea
        anchors.top: titleText.bottom
        anchors.topMargin: 30
        anchors.horizontalCenter: parent.horizontalCenter
        width: 640
        height: 200
        color: "transparent"

        // 功能块1：温度
        Rectangle {
            id: tempBlock
            x: 0
            y: 0
            width: 140
            height: 180
            radius: 8
            color: "#434C5E"

            Image {
                anchors.top: parent.top
                anchors.topMargin: 20
                anchors.horizontalCenter: parent.horizontalCenter
                source: "icons/temperature.svg"
                sourceSize.width: 48
                sourceSize.height: 48
            }

            Text {
                anchors.top: parent.top
                anchors.topMargin: 80
                anchors.horizontalCenter: parent.horizontalCenter
                text: "温度"
                font.pixelSize: 18
                color: "#ECEFF4"
            }

            Text {
                anchors.top: parent.top
                anchors.topMargin: 110
                anchors.horizontalCenter: parent.horizontalCenter
                text: "23.5°C"
                font.pixelSize: 16
                color: "#A3BE8C"
            }
        }

        // 功能块2：湿度
        Rectangle {
            id: humBlock
            x: 160
            y: 0
            width: 140
            height: 180
            radius: 8
            color: "#434C5E"

            Image {
                anchors.top: parent.top
                anchors.topMargin: 20
                anchors.horizontalCenter: parent.horizontalCenter
                source: "icons/humidity.svg"
                sourceSize.width: 48
                sourceSize.height: 48
            }

            Text {
                anchors.top: parent.top
                anchors.topMargin: 80
                anchors.horizontalCenter: parent.horizontalCenter
                text: "湿度"
                font.pixelSize: 18
                color: "#ECEFF4"
            }

            Text {
                anchors.top: parent.top
                anchors.topMargin: 110
                anchors.horizontalCenter: parent.horizontalCenter
                text: "45%"
                font.pixelSize: 16
                color: "#A3BE8C"
            }
        }

        // 功能块3：灯光
        Rectangle {
            id: lightBlock
            x: 320
            y: 0
            width: 140
            height: 180
            radius: 8
            color: "#434C5E"

            Image {
                anchors.top: parent.top
                anchors.topMargin: 20
                anchors.horizontalCenter: parent.horizontalCenter
                source: "icons/light.svg"
                sourceSize.width: 48
                sourceSize.height: 48
            }

            Text {
                anchors.top: parent.top
                anchors.topMargin: 80
                anchors.horizontalCenter: parent.horizontalCenter
                text: "灯光"
                font.pixelSize: 18
                color: "#ECEFF4"
            }

            Text {
                anchors.top: parent.top
                anchors.topMargin: 110
                anchors.horizontalCenter: parent.horizontalCenter
                text: "已开启"
                font.pixelSize: 16
                color: "#A3BE8C"
            }
        }

        // 功能块4：门锁
        Rectangle {
            id: lockBlock
            x: 480
            y: 0
            width: 140
            height: 180
            radius: 8
            color: "#434C5E"

            Image {
                anchors.top: parent.top
                anchors.topMargin: 20
                anchors.horizontalCenter: parent.horizontalCenter
                source: "icons/lock.svg"
                sourceSize.width: 48
                sourceSize.height: 48
            }

            Text {
                anchors.top: parent.top
                anchors.topMargin: 80
                anchors.horizontalCenter: parent.horizontalCenter
                text: "门锁"
                font.pixelSize: 18
                color: "#ECEFF4"
            }

            Text {
                anchors.top: parent.top
                anchors.topMargin: 110
                anchors.horizontalCenter: parent.horizontalCenter
                text: "已上锁"
                font.pixelSize: 16
                color: "#A3BE8C"
            }
        }
    }

    // 底部信息栏
    Rectangle {
        id: bottomBar
        anchors.bottom: parent.bottom
        width: parent.width
        height: 36
        color: "#3B4252"

        Text {
            anchors.centerIn: parent
            text: "系统版本 v1.0.0  |  192.168.1.100"
            font.pixelSize: 14
            color: "#D8DEE9"
        }
    }
}

运行方式

1. 准备4个SVG图标文件（temperature.svg、humidity.svg、light.svg、lock.svg），放入与Main.qml同级的icons/目录下。可使用任意单色SVG图标，颜色建议为白色或浅色以匹配深色背景。
2. 在项目目录下创建CMakeLists.txt或使用qmlscene直接运行：

qmlscene Main.qml

验证方法

• 窗口以800×480尺寸打开，背景为深蓝灰色（#2E3440）。
• 顶部状态栏显示“设备状态：运行中”与时间“14:30”。
• 中部标题“智能控制中心”以蓝色粗体显示。
• 四个功能块等距排列，每块包含图标、功能名称与数值/状态文字。
• 底部信息栏显示版本号与IP地址。
• 所有文字清晰可读，无元素重叠或超出边界。

界面布局示意

常见问题

• 图标不显示：确认icons/目录与Main.qml的相对路径正确，且SVG文件本身可被Qt正确解析。
• 文字重叠：若修改了功能块尺寸，需同步调整内部Text的anchors.topMargin值。
• 窗口尺寸不符：在qmlscene运行时若窗口被缩放，可添加--fullscreen参数或固定窗口大小。