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部分文高亮设置
1287浏览 • 1回复 待解决
HarmonyOS代码封装解决方案
2136浏览 • 1回复 待解决
HarmonyOS 通知推送解决方案
1899浏览 • 1回复 待解决
HarmonyOS事件通信能力解决方案
2510浏览 • 1回复 待解决
HarmonyOS 音频播放组件解决方案
1419浏览 • 1回复 待解决
确认网络状况解决方案
2233浏览 • 1回复 待解决
高级图表实现解决方案
2079浏览 • 1回复 待解决
HarmonyOS C++模块引用解决方案
1977浏览 • 1回复 待解决
HarmonyOS 滚动事件相关的解决方案
1255浏览 • 1回复 待解决
HarmonyOS有访问相册有解决方案
1568浏览 • 1回复 待解决
抓包应用,求解决方案
3297浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
2184浏览 • 1回复 待解决
HarmonyOS 音视频处理相关解决方案
2441浏览 • 1回复 待解决
HarmonyOS 卡片列表网络图片解决方案
1481浏览 • 1回复 待解决
HarmonyOS webrtc同屏功能的解决方案
1324浏览 • 1回复 待解决
应用包体积大小优化解决方案
2256浏览 • 1回复 待解决
图片存储解决方案谁知道啊?
3941浏览 • 1回复 待解决
开发疑难问题如下,求解决方案
1470浏览 • 1回复 待解决
支持图文混排组件及解决方案
1486浏览 • 1回复 待解决
text怎么更改部分文字颜色
8519浏览 • 1回复 待解决