HarmonyOS Text组件如何知道当前文本是否已超出maxLines?

​有一个场景是文本最多显示3行,当文本内容超过3行时需要在文本下方显示查看全文。

目前Text组件的文档没有看到API能够判断这种情况,请问有其它方法可以实现该功能吗?​

HarmonyOS
2024-10-30 10:29:31
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

请验证下如下代码能否符合您的要求。

import measure from '@ohos.measure'  
@Entry  
@Component  
struct MeasurePage {  
  @State rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排。从2月9日(除夕)00:00到2月17日(正月初八)24:00,免费9天。"  
  // @State rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会"  
  @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 =3;  
  
  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: 30  
    })  
    let twoLineSize : SizeOptions = measure.measureTextSize({  
      textContent: this.rawTitle,  
      constraintWidth: this.titleWidth,  
      fontSize: 30,  
      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 + this.suffixStr,  
        constraintWidth: this.titleWidth,  
        fontSize: 30  
      })  
      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)  
          if (this.needProcess) {  
            Span(this.suffixStr)  
              .fontColor(Color.Orange)  
              .onClick((event) => {  
                this.process();  
              })  
          }  
        }  
        .fontSize(30)  
        .fontWeight(FontWeight.Bold)  
        .id("title")  
        .width(this.titleWidth)  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-10-30 17:34:31
相关问题
如何计算文本是否溢出省略
1618浏览 • 1回复 待解决
HarmonyOS文本超出容器
163浏览 • 1回复 待解决
Text设置maxLines时使用Infinity报错
1727浏览 • 1回复 待解决
获取文本Text组件的宽度
382浏览 • 1回复 待解决
HarmonyOS Text超出显示省略号
385浏览 • 1回复 待解决
HarmonyOS 如何知道组件复用是否生效
346浏览 • 1回复 待解决
Text组件是否支持多行显示
1911浏览 • 1回复 待解决
Text怎么设置文本渐变?
176浏览 • 0回复 待解决
Text文本过长时如何实现上下滚动?
468浏览 • 1回复 待解决