引言

随着移动设备技术不断革新，折叠屏手机以其独特的设计和灵活的显示能力，为用户带来了前所未有的视觉体验。然而，这种新型屏幕形式也对界面设计提出了全新挑战。如何在用户展开或收起折叠屏时，即时响应并做出相应的UI调整，是确保用户体验连贯性的关键。

在这样的背景下，实现界面布局在单屏与双屏模式之间的无缝切换。不仅能让应用在单屏模式下保持简洁优雅，也能在双屏模式下提供更广阔的视野和更丰富的交互体验。

适配前后对比

  • 适配前不做任何处理，UI布局会根据折叠屏的展开、收起自适应屏幕，示例如下：

HarmonyOS ：适配折叠屏展开与收起，实现单屏与双屏UI的无缝切换_HarmonyOS NEXT

  • 适配后，单屏、双屏各自一套 UI 设计 可根据折叠屏的展开、收起两种状态，实现差异性UI交互设计，示例如下：

HarmonyOS ：适配折叠屏展开与收起，实现单屏与双屏UI的无缝切换_HarmonyOS NEXT_02

实际开发中，我们可以在同一个页面，共用一套数据，实现从单屏到双屏的平滑过渡，让用户在使用过程中感受到无缝的体验。

实时监听折叠屏状态

HarmonyOS NEXT 提供 媒体查询 (@ohos.mediaquery) 可用于实现监听折叠屏展开、收起变化。

该方法库适用于 鸿蒙APP开发、元服务开发，关键代码如下：

listener= mediaquery.matchMediaSync('(min-width: 400vp)')
onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) {
        
        
    if (mediaQueryResult.matches) {
        
        
      // 展开态
    } else {
        
        
      // 折叠态
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

为了方便，我们可把该能力封装成工具类：

import mediaquery from '@ohos.mediaquery'

/// 折叠屏幕变化监听
abstract class FoldStatusObserver {
        
        
  public static readonly foldStatusKey = 'foldStatusKey'
  private static listener?: mediaquery.MediaQueryListener

  /// 在 MainPage aboutToAppear 生命周期内调用
  public static startListening() {
        
        
    FoldStatusObserver.listener = mediaquery.matchMediaSync('screen and (min-width: 400vp)')
    FoldStatusObserver.listener.on('change', FoldStatusObserver.onFoldStatusChange)
  }

  /// 在 MainPage aboutToDisappear 生命周期内调用
  public static stopListening() {
        
        
    FoldStatusObserver.listener?.off('change', FoldStatusObserver.onFoldStatusChange)
  }

  /// 在任意 Component 内通过使用 `@StorageProp('foldStatusKey') isFold: boolean = false` 进行监听变化
  private static onFoldStatusChange(result: mediaquery.MediaQueryResult): void {
        
        
    const status = AppStorage.get<boolean>(FoldStatusObserver.foldStatusKey)
    if (result