文本只显示三行，超过部分在文字后显示省略号和展开按键，点击按钮进行展开，HarmonyOS该如何实现

import { curves }from '@kit.ArkUI' 
import { display } from '@kit.ArkUI'; 
import { BusinessError } from '@kit.BasicServicesKit'; 
 
@Component 
@Preview 
export struct MyText { 
  // 长文本 
  @State longMessage: string = "　　走本文选择作为典型页面进行开发，遵从多设备的“差异性”、“一致性”、“灵活性”和“兼容性”\n" + 
    "\n" + 
    "　　已定义的类型，包括HTML类型，WANT类型，纯文本类型，URI类型，PIXELMAP类型；也可以是自定义的MIME类型，开发者可自定义此参数值,已定义的类型，包括HTML类型，WANT类型，纯文本类型，URI类型，PIXELMAP类型；也可以是自定义的MIME类型，开发者可自定义此参数值。" 
  // 最大显示行数 
  @State lines: number = 3; 
  // 长文本状态（展开 or 收起） 
  @State collapseText: string = '展开全文' 
  // 屏幕宽度（单位px） 
  screenWidth: number = 0; 
  // 是否需要显示"展开"字样（注：当文本长度较短时就不需要“展开”） 
  @State isExpanded: boolean = false 
  // 测量文本宽度（单位px） 
  @State textWidth: number = measure.measureText({ 
    textContent: this.longMessage, 
    fontSize: 15 
  }) 
  // 获取当前所有的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  <= this.textWidth 
    }).catch((err: BusinessError) => { 
      console.error(`Failed to obtain all the display objects. Code: ${JSON.stringify(err)}`) 
    }) 
  } 
 
  build() { 
    Column() { 
      if (this.isExpanded) { 
        Column() { 
          Text(this.longMessage) 
            .fontSize(15) 
            .fontColor(Color.Black) 
            .maxLines(this.lines) 
            .textOverflow({overflow:TextOverflow.Ellipsis}) 
          Column() { 
            Text(this.collapseText) 
              .fontSize(15) 
              .fontColor(Color.Blue) 
              .backgroundColor(Color.White) 
          } 
.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行 
  }) 
} 
}) 
}.justifyContent(FlexAlign.Start) 
  .alignItems(HorizontalAlign.Start) 
} else { 
  Text(this.longMessage) 
    .fontSize(15) 
    .fontColor(Color.Black) 
} 
} 
.width('100%') 
  .height('100%') 
  .justifyContent(FlexAlign.Center) 
  .alignItems(HorizontalAlign.Center) 
} 
}