鸿蒙--Text中部分字体特殊处理

问题

Text部分字体变色,在应用中处理是很常见的操作。 RichText富文本组件,解析并显示HTML格式文本,通HTML实现,但是这个不太好用,在跟其他组件一起使用时自适应宽高的时候很难处理,要么就给固定宽高还可以。

解决方式

目前我的处理方式是:Text要显示的string做切割,然后用ForEach在Text中加Span组件,在Span组件中对文字做相应的特殊处理,这样可保证Text属性的延续,又可以处理各种特殊情况,就是拆分、计算等比较麻烦。

示例,高亮显示代码如下

export class StringUtils {
  public static readonly REGEX_B_S = "<B>"
  public static readonly REGEX_B_E = "</B>"
 
  /**
   * 获取高亮字符串列表
   * @param str 原始字符串
   */
  public static getHlList(str ?: string, regex ?: string): HlContent[] {
    if (str == undefined) {
      return []
    }
 
    let list: HlContent[] = []
    if (regex == undefined || !str.includes(regex)) {
      let content = new HlContent()
      content.content = str
      list.push(content)
      return list
    }
 
    if (StringUtils.REGEX_B_S == regex) {
      let splitStr: string[] = str.split(regex)
      for (let i = 0; i < splitStr.length; i++) {
        let temp = StringUtils.getHlList(splitStr[i], StringUtils.REGEX_B_E)
        if (temp != null && temp.length > 0) {
          list = list.concat(temp)
        }
      }
    }
    if (StringUtils.REGEX_B_E == regex) {
      let content1 = new HlContent()
      content1.isHl = true
      content1.content = str.substring(0, str.indexOf(regex))
      list.push(content1);
 
      let startIndex = str.indexOf(regex) + StringUtils.REGEX_B_E.length
      let endIndex = str.length
      if (startIndex < endIndex) {
        let content2 = new HlContent()
        content2.content = str.substring(startIndex, endIndex)
        list.push(content2);
      }
    }
 
    return list
  }
}
 
export class HlContent {
  content: string = ""
  isHl: boolean = false
}
 
import { HlContent, StringUtils } from './StringUtils';
@Entry
@Component
struct Index {
  @State text : string = '测试一下<B>高亮</B>其他位置再来一个<B>高亮</B>'
  build() {
    Column(){
      Text(){
        ForEach(StringUtils.getHlList(this.text, StringUtils.REGEX_B_S), (item: HlContent) => {
          if (item != null && item.content != null && item.content.length > 0) {
            if (item.isHl) {
              Span(item.content).fontColor("#ffff4500")
            } else {
              Span(item.content).fontColor("#ff000000")
            }
          }
        })
      }.fontSize(18).textOverflow({ overflow: TextOverflow.Ellipsis })
      .maxLines(1).fontWeight(FontWeight.Bold).margin({top:8})
    }
  }
}

总结

示例中只是一种情况的处理,可自行根据需求特殊处理。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容