HarmonyOS鸿蒙Next中为什么Tabs小图标没有显示出来

HarmonyOS鸿蒙Next中为什么Tabs小图标没有显示出来 在学习Tab组件的过程中，使用SymbolGIyph组件没有将图标组件显示出来，这是为什么？图标资源全部存入到app\media里面了

cke_160.png

代码如下：

cke_1047.png


更多关于HarmonyOS鸿蒙Next中为什么Tabs小图标没有显示出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

SymbolGlyph仅支持系统预置的symbol资源名，适用于独立图标的展示。开发者可以为图标设置字号大小和字体粗细，此外，SymbolGlyph 组件还支持自定义颜色渲染策略，允许开发者根据应用的主题或用户偏好调整图标颜色。同时，组件还支持动效策略，使得图标在用户交互时能够展现出生动的动画效果。

使用自定义的图片资源，可以将SymbolGlyph 组件替换为Image组件

Column(){     Image(SelectedImg)         .width(30)         .height(30)         .objectFit(ImageFit.Fill)         .fillColor(this.currentIndex===index?’#0a59f7’:’#66000000’)  //图片资源须为SVG格式         … }

更多关于HarmonyOS鸿蒙Next中为什么Tabs小图标没有显示出来的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


SymbolGlyph仅支持系统预置的symbol资源名，引用非symbol资源将显示异常。
类似这种$r(‘sys.symbol.ohos_wifi’)中引用的资源为系统预置。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-symbolglyph

Tabs小图标未显示可能原因：

  1. 图标资源未正确引入或路径错误
  2. 图标尺寸不符合规范（建议24vp）
  3. TabBar未正确配置icon属性
  4. 使用了不支持的图标格式（推荐SVG）
  5. 图标颜色与背景色相同导致视觉不可见
  6. 组件状态未正确更新

检查TabContent的icon属性配置，确保图标资源已添加到resources/base/media目录，并使用$r(‘app.media.icon_name’)引用。

根据你提供的代码截图，问题很可能出在 SymbolGlyph 组件的资源引用路径上。

在 HarmonyOS Next 中，SymbolGlyph 组件用于渲染系统预定义的图标（来自 ohos_symbol_icons.json 文件）。它不能直接引用你放在 app/media 目录下的本地图片或 SVG 文件。SymbolGlyph 的 symbol 属性需要的是一个在系统图标资源文件中定义好的图标名称。

你的代码中：

SymbolGlyph({ symbol: $r('app.media.ic_home') })

$r('app.media.ic_home') 这种写法是用来引用 resources 目录下的媒体资源（如图片）的，它返回的是一个 Resource 对象，而不是 SymbolGlyph 组件所需要的图标名称字符串。

正确的做法有以下两种：

方案一：使用系统预置图标（推荐用于Tabs等标准组件）

  1. 查看系统预置的图标名称。你可以在SDK路径下的 ets\component\symbol_icons\ohos_symbol_icons.json 文件中找到所有可用的图标名，例如 ic_public_home、ic_public_search 等。
  2. 在代码中直接使用这些字符串名称：
Tabs() {
  TabContent() {
    Home()
  }
  .tabBar(this.homeTabBuilder())
}
...
@Builder homeTabBuilder() {
  Column() {
    // 直接使用系统图标名称字符串
    SymbolGlyph({ symbol: 'ic_public_home' })
      .fontSize(20)
    Text('首页')
      .fontSize(14)
  }
}

方案二：使用自定义图片作为图标 如果你确实需要使用自己设计的图标，就不应该使用 SymbolGlyph 组件，而应该使用 Image 组件。

  1. 将你的图标文件（如 home.png 或 home.svg）放入 resources/base/media/ 目录。
  2. 在 TabBuilder 中使用 Image 组件加载：
@Builder homeTabBuilder() {
  Column() {
    // 使用Image组件加载自定义图片资源
    Image($r('app.media.ic_home'))
      .width(20)
      .height(20)
    Text('首页')
      .fontSize(14)
  }
}

总结： SymbolGlyph 组件与 Image 组件的用途不同。SymbolGlyph 专门用于渲染系统预定义的符号字体图标，其资源是内置的。要显示项目中的自定义图片，必须使用 Image 组件。根据你的需求，选择对应的组件和资源引用方式即可解决图标不显示的问题。

回到顶部