制作第一个仪表

这一页从一张数字速度卡片开始。完成后，你会知道在哪里写代码、如何查看演示效果，以及怎样把自己的作品加入仪表盘。

1. 打开编辑器

在仪表盘打开“更多”，进入“自定义仪表”。打开右上角菜单，选择“新增仪表”。也可以点一个推荐示例，以它为基础开始。

新建后的内容是草稿；先不要急着保存，下一步会替换代码。

2. 粘贴完整代码

选中编辑器里的原始内容，用下面的代码整体替换。代码从 function main() 开始，不需要添加 import、React 或 HTML 标签。

function main() {
  const reading = $data.current;
  const speed = reading.speed;
  return <CardContent title="速度">
    <VStack spacing={6}>
      <Text fontSize={64} fontWeight="light" fontDesign="rounded"
        minimumScaleFactor={0.5} color={$env.foreground}
        contentAnimation={{type: 'numericText'}}>
        {speed === null ? '—' : Math.round(speed)}
      </Text>
      <Text fontSize={12} color={$env.accent}>{reading.speedUnit}</Text>
    </VStack>
  </CardContent>;
}

这段代码做了四件事：

1. 从 $data.current 取得当前读数。
2. 用 CardContent 提供标题和正文区域。
3. 用 VStack 把速度与单位纵向排列。
4. 有速度时显示整数；没有速度时显示 —。

iOS 原生截图

3. 打开预览

点击编辑器底部的预览按钮。在预览里分别选择“小”“中”“大”，检查：

• 数字有没有被裁掉。
• 标题和单位是否清晰。
• 中号和小号布局是否仍然留有间距。
• 切换明暗外观后，文字和背景是否有足够区分。

预览里的速度来自固定演示数据，不代表当前车辆速度。关闭预览会回到同一份草稿。

4. 做三次小修改

想改什么	修改位置	建议
标题	title="速度"	改成“我的速度表”
数字大小	fontSize={64}	先试 56，再试 72，检查小号预览
单位颜色	color={$env.accent}	保持跟随主题，或试 "#0D75B8"

只改一个位置就预览一次，比较容易定位问题。若出现错误卡片，先看错误信息中的行号和排错指南。

5. 保存并添加到仪表盘

1. 如需改名，点击编辑器顶部的名称。
2. 点击“保存”，回到自定义仪表列表。
3. 返回仪表盘，打开“编辑仪表”。
4. 在仪表选择面板中选择自己的自定义仪表，加入需要的位置，再保存仪表盘布局。

保存仪表和保存仪表盘布局是两个动作：前者保存作品，后者决定它在哪里显示。

下一步可以做什么

• 想更直观看速度：渐变速度进度条。
• 想了解不同数据：驾驶数据参考。
• 想改成地图：当前所在位置。
• 想在电脑上继续：远程编辑。