HUD 主题与 HDR

进阶 · 完整可运行示例

用展示模式调整读数字重，并为需要增强的绘图颜色显式标记 HDR。

iOS 原生截图

完整源码

下载可导入 ZIP · 下载 JSX 源码

复制代码到新建仪表，或在 App 内导入 ZIP。

function main() {
  const hud=$env.mode==='hud';
  const r=$data.current;
  return <CardContent title={hud?'HUD 速度':'速度'}>
    <VStack spacing={6}>
      <Text fontSize={hud?72:58} fontWeight={hud?'semibold':'light'}
        minimumScaleFactor={0.5} color={HDR($env.foreground)}>
        {r.speed===null?'—':Math.round(r.speed)}
      </Text>
      <Text fontSize={12} color={HDR($env.accent)}>{r.speedUnit}</Text>
    </VStack>
  </CardContent>;
}

可以先改这些地方

位置	作用	修改建议
hud?72:58	不同模式下字号	需要再检查小卡片
HDR(...)	标记增强颜色	不等于强制开启 HDR

在 App 中检查

1. 明暗预览中的基础颜色必须可读。
2. 预览与 PNG 不会显示实际 HDR 亮度。
3. mode 不表示 HDR 开关状态。

这个示例的边界

配图仅演示布局与 SDR 基础颜色。真实 HDR 表现受系统、屏幕和 CapDrive 增强设置影响。

相关参考

显示环境 · HDR 颜色