HarmonyOS - 截取文本实现（xxxxxxx… 更多）折叠/展开显示效果

场景描述：

当文本的内容超过指定的最大行数时显示 ”... 更多“ 的文本效果，并且可添加单独点击”... 更多“事件

需要用到的 ArkTS API ：

MeasureText、 Text、 Span

实现效果

实现效果

截取需要展示的文本

import { display, MeasureText } from "@kit.ArkUI"
// 定义参数接口
export  interface LKClipTextParam {
  // 要截断的原始文本
  rawText:string;
  // 文本显示的字体大小
  fontSize:number;
  // 需展示的最大文本行数
  maxLines:number;
  // 文本宽度
  textWidth:number;
  // 尾部预留位置的 占位文本 （例： "…  更多"）
  tailText:string;
}

export  function lk_clipText(value:LKClipTextParam) {

  let textArr:string[] = value.rawText.split("")
  let truncateCountent:string = value.tailText.length ? value.tailText : "鸿蒙开发好"

  // 计算尾部文本size
  let measureTruncateWidth:number = MeasureText.measureText({
    textContent:truncateCountent,
    fontSize:value.fontSize,
  })

  let clipText:string = ""
  // 需要截取到的文本总宽度 = 单行文本宽度 * 文本最大行数 - 尾部预留出的文本宽度
  let needClipText_width:number = (vp2px(value.textWidth) *value.maxLines - measureTruncateWidth)
  for (let i = 0; i < textArr.length; i++) {

    // 已经截取到的文本宽度
    let clipText_width: number = MeasureText.measureText({
      textContent: clipText,
      fontSize: value.fontSize,
    })

    if (clipText_width >= needClipText_width) { // 判断是否已经截取够了
      break;
    }

    clipText += textArr[i]
  }

  return clipText
}

实现方法

// 判断文本是否需要折叠
isNeedDisplayIntroMore():boolean {

    let screen_width = Number(px2vp(display.getDefaultDisplaySync().width).toPrecision(5));
    // 3行文本的总宽度
    let textTotalWidth = vp2px((screen_width - 32)) * this.introMaxLines

    // 计算简介文本size
    let introTextWidth:number = MeasureText.measureText({
      textContent:this.introText,
      fontSize:14,
    })

    if (introTextWidth > textTotalWidth) {
      return true
    } else {
      return false
    }

  }

// 获取需要显示的文本
  displayIntro():string {
    let screen_width = Number(px2vp(display.getDefaultDisplaySync().width).toPrecision(5));
    let screen_height = Number(px2vp(display.getDefaultDisplaySync().height).toPrecision(5));
    return lk_clipText({
      rawText: this.introText,
      fontSize: 14,
      maxLines: this.introMaxLines,
      textWidth: (screen_width - 32),
      tailText: "学习鸿蒙开发"
    })

  }

UI

        Text() {

          if (this.viewModel.isNeedDisplayIntroMore()) {

            Span(this.viewModel.displayIntro())
            Span("…  更多")
              .onClick((event: ClickEvent) => {
                if (this.onMoreIntroClick) {
                  this.onMoreIntroClick()
                }
              })

          } else {
            Span(this.viewModel.intro)
          }

        }
        .fontSize(14)
        .fontColor(Color.White)
        .textAlign(TextAlign.Start)
        .maxLines(3)
        .lineHeight(26)
        .textOverflow({overflow:TextOverflow.Clip})