2. Qt Quick Ultralite基础

任务目标

使用QML基本元素（Rectangle、Text、Image）结合锚布局（anchors）与行列布局（Row/Column），构建一个静态的“设备信息卡片”界面。该界面包含设备图标、设备名称、状态指示灯和参数列表，不涉及交互逻辑，仅验证布局与元素组合能力。

环境依赖

Qt 5.15+ 或 Qt 6.x，需启用 Qt Quick 模块。创建Qt Quick Application工程后，将以下代码替换main.qml全部内容，或直接使用qmlscene运行该文件。

完整实现

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 360
    height: 520
    visible: true
    title: "设备信息卡片"

    // 根容器：使用锚布局填满窗口
    Rectangle {
        anchors.fill: parent
        color: "#f0f4f8"

        // 卡片主体：垂直居中，固定宽度
        Rectangle {
            id: card
            width: 300
            height: 420
            anchors.centerIn: parent
            radius: 12
            color: "#ffffff"
            border.color: "#d0d7de"
            border.width: 1

            // 卡片内部使用Column进行垂直排列
            Column {
                anchors.fill: parent
                anchors.margins: 20
                spacing: 12

                // 头部区域：图标 + 设备名称（使用Row水平排列）
                Row {
                    width: parent.width
                    spacing: 12

                    // 设备图标（使用Image加载内置资源）
                    Image {
                        id: deviceIcon
                        width: 48
                        height: 48
                        source: "qrc:/icons/device.png"
                        fillMode: Image.PreserveAspectFit
                    }

                    // 设备名称与状态（使用Column嵌套）
                    Column {
                        anchors.verticalCenter: deviceIcon.verticalCenter
                        spacing: 4

                        Text {
                            text: "温度传感器"
                            font.pixelSize: 18
                            font.bold: true
                            color: "#1f2937"
                        }

                        Row {
                            spacing: 6
                            Rectangle {
                                width: 10
                                height: 10
                                radius: 5
                                color: "#22c55e"
                                anchors.verticalCenter: parent.verticalCenter
                            }
                            Text {
                                text: "在线"
                                font.pixelSize: 12
                                color: "#6b7280"
                            }
                        }
                    }
                }

                // 分隔线
                Rectangle {
                    width: parent.width
                    height: 1
                    color: "#e5e7eb"
                }

                // 参数列表：使用Grid或Column展示键值对
                Column {
                    width: parent.width
                    spacing: 8

                    // 使用Repeater生成多行参数
                    Repeater {
                        model: [
                            {key: "当前温度", value: "26.5 °C"},
                            {key: "湿度", value: "48%"},
                            {key: "电池电量", value: "86%"},
                            {key: "固件版本", value: "v2.1.0"}
                        ]

                        // 每行：键左对齐，值右对齐（使用锚布局）
                        Rectangle {
                            width: parent.width
                            height: 28
                            color: "transparent"

                            Text {
                                id: keyText
                                text: modelData.key
                                font.pixelSize: 14
                                color: "#4b5563"
                                anchors.left: parent.left
                                anchors.verticalCenter: parent.verticalCenter
                            }

                            Text {
                                text: modelData.value
                                font.pixelSize: 14
                                font.bold: true
                                color: "#111827"
                                anchors.right: parent.right
                                anchors.verticalCenter: parent.verticalCenter
                            }
                        }
                    }
                }

                // 底部提示文字
                Text {
                    text: "数据更新时间：2025-01-15 10:30"
                    font.pixelSize: 11
                    color: "#9ca3af"
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: parent.width
                    horizontalAlignment: Text.AlignHCenter
                }
            }
        }
    }
}

运行与验证

运行方式：

1. 在Qt Creator中创建Qt Quick Application - Empty工程，将上述代码粘贴至main.qml。
2. 准备一张设备图标图片（如device.png），放入工程资源文件qml.qrc中，前缀设为/icons，或在代码中将source改为本地文件路径（如"file:///path/to/device.png"）。
3. 直接运行工程，或使用命令行：qmlscene main.qml（需确保图片路径可访问）。

验证方法：

• 窗口显示为360×520，白色卡片居中，圆角边框可见。
• 卡片顶部左侧显示图标，右侧显示“温度传感器”与绿色状态点及“在线”文字。
• 分隔线下方显示4行参数，键左对齐、值右对齐。
• 底部居中显示灰色小字时间戳。
• 窗口缩放时卡片保持居中，内部元素不溢出、不重叠。

通过条件：界面元素完整呈现，布局无错位，锚布局与行列布局均正确生效，即视为通过。

布局要点说明

• 锚布局：根Rectangle使用anchors.fill填满窗口；卡片使用anchors.centerIn居中；参数行中键值对分别使用anchors.left与anchors.right实现两端对齐。
• 行列布局：外层Column管理卡片垂直方向内容；头部Row实现图标与文字的水平排列；状态指示器内部再次使用Row组合色块与文字。
• Repeater：用于批量生成参数行，避免重复代码，是QML中处理列表数据的常用方式。