HarmonyOS 如何实现Flex布局内容收起只显示1行，展开最多显示6行

参考示例如下：

@Entry
@Component
struct SpeechPage {
  @State message: string = 'Hello World';
  @State allDataList: string[] =
    ['1', '222', '33333', '44', '1', '222', '33333', '44', '1', '222', '33333', '44', '1', '222', '33333', '44', '1',
      '222', '33333', '44', '1', '222', '33333', '44', '1', '222', '33333', '44', '1', '222', '33333', '44', '1', '222',
      '33333', '44', '1', '222', '33333', '44', '1', '222', '33333', '44', '1', '222', '33333', '44']
  @State showDataList: string[] = []
  @State isShowAll: boolean = true
  @State calculateCutIndexInfo: number = 1 // 初始显示行数
  @State cutIndex: number = 0
  private flexWidth: number = 0
  private itemWidthList: number[] = []
  private isInit: boolean = false
  @State curRowNum: number = 1

  aboutToAppear(): void {
    this.initItemList()
  }

  initItemList() {
    this.showDataList = this.allDataList
    this.itemWidthList = new Array<number>(this.allDataList.length)
    for (let i = 0; i < this.itemWidthList.length; i++) {
      this.itemWidthList[i] = 0
    }
    this.isInit = false
  }

  isDrawFinish() {
    let isFinish = true;
    for (let i = 0; i < this.itemWidthList.length; i++) {
      if (this.itemWidthList[i] == 0) {
        isFinish = false
      }
    }
    if (this.flexWidth == 0) {
      isFinish = false;
    }
    if (isFinish) {
      this.isInit = true
      this.calculateRowNum()
      console.info("isShowAll == " + this.isShowAll)
      console.info("calculateCutIndexInfo == " + this.calculateCutIndexInfo)
      this.transformExpendList(!this.isShowAll)
    }
  }

  /**
   * 计算目前全部数据撑满的行数
   */
  calculateRowNum() {
    let rowLength = 0;
    for (let i = 0; i < this.itemWidthList.length; i++) {
      rowLength += this.itemWidthList[i]
      if (rowLength > this.flexWidth) { //next line
        this.curRowNum++
        rowLength = this.itemWidthList[i]
      }
    }
  }

  transformExpendList(showAll: boolean) {
    if (showAll) {
      this.isShowAll = true
      if (this.curRowNum <= 6) {
        this.calculateCutIndexInfo = this.curRowNum
      } else {
        //展开最多显示6行
        this.calculateCutIndexInfo = 6
      }
    } else {
      this.isShowAll = false
      // 最小显示1行
      this.calculateCutIndexInfo = 1
    }
    this.calculateCutIndex(this.calculateCutIndexInfo)
    this.showDataList = this.allDataList.slice(0, this.cutIndex + 1)
    console.info("cutIndex == " + this.cutIndex)
  }

  // maxLine指布局需要保留的最大行数
  calculateCutIndex(line: number) {
    let layer = 1;
    let curLength = 0; //当前行长度
    for (let i = 0; i < this.itemWidthList.length; i++) {
      curLength += this.itemWidthList[i]
      if (curLength > this.flexWidth) {
        if (layer == line) {
          curLength -= this.itemWidthList[i]
          this.cutIndex = i - 1
          break
        } else {
          layer += 1
          curLength = this.itemWidthList[i]
        }
      } else {
        this.cutIndex = i
      }
    }

    let buttonWidth = 40
    let empty = this.flexWidth - curLength
    while (empty <= buttonWidth) {
      empty += this.itemWidthList[this.cutIndex]
      this.cutIndex--
    }

  }

  build() {
    RelativeContainer() {
      Flex({ wrap: FlexWrap.Wrap, alignItems: ItemAlign.Center }) {
        ForEach(this.showDataList, (item: string, index: number) => {
          Text(item)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontColor(Color.Black)
            .backgroundColor(Color.Gray)
            .borderRadius(10)
            .padding(8)
            .margin(5)
            .id(index + "")
            .onAreaChange((oldValue: Area, newValue: Area) => {
              if (!this.isInit && newValue.width != 0) {
                this.itemWidthList[index] = Number(newValue.width) + 10 // item宽度加上两边margin
                this.isDrawFinish()
              }
            })
        })
        Button() {
          Text(this.isShowAll ? '^' : 'v')
            .padding(10)
            .fontColor(Color.White)
            .borderRadius(5)
        }
        .width(40)
        .onClick(() => {
          this.transformExpendList(!this.isShowAll)
        })
      }
      .margin({ top: 100, left: 16 })
      .onAreaChange((oldValue: Area, newValue: Area) => {

        if (!this.isInit && newValue.width != 0) {
          this.flexWidth = Number(newValue.width)
          this.isDrawFinish()
        }
      })
      .backgroundColor(Color.Red)
      .id("flex")
      .width("90%")
    }
    .height('100%')
    .width('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.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.