HarmonyOS 多端自适应实战：一张详情页如何同时适配手机、折叠屏与平板

import { GridRow, GridCol, BreakpointsReference } from '@kit.ArkUI';import { window } from '@kit.ArkUI';import { display } from '@kit.ArkUI';import { common } from '@kit.AbilityKit';@Entry@Componentstruct DetailPage {  @State currentBp: string = 'sm';          // 当前断点：xs/sm/md/lg  @State isFolded: boolean = false;         // 折叠态（仅用于相机比例等特定策略）  private win?: window.Window;  aboutToAppear(): void {    // 1) 监听窗口尺寸变化：分屏 / 拖拽 / 旋转都会触发，回调里只更新状态，不做事    window.getLastWindow(getContext(this) as common.Context).then((win) => {      this.win = win;      win.on('windowSizeChange', (size: window.Size) => {        // 仅更新断点状态，复杂计算留给断点变化再处理        this.currentBp = this.win!.getWindowWidthBreakpoint();      });    });    // 2) 折叠屏：foldStatus 仅用于悬停态 / 比例等，布局仍以断点为准    if (display.isFoldable()) {      display.on('foldStatusChange', (status: display.FoldStatus) => {        this.isFolded = (status === display.FoldStatus.FOLD_STATUS_FOLDED);      });    }  }  aboutToDisappear(): void {    this.win?.off('windowSizeChange');       // 务必解注册，避免泄漏  }  build() {    GridRow({      breakpoints: { value: ['320vp', '600vp', '840vp'], reference: BreakpointsReference.WindowSize },      columns: { sm: 12, md: 12, lg: 12 }    })      .onBreakpointChange((bp: string) => { this.currentBp = bp; })    {      // 主内容区：手机占满 12 列，平板占 8 列留出侧栏      GridCol({ span: { xs: 12, sm: 12, md: 8, lg: 8 } }) {        Column({ space: 16 }) {          // 封面：aspectRatio 锁 16:9，杜绝拉伸变形          Image($r('app.media.cover'))            .width('100%')            .aspectRatio(16 / 9)            .borderRadius(12)          // 标题：随断点切换截断行数          Text('这是一段在窄屏需要截断、宽屏可多展示的商品长标题示例')            .fontSize(20)            .fontWeight(FontWeight.Bold)            .maxLines(this.currentBp === 'sm' ? 2 : 3)            .textOverflow({ overflow: TextOverflow.Ellipsis })          // 正文延伸（滚动）          Scroll() {            Column({ space: 12 }) {              ForEach(this.paragraphs, (p) => Text(p).fontSize(15))            }          }.layoutWeight(1)        }        .alignItems(HorizontalAlign.Start)        .padding(16)      }      // 侧栏推荐：仅 md/lg 显示，手机不占列（纵向延伸逻辑由下方补充）      GridCol({ span: { xs: 0, sm: 0, md: 4, lg: 4 } }) {        if (this.currentBp !== 'sm' && this.currentBp !== 'xs') {          this.RecommendPanel()        }      }    }    .width('100%')    .constraintSize({ maxWidth: 1200 })   // 平板约束最大内容宽度，避免过宽留白    .margin({ left: 'auto', right: 'auto' })  }  // 操作栏：断点驱动结构切换——手机底部悬浮，平板顶部工具条  @Builder  ActionBar() {    if (this.currentBp === 'sm') {      Row({ space: 12 }) {        Button('收藏').layoutWeight(1)        Button('分享').layoutWeight(1)        Button('购买').layoutWeight(1)      }      .width('100%')      .position({ bottom: 0 })      .padding(12)      .backgroundColor('#ffffff')    } else {      Row({ space: 12 }) {        Text('详情').fontSize(18).fontWeight(FontWeight.Bold)        Blank()                       // 拉伸能力：标题与按钮间自动吸收留白        Button('收藏').height(36)        Button('分享').height(36)        Button('购买').height(36)      }      .width('100%')      .height(56)      .padding({ left: 16, right: 16 })      .backgroundColor('#f5f7fa')    }  }  @Builder  RecommendPanel() {    Column({ space: 10 }) {      Text('相关推荐').fontSize(16).fontWeight(FontWeight.Bold)      ForEach(this.recommends, (r) => {        Row({ space: 10 }) {          Image(r.thumb).width(64).height(64).aspectRatio(1)          Column() { Text(r.title).maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis }) }          Blank()                   // 标题与价格间留白均分        }      })    }      .padding(16)  }}