文字、素材与图标

Text 显示文字，Image 显示已经导入的本地素材，Symbol 显示系统 SF Symbols 图标。它们共享尺寸、位置、透明度和基础效果属性。

Text

属性	值	用途
fontSize	数字，点	字号
fontWeight	ultraLight、thin、light、regular、medium、semibold、bold、heavy、black	字重
fontDesign	default、rounded、monospaced、serif	字体设计
monospacedDigits	布尔值，默认 true	数字等宽，减少读数变动时的跳动
letterSpacing	数字	字距
color	绘图颜色	文字颜色
alignment	leading、center、trailing	对齐
minimumScaleFactor	0.01…1	受限尺寸中可缩小到原字号的比例
contentAnimation	对象	文字内容变化时的过渡

<Text width={160} height={80} fontSize={64} fontWeight="light"
  fontDesign="rounded" monospacedDigits={true}
  minimumScaleFactor={0.5} color={$env.foreground}
  contentAnimation={{type: 'numericText'}}>
  {$data.current.speed === null ? '—' : Math.round($data.current.speed)}
</Text>

字数较长时，不要只依赖缩小字号；也应缩短标签、增加宽度或调整信息层级。组件没有网页 font-family 或 CSS 样式对象。

Image

属性	值	用途
source	本地素材标记	例如素材管理复制出的哈希文件名
contentMode	fit / fill	完整显示或填充裁切
width / height	数字、auto、fill	素材显示区域
color	颜色，可选	适用图像的颜色处理；照片通常保留原色

<Image source="badge.png" width={64} height={64} contentMode="fit"/>

上例的名称只有在对应素材存在时才有效。source 不是网络地址，不要填写 https://... 或 iOS 本地绝对路径。

Symbol

<Symbol name="location.north.fill" width={24} height={32} color={$env.accent}/>
<Symbol name="speedometer" width={24} height={24} color={$env.foreground}/>

图标名称需在设备系统支持的 SF Symbols 范围内。不同 iOS 版本可用的名称不完全相同，建议使用常见名称，并在目标设备预览。

Image source="system:location.fill" 也可引用系统图标；一般使用 Symbol 更直观。名称 Symbol 在 JSX 中指绘图组件，不影响普通 JavaScript 的 Symbol 标准能力。

文字和图标并排

function main() {
  return <HStack spacing={6}>
    <Symbol name="location.fill" width={14} height={14} color={$env.accent}/>
    <Text fontSize={14} color={$env.foreground}>
      {$data.current.heading === null ? '—' : Math.round($data.current.heading) + '°'}
    </Text>
  </HStack>;
}

为需要旋转的图标外包一层 Transform。不要直接把 rotation 传给 Symbol。