HarmonyOS 鸿蒙Next 文字标红的实现

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 文字标红的实现 在开发搜索结果列表的时候，需要将文章标题里面的搜索关键词标红。实现方案使用了

Text(){
 span()
 span().color(Color.red)
 span()
}

的模式。但是如果需要匹配多个关键词操作起来很麻烦。看文档鸿蒙有类似Android的Html.from()方法读取html样式文本组件RichText。但是文档说如果在长表里面有性能损坏，建议使用RichEditor。但是RichEditor不符合业务场景。

请问还有什么较优的实现方案吗？

Harmonyos Next教程
2 回复

RichText组件不支持通过设置属性与事件，来修改背景颜色、字体颜色、字体大小、动态改变内容等。在这种情况下，推荐使用Web组件。可以将以上场景写到H5页面，通过Web组件加载。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5

更多关于HarmonyOS 鸿蒙Next 文字标红的实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中实现文字标红的功能，通常涉及到UI组件和样式的管理。鸿蒙系统提供了丰富的UI框架和样式定义机制，可以通过以下步骤实现文字标红：

  1. 定义文本组件：在XML布局文件中定义Text组件，用于显示需要标红的文字。例如：
<Text
    ohos:id="$+id:my_text"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:text="这是需要标红的文字"
/>
  1. 设置文本样式：在JavaScript（或TS）代码中，通过获取Text组件的引用，并设置其文本样式为红色。鸿蒙系统支持通过SpannableString或类似机制来设置文本的局部样式。例如：
let textComponent = this.$element('my_text');
let text = "这是需要标红的文字";
let spannableString = new ohos.multimedia.text.SpannableString(text);
let foregroundColorSpan = new ohos.multimedia.text.ForegroundColorSpan(0xFFFF0000); // 红色
spannableString.setSpan(foregroundColorSpan, 3, 7, ohos.multimedia.text.Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); // 标红“需要”
textComponent.setText(spannableString);

上述代码中，setSpan方法的参数指定了要标红的文本范围（从索引3到7，即“需要”二字）。

如果问题依旧没法解决请联系官网客服,官网地址是 官网链接

回到顶部