HarmonyOS 鸿蒙Next 有没有办法能计算Text文本的行数

HarmonyOS 鸿蒙Next 有没有办法能计算Text文本的行数

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

2 回复

可以尝试demo

import measure from '[@ohos](/user/ohos).measure'
[@Entry](/user/Entry)
[@Component](/user/Component)
struct MeasurePage {
 [@State](/user/State) rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排。从2月9日(除夕)00:00到2月17日(正月初八)24:00,免费9天。1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排"
 // [@State](/user/State) rawTitle: string = "1月16日,国务院新闻办公室举行新闻发布会"
 [@State](/user/State) title: string = this.rawTitle //
 [@State](/user/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 + this.suffixStr,
       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%')
 }
}

更多关于HarmonyOS 鸿蒙Next 有没有办法能计算Text文本的行数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next可以计算Text文本的行数。具体方法如下:

在HarmonyOS鸿蒙Next系统中,可以通过以下两种主要方式计算Text组件中文本的行数:

  1. 利用@ohos.measure API:该API可以返回多行文字的宽高信息,虽然没有直接返回行数,但可以根据业务场景通过计算得到。具体方法是,先不限定行数测量文本高度,再限定一个最大行数(如3行)测量高度,通过比较两个高度值可以判断文本是否超过了限定的行数。
  2. 利用Text组件的Layout信息:Text组件在渲染完成后会生成Layout对象,该对象包含了文本的布局信息,包括行数。通过调用Text组件的getLayout()方法获取Layout对象,然后调用getLineCount()方法可以直接获取行数。

需要注意的是,Text组件的行数可能会受到布局宽度、高度、字体大小、行距等因素的影响。因此,在获取行数时,应确保Text组件的布局和字体设置已经确定。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部