HarmonyOS 怎么高亮显示搜索的文字

HarmonyOS
2024-12-24 15:56:26
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
fox280

提供如下demo:

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.
分享
微博
QQ
微信
回复
2024-12-24 19:13:22
相关问题
Text匹配文字高亮显示
1435浏览 • 1回复 待解决
HarmonyOS Text搜索关键字高亮功能
1877浏览 • 1回复 待解决
HarmonyOS Text部分文字高亮设置
942浏览 • 1回复 待解决
HarmonyOS 如何在Text中做搜索高亮?
1097浏览 • 1回复 待解决
如何识别文本中邮箱并高亮显示
1135浏览 • 1回复 待解决
HarmonyOS 文字显示问题
1023浏览 • 1回复 待解决
文字背景颜色渐变显示
2877浏览 • 1回复 待解决
过长文字如何滚动显示
2429浏览 • 1回复 待解决
HarmonyOS 怎么修改richtext内文字颜色
681浏览 • 1回复 待解决