HarmonyOS5 折叠屏适配测试：验证APP在展开/折叠状态下的界面自适应，以及会出现的问题

以下是HarmonyOS5折叠屏应用在展开/折叠状态下的UI自适应测试方案及技术实现要点：

一、核心测试维度

1. ‌状态连续性验证‌

• 页面滚动位置保持（需通过display.on('foldStatusChange')监听状态并保存/恢复滚动位置）
• 输入内容保留（使用@StorageLink实现状态持久化）
• 视频播放进度同步（需在折叠态变化时记录MediaPlayer实例状态）

1. ‌布局自适应检查‌

• 动态栅格布局（通过columnsTemplate动态调整列数，如折叠态1fr 1fr→展开态1fr 1fr 1fr）
• 断点系统适配（定义SMALL/MEDIUM/LARGE断点响应屏幕尺寸变化）
• 安全区避让（使用.safeArea(SafeAreaType.SYSTEM)自动规避折痕区域）

二、特殊场景适配方案

1. ‌悬停态交互设计‌

• 上下分屏布局（上半屏显示内容，下半屏放置交互控件）
• 通过FolderStack组件自动分区处理

FolderStack({
  upperItems: ['videoPlayer']
}) {
  Video({src:'movie.mp4'})  // 上半屏
  Column() { Button(...) }  // 下半屏
}

1. ‌多形态布局策略‌

• 三折叠设备需区分F态(单屏)/M态(双屏)/G态(三屏)布局
• 使用window.on('windowSizeChange')动态调整导航栏位置（如≥840vp时切换为侧边栏）

三、性能与体验优化

1. ‌动效规范‌

• 状态切换动效时长≤300ms，使用animateTo+Curve.EaseOut硬件加速

1. ‌边距控制‌

• 左右边距≤屏幕宽度20%，开合过程变化幅度<5%

1. ‌异常处理‌

• 需覆盖折叠中断、铰链异常等场景下的UI回退机制

四、测试工具链

1. 开发者模式强制触发折叠状态变化（模拟不同铰链角度）
2. 使用ArkUI-X的Previewer组件实时预览多形态布局
3. 通过媒体查询(mediaquery)检测当前状态

mediaquery.matchMediaSync('(min-width: 400vp)')
  .on('change', (result) => {
    if (result.matches) { /* 展开态 */ }
  })

完整适配需遵循鸿蒙UX规范中的折叠屏专项标准，包括任务不中断、无闪退等基础兼容性要求。企业级应用（如有度即时通）已实现分屏办公、多任务并行等深度适配场景。

HarmonyOS 5 折叠屏适配的常见问题及解决方案如下：

一、状态连续性中断

‌滚动位置丢失

// 监听折叠状态变化并保存滚动位置:ml-citation{ref="1,4" data="citationList"}
display.on('foldStatusChange', (foldStatus) => {
  if (foldStatus === display.FoldStatus.FOLD_STATUS_UNFOLDED) { 
    scrollView.scrollTo({ y: this.lastScrollY })  // 恢复滚动位置
  } else {
    this.lastScrollY = scrollView.currentOffset().y  // 折叠时保存位置
  }
})

输入内容重置

// 使用@StorageLink持久化输入状态:ml-citation{ref="2,4" data="citationList"}
@StorageLink('inputText') inputText: string = ""
TextInput({ text: this.inputText })
  .onChange(value => this.inputText = value)

二、布局错位问题

栅格布局未动态切换

// 根据断点动态调整列数:ml-citation{ref="1,5" data="citationList"}
Grid() {
  ForEach(this.data, item => GridItem()...)
}
.columnsTemplate(this.windowWidth >= 840 ? '1fr 1fr 1fr' : '1fr 1fr')  // 大屏三列

折痕区域遮挡

// 自动避让系统安全区:ml-citation{ref="3,4" data="citationList"}
Column() {
  ContentComponent()
}
.safeArea(SafeAreaType.SYSTEM)  // 避开铰链区域
.margin({ top: $r('app.float.safe_area_top') })  // 手动调整顶部间距

三、交互异常

悬停态未分屏

// FolderStack实现悬停态分屏:ml-citation{ref="3,6" data="citationList"}
FolderStack({ upperItems: ['player'] }) {
  VideoPlayer().id('player')  // 上半屏占70%
  ControlPanel()             // 下半屏占30%
}

三折叠设备适配缺失

// 监听窗口变化切换布局:ml-citation{ref="5,6" data="citationList"}
@StorageProp('windowBreakpoint') breakpoint: string = 'md'
onWindowSizeChange(size: window.Size) {
  this.breakpoint = size.width >= 1280 ? 'lg' : (size.width >= 840 ? 'md' : 'sm')
}

// 根据断点调整导航栏位置
Tabs({ barPosition: this.breakpoint === 'lg' ? BarPosition.Start : BarPosition.End })

四、特殊场景bug

折叠态获取屏幕参数异常

// 改用foldDisplayModeChange事件:ml-citation{ref="10" data="citationList"}
display.on('foldDisplayModeChange', () => {
  const displayMetrics = display.getDefaultDisplaySync()  // 此时获取准确尺寸
  console.log(`Width: ${displayMetrics.width}, Height: ${displayMetrics.height}`)
})

动效卡顿

// 硬件加速动效（≤300ms）:ml-citation{ref="3,9" data="citationList"}
animateTo({ duration: 300, curve: Curve.EaseOut }, () => {
  this.isExpanded = !this.isExpanded  // 状态变化触发UI更新
})

关键避坑提示

‌避免条件渲染销毁组件

// 使用visibility替代if判断:ml-citation{ref="2" data="citationList"}
TextInput()
  .visibility(this.breakpoint === 'lg' ? Visibility.Visible : Visibility.None)

企业应用分屏内存泄漏

// 页面销毁时移除监听:ml-citation{ref="6" data="citationList"}
onPageHide() {
  display.off('foldStatusChange')
}

完整适配需结合鸿蒙断点系统（mediaquery.matchMediaSync）和状态管理（@StorageLink），优先响应窗口尺寸而非物理折叠状态。针对华为Pura X等外屏设备，需单独设计沉浸式布局策略