HarmonyOS 使用flex实现折行怎么判断行数和设置行数

import measure from '@ohos.measure'  
import display from '@ohos.display';  
const childMaxWidth:number = 325 //为了方便后续计算，这里的宽度数值为px  
let displayClass: display.Display | null = null;  
let componentWidth:number = 0;  
try {  
  displayClass = display.getDefaultDisplaySync();  
  componentWidth = displayClass.width  
} catch (exception) {  
  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));  
}  
@Component  
struct TextItem{  
  @State message:string = ''  
  @Prop fontSizeData:number  
  build() {  
    Text(this.message)  
      .fontSize(this.fontSizeData)  
      .margin({left:10,top:10})  
      .backgroundColor('#c4c2cc')  
    .constraintSize({maxWidth:childMaxWidth + 'px'})  
      .maxLines(1)  
      .textOverflow({overflow:TextOverflow.Ellipsis})  
  }  
}  
@Entry  
@Component  
struct Index {  
  @State @Watch('IndexChange')index:number = 0  
  @State @Watch('textChange') message: string = ''  
  @State FlexWidth: string = '80%';  
  @State newIndex:number = 0;  
  @State heightControl: number|string = 100;  
  @State ButtonText:string = '展开';  
  @State AllData:string[] = ['222222222222','22','333','44444','55','666','7777','8888888888888','99','3434','5656','7878','141414141','68681','哈哈哈','xixixi']  
  @State SomeData:string[] = []  
  @State ShowData:string[] = []  
  @State fontSizeData:number = 30  
  @State AllWidth:number = 0  
  @State textWidth:number = 0  
  @State restrictWidth: number = 0;  
  IndexChange(){  
    if(this.AllWidth >= (this.restrictWidth - childMaxWidth) && this.AllWidth <= (this.restrictWidth)){  
      this.newIndex = this.index  
      console.log('text1 newIndex',this.newIndex)  
      console.log('text1 change',this.newIndex)  
    }  
  }  
  textChange(){  
    let content:string = this.message  
    this.textWidth = measure.measureText({  
      textContent: content,  
      fontSize: this.fontSizeData  
    })  
    if(this.textWidth > childMaxWidth){  
      this.AllWidth += childMaxWidth  
    }else{  
      this.AllWidth += this.textWidth  
    }  
    console.log('text1 content',content)  
    console.log('text1 Width',this.textWidth)  
  }  
  aboutToAppear(): void {  
    if(componentWidth != 0){  
      this.restrictWidth = Math.floor((parseFloat(this.FlexWidth) * componentWidth) * 1.3 * 0.01)  
      console.log('text1 componentWidth',componentWidth)  
      console.log('text1 restrictWidth',this.restrictWidth)  
    }  
    for(let i = 0;i < this.AllData.length;i++){  
      this.message = this.AllData[i]  
      this.index = i  
    }  
    console.log('text1 change newIndex',this.newIndex)  
    this.SomeData = this.AllData.slice(0,this.newIndex+5)  
    this.ShowData = this.SomeData  
  }  
  build() {  
    Row() {  
      Column() {  
        Flex({wrap:FlexWrap.Wrap}){  
          ForEach(  
            this.ShowData,  
            (item:string)=>{  
              TextItem({message:item,fontSizeData:this.fontSizeData})  
            }  
          )  
          Button(this.ButtonText)  
            .onClick(()=>{  
              if(this.heightControl === 100){  
                this.heightControl = '100%'  
                this.ButtonText = '收起'  
                this.ShowData = this.AllData  
              }else{  
                this.heightControl = 100  
                this.ButtonText = '展开'  
                this.ShowData = this.SomeData  
              }  
            })  
            .width(80)  
            .height(30)  
            .margin({left:10,top:10})  
        }.constraintSize({ maxHeight: this.heightControl })  
        .border({width:1})  
        .width(this.FlexWidth)  
        .margin({left:'5%'})  
        .clip(true)  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}
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.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.