自定义仪表

外观

素材徽章 ​

入门 · 完整可运行示例

把自己的图片素材与速度读数组合在一起。示例 ZIP 已带一张可用于练习的素材。

iOS 原生截图
素材徽章的 iOS 原生截图素材徽章的 iOS 原生截图，深色模式

完整源码 ​

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

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

jsx
function main() {
  const r=$data.current;
  return <CardContent title="我的仪表">
    <HStack spacing={18}>
      <Image source="badge.png" width={64} height={64} contentMode="fit" cornerRadius={12}/>
      <VStack spacing={3}>
        <Text fontSize={44} color={$env.foreground}>{r.speed===null?'—':Math.round(r.speed)}</Text>
        <Text fontSize={12} color={$env.accent}>{r.speedUnit}</Text>
      </VStack>
    </HStack>
  </CardContent>;
}

可以先改这些地方 ​

位置作用修改建议
badge.png素材标记换成素材管理复制的完整名称
width / height显示大小不决定原始文件大小
cornerRadius={12}素材圆角按素材风格调整

在 App 中检查 ​

  1. 直接导入 ZIP 时素材应出现。
  2. 只复制代码时，必须另外添加对应图片素材并替换标记。

这个示例的边界

练习素材来自 CapDrive 示例包中的地图图片。正式作品可换成你自己的图案；当前只支持图片素材。

相关参考 ​

素材管理 · Image