HarmonyOS Text搜索关键字高亮功能

class Tmp {  
  a: MutableStyledString  
  b: TextController  
  c: string  
  constructor(a: MutableStyledString, b: TextController, c: string) {  
    this.c = c  
    this.a = a  
    this.b = b  
  }  
};  
@Entry  
@Component  
struct Page240108114409062 {  
  @State searchValue: string = '';  
  @State dataArr: string[] = [  
    "diyi第一段a数据",  
    "第二段ab数据",  
    "第三段b数据",  
    "第四d段数据",  
    "第五cd段数据",  
    "第六段数据"  
  ]  
  @State showArr: Tmp[] = []  
  count: number = 0  
  fontStyleAttr1: TextStyle = new TextStyle({ fontColor: Color.Red });  
  fontStyleAttr2: TextStyle = new TextStyle({ fontColor: Color.Blue });  
  mutableStyledString2: MutableStyledString = new MutableStyledString("test hello world", [{  
    start: 0,  
    length: 5,  
    styledKey: StyledStringKey.FONT,  
    styledValue: this.fontStyleAttr1  
  }]);  
  controller3: TextController = new TextController();  
  build() {  
    Row() {  
      Column() {  
        Search({ value: $$this.searchValue, placeholder: 'Type to search...' })  
          .searchButton('SEARCH')  
          .width('90%')  
          .height(40)  
          .backgroundColor('#F5F5F5')  
          .placeholderColor(Color.Grey)  
          .placeholderFont({ size: 14, weight: 400 })  
          .textFont({ size: 14, weight: 400 })  
          .margin(20)  
          .onChange(() => {  
            this.showArr = []  
            this.controller3.setStyledString(this.mutableStyledString2)  
            this.dataArr.filter((item: string) => {  
              let index = item.indexOf(this.searchValue)  
              if (this.searchValue && index != -1) {  
                // MutableStyledString 要高亮的是列表，多关键字匹配的场景在里面加属性就可以  
                let mutableStyledString = new MutableStyledString(item, [{  
                  start: index,  
                  length: this.searchValue.length,  
                  styledKey: StyledStringKey.FONT,  
                  styledValue: this.fontStyleAttr1  
                },  
                  {  
                    start: item.length - 1,  
                    length: 1,  
                    styledKey: StyledStringKey.FONT,  
                    styledValue: this.fontStyleAttr2  
                  }])  
                let controller = new TextController()  
                this.count += 1  
                this.showArr.push(new Tmp(mutableStyledString, controller, this.count.toString()))  
                console.log("mutableStyledString comntent:" + mutableStyledString.getString() + this.showArr.length);  
              }  
            })  
          })  
        ForEach(this.showArr, (item: Tmp) => {  
          ListItem() {  
            Row() {  
              Text(undefined, { controller: item.b })  
                .onAppear(() => {  
                  item.b.setStyledString(item.a)  
                })  
            }.width("100%").height(40).justifyContent(FlexAlign.Center)  
          }  
        }, (item: Tmp) => item.c)  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.