HarmonyOS鸿蒙Next中search组件 cancelButton属性，设置img图标，真机不生效

HarmonyOS鸿蒙Next中search组件 cancelButton属性，设置img图标，真机不生效 右侧清除按钮样式。

默认值：

{ style: CancelButtonStyle.INPUT, icon: { size: ‘16vp’, color: ‘#99ffffff’, src: ’ ’ } }

当style为CancelButtonStyle.CONSTANT时，默认显示清除样式。

开发文档如上，设置本地图片，模拟器生效，但是跑到真机上，就不显示图片，图片路径均正确；

代码示例：

Search({ value: this.searchword, placeholder: '全部应用', controller: this.controller })
  .backgroundColor('#F4F4F4')
  .placeholderColor('#AAAAAA')
  .fontColor('#FF2C62DE')
  .placeholderFont({ size: 13, weight: 400 })
  .textFont({ size: 14, weight: 400 })
  .onChange((value: string) => {
    this.searchword = value
    this.getsearchword(this.searchword)
  })
  // .searchIcon({
  //   src: $r('sys.symbol.xmark_circle_fill')
  // })
  .cancelButton({
    style: CancelButtonStyle.INPUT,
    icon: {
      size: '20vp',
      src: $r('app.media.bottomMsgClose')
    }
  })
  .defaultFocus(true)
  .height('30vp')

更多关于HarmonyOS鸿蒙Next中search组件 cancelButton属性，设置img图标，真机不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

1.我尝试了一下楼主的代码我在真机和模拟器上都是能够正常运行的
真机：
cke_1111.png
模拟器：
cke_2180.png

2.我出现了一种情况不显示是因为搜索框没有文字信息

3.示例代码：

Search({ value: this.message, placeholder: '全部应用' })
  .backgroundColor('#F4F4F4')
  .placeholderColor('#AAAAAA')
  .fontColor('#FF2C62DE')
  .placeholderFont({ size: 13, weight: 400 })
  .textFont({ size: 14, weight: 400 })
  .onChange((value: string) => {
    /*           this.searchword = value
               this.getsearchword(this.searchword)*/
  })
  .searchIcon({
    src: $r('sys.symbol.xmark_circle_fill')
  })
  .cancelButton({
    style: CancelButtonStyle.INPUT,
    icon: {
      size: '20vp',
      color: '#ff3',
      src: $r('app.media.app_icon')
    }
  })
  .defaultFocus(true)
  .height('30vp')
  .margin(20)

4.参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-search#cancelbutton10

更多关于HarmonyOS鸿蒙Next中search组件 cancelButton属性，设置img图标，真机不生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


希望楼主提供一下真机版本，

这个问题一直没解决， 我真机只要是设置图片，在跑，一定是不显示， 我的真机版本系统是5.1.0.150 ，开发IED是DevEco Studio 5.0.3 Release。 求助大神， 我图片也是很正确的。 Search({ value: this.searchword, placeholder: ‘全部应用’, controller: this.controller }) .backgroundColor(’#F4F4F4’) .placeholderColor(’#AAAAAA’) .fontColor(’#FF2C62DE’) .placeholderFont({ size: 13, weight: 400 }) .textFont({ size: 14, weight: 400 }) .searchIcon({ src: $r(‘sys.symbol.magnifyingglass’) }) .cancelButton({ style: CancelButtonStyle.CONSTANT, icon: { size: 40, color: Color.Black, src: $r(‘app.media.gridMenu_icon’) } }) .onChange((value: string) => { this.searchword = value this.getsearchword(this.searchword) }) .defaultFocus(true) .height(‘30vp’) .width(‘calc(100% - 90vp)’) 图片也都是png的格式，

我设置sys.symbol 的系统UI ，也不显示，

HarmonyOS的开发者模式提供了很多实用的工具，方便我们进行调试和优化。

各位老师、伙伴，我知道原因了， 和我的真机系统和ide版本没有什么关系， 在项目里 因为我是在模块里面开发的，引用的图片名称 和别的模块里面的图片名称一样， 就会出现这个问题， 但是其实我还是觉的很奇怪， 因为模块和模块之间是单独的啊， 我修改了自己模块里面图片的名称， 然后测试，就正常展示 自己 自定义的图片了。

另外就是对使用 系统 UI 图标， 我和系统库里面对比 ，https://developer.huawei.com/consumer/cn/design/harmonyos-symbol/ 展示的感觉有点不一样，但是也生效了。

感谢各位。

真机环境下对资源路径解析更严格，$r(‘app.media.bottomMsgClose’)需要确保图片资源已正确声明在media目录且编译时被正确打包。当cancelButton的style设置为CancelButtonStyle.INPUT时，需要输入框非空才会触发显示，真机可能存在渲染策略差异。

第一先检查resources/base/media目录下是否存在bottomMsgClose图片，并且建议楼主使用.png格式；

第二使用系统内置图标

.cancelButton({
  style: CancelButtonStyle.INPUT,
  icon: {
    size: '20vp',
    src: $r('sys.media.ic_public_close') // 使用系统预置图标
  }
})

第三调整显示策略

// 显示清除按钮使输入框为空
.cancelButton({
  style: CancelButtonStyle.CONSTANT, // 修改为常量显示模式
  icon: {
    size: '20vp',
    src: $r('app.media.bottomMsgClose')
  }
})

【背景知识】

cancelButton

支持设备PhonePC/2in1TabletTVWearable

cancelButton(value: CancelButtonOptions | CancelButtonSymbolOptions)

设置右侧清除按钮样式。

Wearable设备上默认图标大小为18fp。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value CancelButtonOptions CancelButtonSymbolOptions 是

【解决方案】

为编辑状态输入内容时，显示清除按钮，使用真机版本号为5.0.0.160、DevEco Studio版本号为 5.0.4 Release Build Version: 5.0.11.100可以显示清除按钮图片。楼主真机版本是不是太低，可以升级下版本看看

@Entry
@Component
struct SearchExample {
  controller: SearchController = new SearchController();
  @State changeValue: string = '';

  build() {
    Column() {
      Search({ value: this.changeValue, placeholder: '全部应用', controller: this.controller })
        .backgroundColor('#F4F4F4')
        .placeholderColor('#AAAAAA')
        .fontColor('#FF2C62DE')
        .placeholderFont({ size: 13, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onChange((value: string) => {
          this.changeValue = value
        })
        .cancelButton({
          style: CancelButtonStyle.INPUT,
          icon: {
            size: '20vp',
            src: $r('app.media.startIcon')
          }
        })
        .defaultFocus(true)
        .height('30vp')
    }
    .width('100%')
    .height('100%')
  }
}

CancelButtonStyle枚举说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称 说明
CONSTANT 清除按钮常显样式。
INVISIBLE 清除按钮常隐样式。
INPUT 清除按钮输入样式。

你这里是 要输入的时候才会显示 这个清除的图标 如果不是这个问题 就往下分析

ResourceStr

字符串类型，用于描述字符串入参可以使用的类型。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

类型 说明
string 字符串类型。
Resource 资源引用类型，引入系统资源或者应用资源中的字符串。

看图片源头的话 是支持 string 和 Resource

我今天碰到过一个问题 就是背景图片 不能是SVG 格式 你看看你的图片类型是啥

图片类型是png格式的，应该不是资源问题， 我觉的是他组件和手机系统适配的问题， 目前还是没找到原因，

在HarmonyOS Next中，search组件的cancelButton属性设置img图标在真机不生效，通常是因为图标资源路径或格式问题。请检查图标是否放置在正确的资源目录（如resources/base/media/），并确认使用支持的图片格式（如png、jpg）。同时，确保在代码中正确引用资源，例如使用$r(‘app.media.icon’)。

这是一个在HarmonyOS Next开发中常见的资源引用问题。根据您提供的代码和描述，问题核心在于真机环境与模拟器环境对资源引用的处理差异。

问题分析： 您使用了 $r('app.media.bottomMsgClose') 来引用本地图片资源。在模拟器中，资源路径解析通常比较宽松，能够正确加载。但在真机环境下，资源打包和加载机制更为严格，可能导致以下情况：

  1. 资源未正确打包：检查 media 文件夹中 bottomMsgClose 图片资源是否已正确添加到项目的 resources 目录下，并确保在 ResourceManager 中有对应的资源索引。

  2. 资源格式或路径问题：真机可能对图片格式、尺寸或资源ID的命名有更严格的要求。请确认：

    • 图片文件是否放置在正确的密度目录下（如 base/media/、zh/media/ 等）。
    • 资源名称 bottomMsgClose 在 resources/base/media/ 下的 media.json 文件中是否有正确定义。

建议排查步骤：

  • 检查资源文件：确认 resources/base/media/ 目录下存在 bottomMsgClose 图片文件（如 .png, .jpg 等格式），并且 media.json 中有类似 "bottomMsgClose": "$media:bottomMsgClose" 的条目。
  • 使用绝对路径尝试：作为临时测试，可以尝试使用图片的绝对路径（如 /storage/emulated/0/...）来确认是否是资源引用问题。但正式开发中不推荐此方式。
  • 查看日志：在真机上运行应用时，通过DevEco Studio的日志查看器过滤 ResourceManager 或相关错误信息，看是否有资源加载失败的报错。
  • 清理并重建：尝试清理项目（Build > Clean Project）并重新构建（Build > Rebuild Project），有时可以解决资源索引未更新的问题。

如果以上步骤仍无法解决，问题可能涉及更深层的框架适配或真机系统版本差异。

回到顶部