跳到主要内容

图标 Icon (SF Symbols)

显示一个 Apple SF Symbols 系统图标。无需联网、矢量缩放、和系统视觉一致。

用法

从编辑器右上角 ➕ 添加 icon,在"内容"字段填 SF Symbol 名字:

内容显示
sun.max
cloud.rain🌧
heart.fill
{icon}由 JS 决定

编辑器内置 SF Symbols 选择器(在 icon 组件的属性面板),不用自己背名字。

完整图标库参考 Apple SF Symbols(选了之后用图标的英文名)。

常用属性

属性说明
内容SF Symbol 名(例 bolt.fill)
宽 / 高显示尺寸
颜色单色 / 渐变
旋转 / 偏移特效
透明度0~1

例:根据天气状况切图标

const result = await Weather.getCurrent()
const obj = JSON.parse(result)
this.icon = obj.symbolName // Apple 直接给好了 SF Symbol 名

icon 组件内容填 {icon},会自动显示对应天气图标。

锁屏组件

锁屏的圆形 / 矩形 / 内联组件只能显示单色,SF Symbol 在这里特别合适。