设计清晰易读的仪表

做仪表时，可以先决定一个最重要的信息，再围绕它安排其他内容。可读性往往比增加更多装饰更有帮助。

先建立信息层级

建议一张卡片只保留一项主读数，搭配少量辅助信息。例如：

主读数	辅助信息	合适的形式
速度	单位、进度范围	大号数字 + 小号单位 + 进度条
合成 G 值	横向、纵向方向	圆盘 + 小字读数
方位	方位角度	指针 + 方位文字
行程距离	移动时间、本次峰值	多行小面板
当前位置	定位精度	地图 + 清晰的标题区域

优先跟随环境颜色

const ink = $env.foreground;
const accent = $env.accent;
const muted = $env.dark ? '#FFFFFF99' : '#12171C99';

不必给整个仪表填不透明背景。外层卡片已经提供自己的背景；保留透明绘图，可以让作品更好地融入 CapDrive 的动态外观。

使用可用尺寸，而不是猜屏幕宽度

从 $env.width、$env.height 计算图形尺寸；若使用 CardContent，通过 renderer 的 metrics 扣除标题和推荐边距。

<CardContent title="速度" renderer={m => {
  const bodyWidth = Math.max(0, $env.width - m.supportedGapLeft - m.supportedGapRight);
  return <Text width={bodyWidth} fontSize={64} minimumScaleFactor={0.5}
    color={$env.foreground}>78</Text>;
}}/>

这里的 78 是设计占位数字，接入真实数据时请改为当前速度字段。

让变化容易理解

• 数字变化：使用 contentAnimation={{type: 'numericText'}}。
• 进度和位置变化：只给需要变化的属性添加 animations。
• 指针越过 359° / 0°：使用角度环绕，避免绕远路。
• 系统开启“减弱动态效果”时：让静态画面本身依然可读。

不要通过无条件修改全局变量来制造动画时钟。原生动画可以平滑显示，不需要让脚本每个显示帧都执行。

最后检查缺测与极值

至少检查速度缺失、负向 G 值、接近 0° 的方位、较长单位文字和狭小尺寸。对进度条使用 Math.max(0, Math.min(1, value)) 限制比例，对缺测读数保留 —。

图中阈值是你设置的显示规则，不能自动代替道路限速识别。用标签写清楚阈值的含义，避免把自定义范围误认为 App 获取了地图限速。