海拔与姿态

入门 · 完整可运行示例

分别呈现海拔、侧倾和俯仰，不假定其中一个字段可用就意味着其他字段也可用。

iOS 原生截图

完整源码

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

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

function Stat({label,value,unit}) {
  return <VStack spacing={5}>
    <Text fontSize={11} color={$env.accent}>{label}</Text>
    <Text fontSize={24} color={$env.foreground}>{value===null?'—':value.toFixed(1)}</Text>
    <Text fontSize={10} color={$env.foreground}>{unit}</Text>
  </VStack>;
}
function main() {
  const r=$data.current;
  return <CardContent title="海拔与姿态">
    <HStack spacing={18}>
      <Stat label="海拔" value={r.altitude} unit="m"/>
      <Stat label="侧倾" value={r.roll} unit="°"/>
      <Stat label="俯仰" value={r.pitch} unit="°"/>
    </HStack>
  </CardContent>;
}

可以先改这些地方

位置	作用	修改建议
fontSize={24}	数据字号	三列宽度有限
spacing={18}	列间距	横屏与小卡片都应检查

在 App 中检查

1. 姿态参考未就绪时应保留 —。
2. 不要把角度缺测补成 0°。

相关参考

驾驶数据 · 函数组件