如何解决HarmonyOS sdk的bug--AlphabetIndexer组件的bug解决思路 原创 精华

发布于 2021-12-8 15:03
浏览
11收藏

背景:

最近在使用ets编写一个app的时候,有一个需求会使用到字母索引器,我首先想到的是官方是否有该组件,如果有则直接拿过来使用,没有则自己自定义个组件。
然后翻阅了官方api文档,发现有AlphabetIndexer组件可以使用,于是运行官方demo,各种编译和运行报错,然后先解决编译报错,然后解决运行报错,最后结果就是运行无效果出现。最后无奈放弃该组件,然后想着自定义一个组件来实现,在自定义组件的时候又发现目前只能支持自定义属性,而没法自定义事件,这样我自定义出来的组件又不够强大,依然不满意。然后我又回头好好研究下为何官方这个组件为何运行不了,而官方又确实有运行成功的效果图。后来我想到会不会是内部使用的IDE和sdk跟我手上的不同,就像HarmonyOS的sdk7还没有出来的时候,是先推出的OpenHarmony的sdk7支持ets的,于是我新建了一个OpenHarmony的项目来跑这个案例,结果能成功运行起来。这时终于看到希望了,那为何HarmonyOS上就跑不起来呢?预览器和模拟器运行都不行。

AlphabetIndexer组件demo代码和运行效果

@Entry
@Component
struct AlphabetIndexerComponent {
  private value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']

  build() {
    AlphabetIndexer({ ArrayValue: this.value, selected: 0 })
      .selectedColor(0xffffff) // 选中颜色
      .popupColor(0xFFFAF0) // 弹出框颜色
      .selectedBackgroundColor(0xCCCCCC) // 选中背景颜色
      .popupBackground(0xD2B48C) // 弹出框背景颜色
      .usingPopup(true) // 是否显示弹出框
      .selectedFont({ size: 16, weight: FontWeight.Bolder }) // 选中的样式
      .popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框的演示
      .itemSize(28) // 每一项的大小正方形
      .alignStyle(IndexerAlign.Left) // 左对齐
      .onSelected((index: number) => {
        console.info(this.value[index] + '被选中了') // 选中的事件
      })
      .margin({ left: 50 })
  }
}

如何解决HarmonyOS sdk的bug--AlphabetIndexer组件的bug解决思路-开源基础软件社区

Bug分析

这里主要的思路就是拿不正常的HarmonyOS工程和正常的OpenHarmony工程做比对。

编写好上述demo代码之后,在HarmonyOS中编译就会报错,IDE会直接在代码中飘红,截图如下:
如何解决HarmonyOS sdk的bug--AlphabetIndexer组件的bug解决思路-开源基础软件社区

遇到这个问题,大家首先想到的肯定是查看函数的定义,然后修改自己的代码去让编译通过。我起初也是这么做的。
下面我们看下AlphabetIndexer对应的源码,截图如下
如何解决HarmonyOS sdk的bug--AlphabetIndexer组件的bug解决思路-开源基础软件社区
这时候会发现就是一个字符A的大小写不匹配的小问题,然后我自然将demo中的代码的参数ArrayValue改成arrayValue,此时编译器就不会报错了。然后使用预览器运行的话直接会crash,如下图
如何解决HarmonyOS sdk的bug--AlphabetIndexer组件的bug解决思路-开源基础软件社区
由于预览器没有具体报错的日志,下面使用模拟器运行,看到日志如下图
如何解决HarmonyOS sdk的bug--AlphabetIndexer组件的bug解决思路-开源基础软件社区
这个日志依然帮助不大。
之前一直在怀疑是写的demo代码的问题,后面创建了OpenHarmony工程执行相同代码ok之后对比下OpenHarmony的sdk中的AlphabetIndexer组件的代码如下图:
如何解决HarmonyOS sdk的bug--AlphabetIndexer组件的bug解决思路-开源基础软件社区

这时我发现这里sdk中的ArrayValue参数是大写字母A。此时可以确认问题就是来源于此了。
那么如何解决该问题呢?

问题解决,修改HarmonyOS Sdk中的代码

修改SDK目录下的component目录下的alphabet_indexer.d.ts文件

将该文件中的arrayValue修改为ArrayValue
修改完该文件之后,只能使IDE不飘红,但是依然无法通过编译。
下面继续寻找原因,追寻下ets是如何参与编译的。于是找到了build-tools\ets-loader这个关键文件夹。

修改SDK目录下的build-tools\ets-loader\declarations下的alphabet_indexer.d.ts代码

将该文件中的arrayValue修改为ArrayValue

经过上面两步修改之后,就可以正常在HarmomyOS上运行起来该案例了。

总结

看似一个很小的bug,实际解决过程真的非常艰辛,卡了我两天时间。如果不是我偶然想到使用OpenHarmony Sdk去试一下,可能依然没定位原因。然后定位原因之后,如何去修改sdk呢?我之前写过一篇如何通过OpenHarmony源码来编译sdk的文章,但是不用这么复杂,即使我编译了也不能直接拿来给发行版的HarmonyOS进行使用。于是想想ts这类脚本语言能不能直接通过修改本地的sdk文件解决下,最终找到了上面的解决方法进行解决。当然此问题治标不治本,该问题我已经反馈给了华为,并且提供了解决方案,后面还是通过官方更新SDK来彻底解决。
遇到问题不要放弃,耐心耐心再耐心,说不定啥时候灵感就来了。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-12-8 22:20:04修改
13
收藏 11
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐