HarmonyOS 鸿蒙Next中当前应用在折叠屏展开状态下是分栏模式，右侧默认是空白页

HarmonyOS 鸿蒙Next中当前应用在折叠屏展开状态下是分栏模式，右侧默认是空白页 我们的应用使用的是Navigation来进行的一多适配，默认在大屏的状态下会变成分栏模式。

但是应用启动后分栏模式下没有子页面，首页在左侧，右侧就是空白页，结果审核并不通过，说页面右侧边距过大。这个应该怎么适配的好？

4 回复

这里建议开发者如果完全走的是分栏模式，那么可以给到一个右侧默认的占位页面，例如登录页面或者我的页面，详细的配置请参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation#%E7%A4%BA%E4%BE%8B14navigation%E5%8F%8C%E6%A0%8F%E6%A8%A1%E5%BC%8F%E5%8D%A0%E4%BD%8D%E9%A1%B5

更多关于HarmonyOS 鸿蒙Next中当前应用在折叠屏展开状态下是分栏模式，右侧默认是空白页的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


【背景知识】

Navigation：Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。

on(‘windowSizeChange’)：开启窗口尺寸变化的监听。

【参考方案】

可参考折叠屏分栏模式适配示例，通过Navigation组件和windowSizeChange事件实现折叠屏双栏页面效果，通过监听屏幕宽度，动态调整分栏模式。

  1. 监听windowSizeChange事件获取屏幕尺寸。

    windowStage.getMainWindow().then((data: window.Window) => {
  // 监听屏幕尺寸
  this.windowObj = data;
  this.updateScreenDisplay(this.windowObj.getWindowProperties().windowRect.width);
  this.windowObj.on('windowSizeChange', (windowSize: window.Size) => {
    this.updateScreenDisplay(windowSize.width);
  })
})

private updateScreenDisplay(windowWidth: number): void {
  // windowWidth屏幕宽度像素，realWindowWidth屏幕真实宽度，densityPixels屏幕密度像素=屏幕宽度像素/屏幕真实宽度
  let realWindowWidth = windowWidth / display.getDefaultDisplaySync().densityPixels;
  let curScreenSizeString: string = '';
  if (realWindowWidth < CommonConstant.SCREEN_SIZE_BREAKPOINT) {
    curScreenSizeString = CommonConstant.SCREEN_SIZE_STRING_SM;
  } else {
    curScreenSizeString = CommonConstant.SCREEN_SIZE_STRING_LG;
  }
  AppStorage.setOrCreate('curScreenSizeString', curScreenSizeString);
}

  2. 根据屏幕宽度，设置Navigation显示模式（分栏或单栏）。

    Navigation(this.pageInfo) {
  ... // 页面内容
}
.mode(this.curScreenSizeString === CommonConstant.SCREEN_SIZE_STRING_LG ? NavigationMode.Split : NavigationMode.Stack)

在HarmonyOS鸿蒙Next中，折叠屏展开状态下应用默认采用分栏布局，右侧显示空白页是系统预设行为。该设计基于鸿蒙的分布式UI框架，通过自适应布局能力自动处理屏幕形态变化。开发者可利用方舟框架的组件能力，在右侧栏动态加载内容或功能模块，无需依赖Java或C语言技术栈。系统提供标准化API支持分栏状态下的内容填充与交互逻辑配置。

针对折叠屏展开状态下的分栏模式适配问题，建议通过以下方式优化右侧空白区域：

  1. 检查Navigation组件配置，确保在分栏模式下右侧栏设置了默认内容或占位视图，避免完全空白。可以使用Column或Row容器结合占位文本或图标填充。

  2. 若右侧栏无需固定内容，可通过响应式布局动态调整分栏比例。例如使用displayPriority或flexWeight属性，让左侧主内容区域占据更多空间，减少右侧空白占比。

  3. 考虑使用条件渲染逻辑：当右侧无内容时，隐藏分栏模式或切换为单栏全屏布局，避免空白区域影响UI规范。可通过ohos:configChanges监听屏幕状态变化，动态调整布局结构。

  4. 审核反馈的边距问题可能是由于空白区域未适配屏幕比例导致。建议使用百分比或相对单位（如vp）定义分栏宽度，而非固定值，确保在不同折叠状态下布局合理。

通过以上调整可符合鸿蒙的UI适配规范，避免审核不通过。

回到顶部