美文网首页
鸿蒙--Text中部分字体特殊处理

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

作者: 逃离_102 | 来源:发表于2024-01-10 11:39 被阅读0次

    问题

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

    总结

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

    相关文章

      网友评论

          本文标题:鸿蒙--Text中部分字体特殊处理

          本文链接:https://www.haomeiwen.com/subject/xohzndtx.html