鸿蒙折叠屏适配问题解决

最近有需求要做鸿蒙折叠屏的适配，以下是适配方法

import {display} from '@kit.ArkUI'
import { Callback } from '@ohos.base';
private screenW: number = px2vp(display.getDefaultDisplaySync().width);
private readonly DEVICESIZE: number = 600; // 依据Navigation的mode属性说明，如使用Auto，窗口宽度>=600vp时，采用Split模式显示；窗口宽度<600vp时，采用Stack模式显示。
@State curFoldStatus: display.FoldStatus = 0;
private callBack:Callback<display.FoldStatus> = async (curFoldStatus: display.FoldStatus) =>
  {
    // 同一个状态重复触发不做处理
    if (this.curFoldStatus === curFoldStatus) {
      return;
    }
    // 缓存当前折叠状态
    this.curFoldStatus = curFoldStatus;
    console.log('屏幕状态', curFoldStatus)
    // this.hideNavBar(this.curFoldStatus);
  }

  aboutToAppear(): void {
    if (display.isFoldable()) {
      this.regDisplayListener();
    } else {
      if (this.screenW >= this.DEVICESIZE) {
        // this.navigationAnimation(true);
      } else {
        // this.navigationAnimation(false);
      }
    }
  }

  /**
   * 注册屏幕状态监听
   * @returns {void}
   */
  regDisplayListener(): void {
    // this.hideNavBar(display.getFoldStatus());
    display.on('foldStatusChange', this.callBack);
  }


//curFoldStatus  1 平板 2手机 3 折叠一半 可根据这个状态设置对应的响应样式
.width(this.curFoldStatus == 1 || this.curFoldStatus == 3 ? '40%' :'100%')

以上是对于折叠 以及非折叠状态 页面组件的响应式处理

顶部导航栏 折叠与非折叠状态处理 参考

纯血鸿蒙APP实战开发——Navigation实现多设备适配案例 - 知乎 (zhihu.com)

split 是半折叠以及完全展开时的状态 stack 是手机状态时的展示

private screenW: number = px2vp(display.getDefaultDisplaySync().width);
if (display.isFoldable()) {
   this.regDisplayListener();
} else {
   if (this.screenW >= this.DEVICESIZE) {
     this.navigationMode = NavigationMode.Split;
   } else {
     this.navigationMode = NavigationMode.Stack;
   }
}

/**
* 注册屏幕状态监听
* @returns {void}
*/
regDisplayListener(): void {
   this.changeNavigationMode(display.getFoldStatus());
   display.on('foldStatusChange', async (curFoldStatus: display.FoldStatus) => {
      // 同一个状态重复触发不做处理
      if (this.curFoldStatus === curFoldStatus) {
         return;
      }
      // 缓存当前折叠状态
      this.curFoldStatus = curFoldStatus;
      this.changeNavigationMode(this.curFoldStatus);
   })
}

// 更改NavigationMode
changeNavigationMode(status: number): void {
   if (status === display.FoldStatus.FOLD_STATUS_FOLDED) {
      this.navigationMode = NavigationMode.Stack;
   } else {
      this.navigationMode = NavigationMode.Split;
   }
}

Navigation(this.pageStack) { ... }
   .backgroundColor($r('app.color.main_background_color'))
   .hideTitleBar(true)
   .navBarWidth($r('app.string.entry_half_size'))
   .hideNavBar(this.isFullScreen)
   .navDestination(this.pageMap)
   .mode(this.navigationMode)  //适配非折叠状态 NavigationMode.Split