基于measure实现的文本测量

场景描述

• 场景一：当文本的内容超过指定的行数时显示 ...展开，当所有文本展开后，最后面跟着收起。
• 场景二：搜索框展示历史记录，单个子组件超过固定长度后展示省略号，固定只展示两行，超出的文字被截断，通过点击按钮展示后续文本内容

方案描述

场景一

当文本的内容超过指定的行数时显示 ...展开，当所有文本展开后，最后面跟着收起

效果图

方案

1、文本默认超过两行时，直接截断，在截断文本后添加...展开

2、测量两行文本和全部文本的高度，当全部文本的高度超过两行文本的高度时进行展开的逻辑

3、文本全部展开后，点击收起，所有文本全部收齐变成固定的两行

核心代码

文本收起态（即展开逻辑）

collapseText(): void {
  //判断文本是否需要展开
  if (!this.needProcess) {
    return;
  }
  let titleSize : SizeOptions = measure.measureTextSize({
    textContent: this.rawTitle,
    constraintWidth: this.titleWidth,
    fontSize: 20
  })
  //测量最大行数（两行）限制的高度，
  let twoLineSize : SizeOptions = measure.measureTextSize({
    textContent: this.rawTitle,
    constraintWidth: this.titleWidth,
    fontSize: 20,
    maxLines: this.MAX_LINES
  })
  //文本未超过限制行数，不进行展开、收起处理
  if (Number(titleSize.height) == Number(twoLineSize.height)) {
    this.needProcess = false;
    return;
  }

  console.log('test row height:' + titleSize.height)
  console.log('test twoLineSize height:' + twoLineSize.height)
  //clipTitle被截取的文本，rawtitle只全部的文本
  let clipTitle: string = this.rawTitle
  //EXPAND_STR将展开这个文本赋值给最后一个span
  this.lastSpan = this.EXPAND_STR;
  while (Number(titleSize.height) > Number(twoLineSize.height)) {
    //判断是否展开
    this.expanded = true;
    clipTitle = clipTitle.substring(0, clipTitle.length - 1);
    titleSize = measure.measureTextSize({
      //文本总共被分成三段，展示的则是被截取的文本+省略号+最后的展开或收起的文字
      textContent: clipTitle + this.ellipsis + this.lastSpan,
      constraintWidth: this.titleWidth,
      fontSize: 20
    })
    console.log("test while clipTitle:" + clipTitle)
    console.log("test while clipTitle height:" + titleSize.height)
  }
  console.log("test clipTitle:" + clipTitle)
  this.title = clipTitle + this.ellipsis
  this.expanded = false;
}

// 文本展开态（即收起逻辑）
expandText(): void {
  console.log('testTag: ' + this.needProcess);
  if (this.needProcess) {
  //文本已经展开了，就需要将最后一个文本替换成收起的样式
  this.lastSpan = this.COLLAPSE_STR;
  this.expanded = true;
  this.title = this.rawTitle;
  }
}

场景二

搜索框展示历史记录，单个子组件超过固定长度后展示省略号，固定只展示两行，超出的文字被截断，通过点击按钮展示后续文本内容。

效果图

方案

1、历史记录固定只展示两行，超出的均被截断

2、单个文本有固定尺寸，超长后会展示省略号

3、通过点击按钮可以展示出所有的历史记录

核心代码

获取屏幕的宽度

//子组件的最大宽度，目前是定死的
const childMaxWidth:number = 325 //为了方便后续计算，这里的宽度数值为px
let displayClass: display.Display | null = null;
let componentWidth:number = 0;
try {
  //获取屏幕宽度
  displayClass = display.getDefaultDisplaySync();
  componentWidth = displayClass.width
  console.log('---这是componentWidth',componentWidth)
} catch (exception) {
  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
}

// 监听下标和单个文字的改变
IndexChange(){
  if(this.AllWidth >= (this.restrictWidth - childMaxWidth) && this.AllWidth <= (this.restrictWidth)){
    this.newIndex = this.index
    console.log('---这是newIndex',this.newIndex)
  }
}

textChange(){
  let content:string = this.message
  this.textWidth = measure.measureText({
    textContent: content,
    fontSize: this.fontSizeData
  })
  if(this.textWidth > childMaxWidth){
    this.AllWidth += childMaxWidth
    console.log('---这是AllWidth1',this.AllWidth)

  }else{
    this.AllWidth += this.textWidth
    console.log('---这是AllWidth2',this.AllWidth)
    console.log('---textWidth',this.textWidth)
  }
}

// 对超出的文本进行判断
aboutToAppear(): void {
  // this.process();
  if(componentWidth != 0){
    this.restrictWidth =  Math.floor((parseFloat(this.FlexWidth) * componentWidth) * 0.01 )
    console.log('---这是restrictWidth',this.restrictWidth)
    console.log('---FlexWidth',(this.FlexWidth))
  }
  for(let i = 0;i < this.AllData.length;i++){
    this.message = this.AllData[i]
    this.index = i
    console.log('---index',this.index)
  }
  this.SomeData = this.AllData.slice(0,this.newIndex+1)
  this.ShowData = this.SomeData
}