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 Index2 {
  @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[] =
    ['1', '22', '511', '623', '55', '666', '648', '589', '99', '3434', '5656', '7878', '659',
      '68681']
  @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 + 1)
    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 = 'v'
                this.ShowData = this.SomeData
              }
            })
            .width(40)
            .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.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.