HarmonyOS鸿蒙Next中CustomDialog底部弹窗，占满导航条

HarmonyOS鸿蒙Next中CustomDialog底部弹窗，占满导航条

解决方案

  1. 当CustomDialogController中的customStyle为false时，设置offset: { dx: .., dy: .. }，dy通过计算底部导航条宽度即可
dialogController: CustomDialogController = new CustomDialogController({
    builder: ReserveChargeDialog(), 
    customStyle: false, 
    width: '100%',
    cornerRadius: 5,
    alignment: DialogAlignment.Bottom,
    //isModal: false
    offset: { dx: 0, dy: 30 } // 向下30vp
})
  1. 当CustomDialogController中的customStyle为true时，可在@CustomDialog修饰的组件中，定义属性
.backgroundColor('#FFFFFF')
.expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.BOTTOM])

然后手动这是背景色

两种方案均可解决此问题，本人亲测


更多关于HarmonyOS鸿蒙Next中CustomDialog底部弹窗，占满导航条的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，CustomDialog默认不会占满导航条。如需全屏效果，需在构造CustomDialog时设置WindowManager.LayoutConfig为MATCH_PARENT。示例代码：

let dialog = new CustomDialog.Builder(context)
  .setWindowLayout(WindowManager.LayoutConfig.MATCH_PARENT, WindowManager.LayoutConfig.MATCH_CONTENT)
  .build();

导航栏可通过设置setNavigationBarColor调整颜色。若仍被遮挡，检查是否启用了沉浸式布局或设置了错误的安全区域参数。

更多关于HarmonyOS鸿蒙Next中CustomDialog底部弹窗，占满导航条的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS Next中CustomDialog底部弹窗占满导航条的问题，解决方案总结如下：

  1. 当customStyle为false时：
  • 使用offset参数调整弹窗位置
  • 通过dy值设置底部偏移量（如30vp）
  • 示例代码已正确展示配置方式
  1. 当customStyle为true时：
  • 在CustomDialog组件中使用expandSafeArea扩展安全区域
  • 需配合设置背景色保证UI一致性
  • 代码示例中展示了关键API调用方式

两种方案都经过验证可行，开发者可根据实际场景选择：

  • 方案1适合简单的位置微调
  • 方案2更适合需要完全控制样式的场景

注意dy值或安全区设置需要根据实际导航栏高度调整。

回到顶部