HarmonyOS 有没有办法能计算Text文本的行数?

有一个需求是当一段文本超过两行时,只显示两行文本,结尾加省略号,但是要后边要接一个"展开"按钮,如果这个按钮能自然放在文字里边就更好了,请问有什么办法能实现这个需求?

HarmonyOS
2024-10-17 11:34:32
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

参考demo:

import measure from '@ohos.measure'  
@Entry  
@Component  
struct MeasurePage {  
  @State rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排。从2月9日(除夕)00:00到2月17日(正月初八)24:00,免费9天。1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排"  
  @State title: string = this.rawTitle     
  @State suffixStr: string = ""  
  expanded: Boolean = true  
  titleWidth: number = 350  
  needProcess: boolean = true  
  ellipsis: string = "..."  
  EXPAND_STR: string = "展开"  
  COLLAPSE_STR: string = "收起"  
  MAX_LINES: number =2;  
  fontSize:number = 16  
  
  aboutToAppear(): void {  
    this.process();  
  }  
  process(): void {  
    if (this.expanded) {  
      this.collapseText();  
    } else {  
      this.expandText();  
    }  
  }  
  
  expandText(): void {  
    console.log('testTag: ' + this.needProcess);  
    if (this.needProcess) {  
      this.suffixStr = this.COLLAPSE_STR; //收起  
      this.expanded = true;  
      this.title = this.rawTitle;  
    }  
  }  
  collapseText(): void {  
    if (!this.needProcess) {  
      return;  
    }  
    let titleSize : SizeOptions = measure.measureTextSize({  
      textContent: this.rawTitle,  
      constraintWidth: this.titleWidth,  
      fontSize: this.fontSize  
    })  
    let twoLineSize : SizeOptions = measure.measureTextSize({  
      textContent: this.rawTitle,  
      constraintWidth: this.titleWidth,  
      fontSize: this.fontSize,  
      maxLines: this.MAX_LINES  
    })  
    //文本未超过限制行数,不进行展开、收起处理  
    if ((titleSize.height as number) == (twoLineSize.height as number)) {  
      this.needProcess = false;  
      return;  
    }  
    console.log('test row height:' + titleSize.height)  
    console.log('test twoLineSize height:' + twoLineSize.height)  
    let clipTitle: string = this.rawTitle  
    this.suffixStr = this.EXPAND_STR;  
    while ((titleSize.height as number) > (twoLineSize.height as number)) {  
      this.expanded = true;  
      // 可以修改其他计算算法提高性能  
      clipTitle = clipTitle.substring(0, clipTitle.length - 1);  
      titleSize = measure.measureTextSize({  
        textContent: clipTitle + this.ellipsis ,  
        constraintWidth: this.titleWidth,  
        fontSize: this.fontSize  
      })  
      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;  
  }  
  build() {  
    Row() {  
      Column() {  
        Text(){  
          Span(this.title)  
        }  
        .fontSize(this.fontSize)  
        .id("title")  
        .width(this.titleWidth)  
        if (this.needProcess) {  
          Text(this.suffixStr)  
            .fontColor(Color.Orange)  
            .onClick((event) => {  
              this.process();  
            })  
        }  
      }  
      .width('100%')  
      .alignItems(HorizontalAlign.Start)  
    }  
    .height('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-10-17 17:40:46
相关问题
HarmonyOS 有没有办法动态添加组件?
318浏览 • 1回复 待解决
有没有接口获取到组件宽度
688浏览 • 1回复 待解决
有没有什么办法给组件新增方法?
714浏览 • 1回复 待解决
HarmonyOS 是否有计算码点方法?
244浏览 • 1回复 待解决