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%') } }
鸿蒙-高亮显示搜索的文字
于 2024-07-10 10:30:07 首次发布