HarmonyOS 鸿蒙Next Text实现展开收起

参考demo

~~~

import measure from '[@ohos](/user/ohos).measure'

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

 }
}