Text匹配文字高亮显示

在搜索框中搜索想要的文字,Text就回进行匹配,并且高亮显示。

HarmonyOS
2024-05-26 15:18:50
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
cbaby

使用的核心API

Text

核心代码解释

@Entry 
@Component 
struct Page240108114409062 { 
  @State searchValue: string = ''; 
  @State dataArr: string[] = [ 
    "第一段数据", 
    "第二段数据", 
    "第三段数据", 
    "第四段数据", 
    "第五段数据", 
    "第六段数据", 
    "第七段数据", 
    "第八段数据", 
    "第九段数据", 
    "第十段数据", 
  ] 
  @State showArr: string[] = [] 
 
  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.dataArr.filter((item: string) => { 
              return this.searchValue && item.indexOf(this.searchValue) != -1 
            }) 
            console.log(JSON.stringify(this.showArr)) 
          }) 
        List() { 
          ForEach(this.showArr, (item: string) => { 
            ListItem() { 
              Row() { 
                // RichText(item) 
                Text() { 
                  Span(this.searchValue).fontColor(Color.Red) 
                  Span(item.replace(this.searchValue, "")) 
                } 
              }.width("100%").height(40).justifyContent(FlexAlign.Center) 
            } 
          }) 
        } 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

注明适配的版本信息

  • IDE版本:4.1.3.500
  • SDK版本:4.1.5.6

实现效果

分享
微博
QQ
微信
回复
2024-05-27 20:22:35
相关问题
文字背景颜色渐变显示
916浏览 • 1回复 待解决
鸿蒙 | Text 内容显示问题
8730浏览 • 5回复 待解决
text怎么更改部分文字颜色
5734浏览 • 1回复 待解决
Text组件是否支持多行显示
782浏览 • 1回复 待解决
如何获取Text组件中文字的宽度
712浏览 • 1回复 待解决
过长文字如何滚动显示
754浏览 • 1回复 待解决
Text怎么显示带html标签的文本
3076浏览 • 1回复 待解决
PersistentStorage实现手机号登录匹配
465浏览 • 1回复 待解决
mysql 如何匹配多个 like 条件?
2705浏览 • 1回复 待解决
p40 和phone类型不匹配
3521浏览 • 1回复 待解决
mysql正则表达式匹配数字
878浏览 • 1回复 待解决
文字动画效果如何实现
802浏览 • 0回复 待解决