做第一个速度仪表

在仪表盘打开 更多（…）→ 自定义仪表，选择 添加新仪表。新仪表已带有一个基础速度输入。

1. 点击编辑器顶部的名称，进入 仪表设置，命名为“我的车速”。
2. 在 输入绑定 旁点齿轮，打开 参数配置。检查速度输入：标识符为 speed，类型为 基础数据，来源为 速度。缺少时用 添加参数 新建。
3. 点 完成 返回并保存设置，再回到编辑区。

脚本通过 $data.current.speed 读取速度；这里的字段名来自输入标识符。编辑器会按定义提供类型提示。本例不需要 OBD 绑定。

把编辑区原有内容整体替换为下面的完整代码，不要把它再包进另一个 main()。这个例子只有一个入口函数。

先保持代码不变。它会在每次需要绘制时读取当前速度，把数值和单位上下排布；缺少读数时显示横线。下一节会按执行顺序解释它。

function main() {
  const speed = $data.current.speed;
  return (
    <VStack spacing={8}>
      <Text fontSize={64} color={$env.foreground}>
        {speed?.value == null ? '—' : Math.round(speed.value)}
      </Text>
      <Text fontSize={16} color={$env.accent}>
        {speed?.unit ?? $env.speedUnit}
      </Text>
    </VStack>
  );
}

先看数据，再看画面。假设这一次 speed 是 { value: 42.3, unit: "km/h" }：

1. const speed = $data.current.speed 取得本次读数。这里的 speed 是包含数值、单位的对象，不是数字本身。
2. speed?.value == null 检查是否缺测。对象不存在或数值为空时，选择 '—'；数值为 0 时不会走这个分支。
3. Math.round(speed.value) 将 42.3 四舍五入为 42，交给第一个 Text 显示。舍入只影响这张仪表的显示，不会修改原始读数。
4. 第二个 Text 显示 speed.unit。暂时没有单位时，?? $env.speedUnit 使用当前显示环境的速度单位。
5. VStack 将两个文本上下排列，spacing={8} 控制它们之间的间距。

$env.foreground 和 $env.accent 提供当前主题的文字色和强调色。主题改变时，这些颜色会随之更新。

不要用 speed?.value || '—' 判断缺测：JavaScript 会把有效的零也当成假值，导致停车时错误地显示横线。

点击编辑器底部的 预览。你应当看到上面一个较大的速度数字，下面一行较小的单位。预览中的数字是模拟值，不需要启动车辆，也不一定等于此时手机测到的速度。

接着做三个小修改，每次改完再预览：

检查不同尺寸和明暗主题。某个尺寸下内容被裁掉时，先缩小字号或间距，再观察，不要用大量 x/y 偏移去掩盖布局问题。

若出现报错，先恢复到原样，按日志中的行号检查。预览时右上角是 日志；关闭预览回到编辑状态后，右上角恢复为 保存。预览成功只说明这组模拟输入可以显示，实际数据还要在下一步核对。

关闭预览，点击 保存，退出编辑器后在仪表库中找到“我的车速”。再打开 更多（…）→ 编辑仪表盘，点 + 添加它，最后点 完成。

此时这张卡片改为读取实际速度。可以把它和内置车速仪表放在同一页核对：它们使用同一个基础速度字段时，数值应当对应；因小数保留方式不同，显示可能略有差别。

做到这里，第一个仪表就完成了。下一篇把“取速度”换成“取自己的 OBD 参数”，布局和显示代码可以继续沿用。