HarmonyOS鸿蒙Next上架审核：应用存在界面布局未适配底部导航条问题，不符合应用UX设计规范。

HarmonyOS鸿蒙Next上架审核：应用存在界面布局未适配底部导航条问题，不符合应用UX设计规范。 【问题描述】

上架审核：应用存在界面布局未适配底部导航条问题，不符合鸿蒙应用UX设计规范。

cke_539.png


更多关于HarmonyOS鸿蒙Next上架审核：应用存在界面布局未适配底部导航条问题，不符合应用UX设计规范。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

1.底部固定的交互控件（画笔、颜色、功能按钮）不能被导航条遮挡，也不能和导航条热区冲突。

2.鸿蒙规范要求底部控件至少向上避让 28vp 的导航条区域。

请开发者根据要求进行调整；参考导航条适配要求： https://developer.huawei.com/consumer/cn/forum/topic/0214200865840885234?fid=0102104600515103427

cke_220.png

更多关于HarmonyOS鸿蒙Next上架审核：应用存在界面布局未适配底部导航条问题，不符合应用UX设计规范。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对鸿蒙Next底部导航条适配问题，需确保应用界面底部控件（如悬浮按钮、输入框）不被导航条遮挡。在ArkTS中，对根容器或底部元素使用 expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) 扩展安全区域，或通过 safeAreaInsets 动态调整布局。同时检查是否固定高度导致越界，应使用弹性布局配合 onAreaChange 监听安全区变化。

您的应用被拒原因是界面内容延伸到了系统底部导航条（手势提示条/三键导航）区域，遮挡了交互元素或显示内容，不符合HarmonyOS UX规范。

适配方法：监听窗口安全区域变化，把底部安全高度动态应用到页面底部内边距或边距上。

代码示例（ArkTS）：

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State bottomAvoidHeight: number = 0;

  aboutToAppear() {
    const win = window.getLastWindow(getContext(this));
    win.then(windowClass => {
      // 初始获取
      const initialAvoidArea = windowClass.getAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
      this.bottomAvoidHeight = px2vp(initialAvoidArea.bottom);
      // 监听变化（如导航条显示/隐藏）
      windowClass.on('avoidAreaChange', (data: window.AvoidArea) => {
        this.bottomAvoidHeight = px2vp(data.bottom);
      });
    }).catch(err => console.error('获取窗口失败:', err));
  }

  build() {
    Column() {
      // 实际页面内容（如按钮、输入框等）
      Text('内容区域')
      Button('操作按钮')
    }
    .width('100%')
    .height('100%')
    .padding({ bottom: `${this.bottomAvoidHeight}vp` }) // 关键适配
  }
}

需要将 px 转为 vp 时使用 px2vp()。若页面使用沉浸式（如 setWindowLayoutFullScreen），确保底部内容不被导航条遮挡。适配后重新打包上架即可。

回到顶部