在HarmonyOS中，如何实现“可折叠中间面板”，并且再次展开时恢复上一次高度？

Question

我想让中间面板支持“折叠/展开”。折叠时高度收成 0；展开时恢复为上一次的实际高度（不是固定值）。要怎么写？

Answer 1

记录中间面板的“最近非零高度”；折叠时将其高度设为 0 并触发 ColumnSplit 重建以重新取初始值；展开时再用记录的高度重建。通过切换一个 @State version 分支来“卸载/重建”组件，从而让分割线重新计算。

// pages/SplitCollapsibleMiddle.ets
@Entry
@Component
struct SplitCollapsibleMiddle {
  @State version: number = 0
  @State topH: number = 120
  @State midH: number = 240      // 当前中间高度（0 表示折叠）
  @State lastMidH: number = 240  // 记录“最近非零高度”
  @State botH: number = 120

  private rebuild() { this.version ^= 1 }

  private toggle() {
    if (this.midH === 0) {
      this.midH = Math.max(100, this.lastMidH) // 展开并恢复
    } else {
      this.lastMidH = this.midH                // 记住非零高度
      this.midH = 0                            // 折叠
    }
    this.rebuild()                              // 触发 ColumnSplit 重新初始化
  }

  build() {
    Column({ space: 8 }) {
      Button(this.midH === 0 ? '展开中间面板' : '折叠中间面板').onClick(() => this.toggle())

      if (this.version === 0) {
        this.body()
      } else {
        this.body()
      }
    }
    .padding(12)
    .width('100%').height('100%')
  }

  @Builder
  private body() {
    ColumnSplit() {
      Column().height(this.topH).minHeight(60).backgroundColor('#FFFDE7')
        .onAreaChange((_, now) => { this.topH = now.height })

      // 中间面板：可能为 0（折叠）
      Column().height(this.midH).minHeight(0).backgroundColor('#E3F2FD')
        .onAreaChange((_, now) => {
          // 只有非零高度才更新“最近高度”
          if (now.height > 0) this.lastMidH = now.height
        })

      Column().height(this.botH).minHeight(60).backgroundColor('#E8F5E9')
        .onAreaChange((_, now) => { this.botH = now.height })
    }
    .resizeable(true)
    .divider({ startMargin: 6, endMargin: 6 })
    .width('92%').height('75%')
    .border({ width: 1, color: '#22000000' }).borderRadius(8)
  }
}