下文本到边界尾部显示展开全部这种效果怎么实现？然后点击展开文本

// MyText.ets  
import measure from '@ohos.measure'  
import curves from '@ohos.curves';  
import { BusinessError } from '@ohos.base';  
import display from '@ohos.display';  
@Component  
@Preview  
export struct MyText {  
  // 长文本  
  @State longMessage: string = "　　走在繁华的城市街头，明空感到无比紧张。他的心跳如雷鼓般擂动着胸膛，使得身上的伪装仿佛随时都要被揭开。然而，他仍然保持着冷静，凭借着过人的胆识与智慧，成功地躲过了敌人的层层封锁。\n" +  
    "\n" +  
    "　　最终，明空来到了敌对帮派的老巢。此时此刻，那里的守卫正沉浸在欢庆的氛围中，丝毫没有察觉到即将来临的危机。明空深吸一口气，压抑住内心的激动，悄然潜入了这座古老的建筑。\n"  
  // 最大显示行数  
  @State lines: number = 3;  
  // 长文本状态（展开 or 收起）  
  @State collapseText: string = '....全文'  
  // 屏幕宽度  
  screenWidth: number = 0;  
  // 是否需要显示"展开"字样（注：当文本长度较短时就不需要“展开”）  
  @State isExpanded: boolean = false  
  // 测量文本宽度  
  @State textWidth: number = measure.measureText({  
    textContent: this.longMessage,  
    fontSize: 24  
  })  
  // 获取当前所有的display对象  
  promise: Promise<Array<display.Display>> = display.getAllDisplays()  
  aboutToAppear() {  
    console.log(`文本宽度为：${this.textWidth}`)  
    this.promise.then((data: Array<display.Display>) => {  
      console.log(`所有的屏幕信息：${JSON.stringify(data)}`)  
      this.screenWidth = data[0]["width"]  
      // 屏幕宽度 * 最大行数 * 组件宽度比例 和 文字测量宽度  
      this.isExpanded = this.screenWidth * this.lines * 0.8 <= this.textWidth  
      console.log("this.isExpanded")  
    }).catch((err: BusinessError) => {  
      console.error(`Failed to obtain all the display objects. Code: ${JSON.stringify(err)}`)  
    })  
  }_x000D_  
  /******/_x000D_  
  build() {  
    Row() {  
      Column() {  
        if (true) {  
          Stack({ alignContent: Alignment.BottomEnd }) {  
            Text(this.longMessage)  
              .fontSize(24)  
              .fontColor(Color.Black)  
              .maxLines(this.lines)  
              .width('100%')  
            Row() {  
              Text(this.collapseText)  
                .fontSize(24)  
                .fontColor(Color.Red)  
                .backgroundColor(Color.White)  
            }  
            .justifyContent(FlexAlign.End)  
            .onClick(() => {  
              if (this.collapseText == '....全文') {  
                this.collapseText = '收起';  
                // 展开动画  
                animateTo({  
                  duration: 150,  
                  curve: curves.springMotion(0.5, 0.8),  
                }, () => {  
                  this.lines = -1; // 使得设置的最大行属性无效  
                })  
              } else {  
                this.collapseText = '....全文';  
                // 收起动画  
                animateTo({  
                  duration: 100,  
                  curve: Curve.Friction,  
                }, () => {  
                  this.lines = 3; // 只显示3行  
                })  
              }  
            })  
          }  
        }  
        else {  
          Text(this.longMessage)  
            .fontSize(24)  
            .fontColor(Color.Black)  
        }  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}  
@Entry  
@Component  
struct Index {  
  build(){  
    Column(){  
      MyText()  
    }  
  }  
}