HarmonyOS 鸿蒙Next promptAction.openCustomDialog 对应的自定义dialog，能够实现撑满整个屏幕吗？包括顶部statusbar和底部的安全区的高度

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next promptAction.openCustomDialog 对应的自定义dialog，能够实现撑满整个屏幕吗？包括顶部statusbar和底部的安全区的高度 现在我设置了自定义的dialog高度为100% 但是实际的布局是从statusbar以下开始布局, 到底部安全区顶部, 并不是整个屏幕的尺寸

/**
 * 全局loading弹窗
 * @param tips
 */
@Builder
export function loadingDialog(tips?: string) {
  RelativeContainer() {
    Column() {
      Column() {
        DeepalPagComponent({
          config: {
            path: ['toast_loading.pag'],
            repeatCount: 0,
            startFrame: 0,
            scaleMode: PagScaleMode.LetterBox
          }
        })
          .width(SpaceSize.Space36)
          .height(SpaceSize.Space36)

        if (tips && !EmptyUtils.isEmpty(tips)) { //如果设置了文字的话就显示
          Text(tips)
            .attributeModifier(deepalTextT12)
            .fontColor(deepalTheme.color.text.inverseSecondary)
            .margin({
              top: SpaceSize.VerticalMargin,
            })
      }
    }
    .justifyContent(FlexAlign.Center)
    .constraintSize({
      minWidth: 96,
      minHeight: 96,
      maxHeight: 120,
      maxWidth: 120,
    })
    .width(120)
    .height(120)
    .padding(SpaceSize.Space18)
    .borderRadius(SpaceSize.Space6)
    .backgroundColor(deepalTheme.color.fill.inverseOpacityPrimary)
    .chainMode(Axis.Vertical, ChainStyle.PACKED)
    .alignRules({
      left: { anchor: "__container__", align: HorizontalAlign.Start },
      right: { anchor: "__container__", align: HorizontalAlign.End },
      top: { anchor: "__container__", align: VerticalAlign.Top },
      bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
      bias: { vertical: 1 }
    })
  }.height(Percent.P100)
  .width(Percent.P100)
}

this.loadingDialogId = await promptAction.openCustomDialog({
  builder: loadingDialog.bind(this, data.data?.[0]?.msg ?? ''),
  backgroundBlurStyle: BlurStyle.NONE,
  isModal: false,
  offset: {
    dx: 0,
    dy: 0
  },
  width: Percent.P100,
  height: Percent.P100,
  onWillDismiss: (action: DismissDialogAction) => { //目前是点击了返回按键才可以触发
    // this.dismiss() //禁止返回关闭
  },
})

更多关于HarmonyOS 鸿蒙Next promptAction.openCustomDialog 对应的自定义dialog，能够实现撑满整个屏幕吗？包括顶部statusbar和底部的安全区的高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

目前一种方案可以使页面有撑满全屏的效果，可以在EntryAbility.ets加上如下的代码，参考文档：

let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
// 1. 设置窗口全屏
let isLayoutFullScreen = true;
windowClass.setWindowLayoutFullScreen(isLayoutFullScreen)
  .then(() => {
    console.info('Succeeded in setting the window layout to full-screen mode.');
  })
  .catch((err: BusinessError) => {
    console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
  });
// 2. 设置状态栏和导航条隐藏
windowClass.setSpecificSystemBarEnabled('status', false)
  .then(() => {
    console.info('Succeeded in setting the status bar to be invisible.');
  })
  .catch((err: BusinessError) => {
    console.error(`Failed to set the status bar to be invisible. Code is ${err.code}, message is ${err.message}`);
  });

另外在promptAction.openCustomDialog ({XXXXXXXXXXXXXXXX})中添加alignment: DialogAlignment.Bottom属性,并将里面的height属性的高度适度增加一下，比如105%（大于100%，根据情况增加）,然后弹窗展示内容位置根据实际情况调整一下

更多关于HarmonyOS 鸿蒙Next promptAction.openCustomDialog 对应的自定义dialog，能够实现撑满整个屏幕吗？包括顶部statusbar和底部的安全区的高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中，promptAction.openCustomDialog 对应的自定义 dialog 默认不会撑满整个屏幕，包括顶部 statusbar 和底部的安全区高度。不过，你可以通过调整 dialog 的布局和属性来实现全屏效果。

具体来说，你可以自定义 dialog 的布局文件，在其中使用 MatchParent 来设置宽度和高度。同时，需要确保 dialog 的样式属性允许其扩展到 statusbar 和安全区以外。这通常涉及到修改 dialog 的窗口属性，比如设置 FLAG_FULLSCREEN 或类似标志（注意，HarmonyOS的API可能与Android有所不同，需要查阅相关文档确认具体标志）。

此外，你可能还需要处理 statusbar 的透明度和底部安全区的问题，这可能需要通过调整系统 UI 可见性或设置窗口的 insets 属性来实现。

请注意，由于 HarmonyOS 的系统特性和版本差异，具体实现方式可能会有所不同。建议查阅最新的 HarmonyOS 开发文档，了解如何正确设置 dialog 的布局和属性以实现全屏效果。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部