HarmonyOS Text怎么实现超过3行的时候，怎么实现展开收缩

示例参考如下：

先在onWindowStageCreate时，计算下屏幕宽度，存在AppStorage中（注意：需要转成vp单位），样例代码如下：

let windowClass: window.Window | undefined = undefined;
display.getAllDisplays((err, data) => {
  AppStorage.setOrCreate('screenwidth', px2vp(data[0].width));
  console.log('width = ' + data[0].width)
})
1.
2.
3.
4.
5.

然后在页面通过 @StorageLink 获取屏幕宽度，如果要按百分比，可以再定义个参数作为屏幕宽度*百分比，样例代码如下：

@StorageLink('screenwidth') screenWidth: number = 0;
@State custwidth: number = this.screenWidth * 0.8
1.
2.

后面设置宽度就用定义的参数 custwidth 来设置。页面完整示例代码如下：

import { MeasureText } from '@kit.ArkUI'
import componentUtils from '@ohos.arkui.componentUtils'
import inspector from '@ohos.arkui.inspector'

@Entry
@Component
struct TextButton {
  @State content: string = '#限定的校服，限定的青春！那群陪你度过青涩阳光的人，你还记得他们吗？12月15日中午12点，一起来重拾回忆'
  private measureText = this.content;
  @State maxLines: number = Infinity
  @State isCollapse: boolean = true;
  @State collapseTxt: string = '…[展开]';
  private subTxt: string = '';
  @StorageLink('screenwidth') screenWidth: number = 0;
  @State custwidth: number = this.screenWidth * 0.8

  //限定宽度，计算文本总高度
  textSize : SizeOptions = MeasureText.measureTextSize({
    textContent: this.content,
    fontSize: 24,
    constraintWidth: this.custwidth
  })

  //限定宽度和最大行数，计算高度
  textSize2 : SizeOptions = MeasureText.measureTextSize({
    textContent: this.content,
    fontSize: 24,
    maxLines: 3,
    constraintWidth: this.custwidth
  })

  build() {
    Row() {
      Column() {
        Text() {
          Span('#亲爱的朋友')
            .fontColor(Color.Blue)
          Span(this.content)


          if(Number(this.textSize.height) > Number(this.textSize2.height)){
            Span(this.collapseTxt)
              .onClick(()=>{
                if(this.isCollapse){
                  this.maxLines = Infinity;
                  this.content = this.measureText;
                  this.isCollapse = false;
                  this.collapseTxt = '[收起]';
                }else{
                  this.isCollapse = true;
                  this.collapseTxt = '…[展开]';
                  this.content = this.subTxt;
                }
              })
          }
        }
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(this.maxLines)
        .fontSize(24)
        .width(this.custwidth)
        .backgroundColor(Color.White)
        .key('txt_info')
      }
      .width('100%')
    }
    .height('100%')
  }

  listener:inspector.ComponentObserver = inspector.createComponentObserver('txt_info')

  aboutToAppear() {
    let onLayoutComplete:()=>void=():void=>{
      if(this.isCollapse){
        this.getComponentRect('txt_info');
      }
    }
    let onDrawComplete:()=>void=():void=>{
      if(this.isCollapse){
        this.subTxt = this.content;
      }
    }
    let FuncLayout = onLayoutComplete
    let FuncDraw = onDrawComplete

    this.listener.on('layout', FuncLayout)
    this.listener.on('draw', FuncDraw)
  }


  private getComponentRect(key:string) {
    let modePosition = componentUtils.getRectangleById(key);

    let localOffsetHeight = modePosition.size.height;

    if(localOffsetHeight > 300){
      this.content = this.content.substring(0, this.content.length - 2);
      this.isCollapse = true;
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.