HarmonyOS鸿蒙Next中开发阶段脱机使用console.log输出的日志在联机后是否可以导出

一、基础适配方案

• 获取系统避让区域信息
  • 使用 getSystemInfoSync 获取状态栏和导航栏高度：

let res = has.getSystemInfoSync();
console.info(`状态栏高度: ${res.statusBarHeight}, 导航栏高度: ${res.indicatorHeight}`);

• 根据高度手动设置组件 padding 或 margin 避开安全区域。
• 通过 env() 函数动态适配

.container {
  padding-top: env(safe-area-inset-top);    /* 顶部安全区距离 */
  padding-bottom: env(safe-area-inset-bottom); /* 底部安全区距离 */
}

二、组件级安全区域扩展

使用 expandSafeArea 属性将组件绘制区域扩展到安全区外，适用于背景延伸但内容需避让的场景：

Column() {
  // 子组件在安全区域内布局
}
.backgroundColor('#F1F3F5')
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])  // 扩展至状态栏和导航栏

• 适用场景：

需要顶部图片/背景延伸到状态栏，但交互按钮需避让（如搜索结果4的导航栏适配）。

三、窗口全屏模式适配

• 设置窗口全屏

import { window } from '@kit.ArkUI';
window.getLastWindow(this.context).setWindowLayoutFullScreen(true);  // 全屏布局

• 效果：页面所有组件布局范围扩展至整个窗口，需手动设置 padding 避让状态栏和导航栏2。
• 获取避让区域动态调整

let avoidArea = window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);  // 获取系统避让区域
this.paddingValue = avoidArea.topRect.height + 'px';  // 动态设置组件padding

四、折叠屏/挖孔屏适配

• 获取挖孔区域信息

import { display } from '@kit.ArkUI';
let cutoutInfo = display.getCutoutInfo();  // 获取挖孔区域宽高和位置

• 根据返回的 boundingRect 设置组件 margin 或 padding 避让。
• 动态响应屏幕形态变化
  • 监听屏幕折叠状态事件，动态调整布局：

display.on('foldStatusChange', (foldStatus) => {
  if (foldStatus === display.FoldStatus.FOLD_STATUS_EXPANDED) {
    // 展开大屏时的布局调整
  }
});

五、场景化适配建议