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')

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

HarmonyOS
2024-12-25 08:35:01
浏览
收藏 0
回答 1
待解决
回答 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%')
  }
}
分享
微博
QQ
微信
回复
2024-12-25 10:30:34
相关问题
HarmonyOS Text部分文高亮设置
201浏览 • 1回复 待解决
HarmonyOS 通知推送解决方案
274浏览 • 1回复 待解决
HarmonyOS代码封装解决方案
891浏览 • 1回复 待解决
高级图表实现解决方案
934浏览 • 1回复 待解决
确认网络状况解决方案
821浏览 • 1回复 待解决
HarmonyOS事件通信能力解决方案
1149浏览 • 1回复 待解决
HarmonyOS 音频播放组件解决方案
260浏览 • 1回复 待解决
抓包应用,求解决方案
2241浏览 • 1回复 待解决
HarmonyOS 滚动事件相关的解决方案
68浏览 • 1回复 待解决
HarmonyOS有访问相册有解决方案
561浏览 • 1回复 待解决
HarmonyOS C++模块引用解决方案
716浏览 • 1回复 待解决
HarmonyOS webrtc同屏功能的解决方案
51浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
969浏览 • 1回复 待解决
HarmonyOS 卡片列表网络图片解决方案
304浏览 • 1回复 待解决
HarmonyOS 音视频处理相关解决方案
731浏览 • 1回复 待解决
开发疑难问题如下,求解决方案
484浏览 • 1回复 待解决
支持图文混排组件及解决方案
465浏览 • 1回复 待解决
图片存储解决方案谁知道啊?
2697浏览 • 1回复 待解决
应用包体积大小优化解决方案
742浏览 • 1回复 待解决
webview中跨域问题解决方案
3017浏览 • 1回复 待解决