HarmonyOS 部分文本高亮解决方案

外场有一个全国地址省市区搜索选择的功能，比如搜索输入‘西’，把所有省市区有‘西关键字都通过列表’来展示，展示省市区，但是输入的西需要红色显示，用了List 嵌套richText，

RichText('<p style="font-size: 35px; color: "#3C3C3C">'+`${this.bean?.province}-${this.bean?.city}-${this.bean?.county}`.replace(this.text,"<font color='red'>" + this.text + "</font>")+ '</p>')
  .margin({left:'20vp'})
  .height('40vp')
1.
2.
3.

渲染速度非常慢。如果用span 计算太麻烦了，输入一个文本就要计算一下。有什么其他好的实现吗？

HarmonyOS

Heiang

2024-12-25 08:35:01

浏览

回答 1

按赞同

按时间

fox280

1、可以使用Text+内嵌多个Span组件

2、可以使用富文本组件RichText或图文混排组件RichEditor

3、使用StyledString，文档链接：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-styled-string.md，demo如下：

@Entry
@Component
struct LightText {
  fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Blue });
  // 创建构造入参有字符串和样式的对象mutableStyledString2
  mutableStyledString2: MutableStyledString = new MutableStyledString("test hello world", [{
    start: 0,
    length: 5,
    styledKey: StyledStringKey.FONT,
    styledValue: this.fontStyleAttr1
  }]);
  controller3: TextController = new TextController();
  async onPageShow() {
    this.controller3.setStyledString(this.mutableStyledString2)
  }
  build() {
    Column() {
      // 显示属性字符串
      Text(undefined, { controller: this.controller3 }).key('mutableStyledString2')
    }
    .width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.