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

发布于 1周前 作者 nodeper 来自 鸿蒙OS

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

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

2 回复
可以尝试demo
import measure from '@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)

    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.needProcess) {
      Text(<span class="hljs-keyword">this</span>.suffixStr)
        .fontColor(Color.Orange)
        .onClick((event) =&gt; {
          <span class="hljs-keyword">this</span>.process();
        })
    }
  }
  .width(<span class="hljs-string">'100%'</span>)
  .alignItems(HorizontalAlign.Start)
}
.height(<span class="hljs-string">'100%'</span>)

} } <button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

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

回到顶部