HarmonyOS鸿蒙Next中NavDestination的menu属性使用Symbol图标不显示

HarmonyOS鸿蒙Next中NavDestination的menu属性使用Symbol图标不显示

.menus([{
  value: '',
  icon: $r('sys.symbol.speaker_wave_3'),
  action: () => {
    this.speak.startSpeak(this.settings.content)
  }
}])
使用官方内置图标并不会显示
5 回复

这样用的：

.menus([{
        value: '',
        icon: $r('sys.symbol.speaker_wave_3'),
        symbolIcon: new SymbolGlyphModifier($r('sys.symbol.speaker_wave_3')),
        action: () => {
                //...
        }
}])

cke_629.png

更多关于HarmonyOS鸿蒙Next中NavDestination的menu属性使用Symbol图标不显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


NavDestination 的 menus 里使用系统 Symbol 时，不能只填 icon。icon 更偏图片/资源图标；Symbol 图标需要走 symbolIcon，并传 SymbolGlyphModifier。

可以这样写：

.menus([{
value: '朗读',
symbolIcon: new SymbolGlyphModifier($r('sys.symbol.speaker_wave_3')),
action: () => {
this.speak.startSpeak(this.settings.content)
}
}])

如果仍不显示，再确认三点：当前 API/SDK 是否支持该 sys.symbol；NavDestination 是否配合 Navigation 使用且标题栏显示；菜单数量是否超过竖屏/横屏限制导致被折叠到更多菜单里。已有回复里的写法就是关键点，主要是把 icon 换成 symbolIcon。

期待解决，

NavDestination的menu属性使用Symbol图标不显示，常见原因：

  • 未在menu的item中正确配置symbol属性（如ohos:icon="$media:xxx"应改为ohos:symbol="$r('sys.symbol.xxx')"）。
  • 使用的Symbol名称无效或未在resources/base/element/symbol.json中声明。
  • SDK版本不满足要求（需HarmonyOS NEXT 5.0及以上）。
  • 检查menu的icon是否被错误赋值为位图资源，而非Symbol资源类型。

当前NavDestination的menu属性内置菜单项图标暂不支持直接使用Symbol资源。

$r('sys.symbol.xxx') 返回的是系统符号资源，鸿蒙Next的NavigationMenuItem渲染引擎尚未适配此类图标字体，导致无法显示。

解决办法：将图标替换为普通图片资源（如 $r('app.media.icon_speaker')），使用png/webp等位图格式即可正常显示。若必须保留Symbol风格，需通过CustomBuilder自定义菜单布局，在自定义内容中使用Symbol组件实现。

回到顶部