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%')
  }
}