HarmonyOS鸿蒙Next中@CustomDialog如何铺满整个屏幕？

import { MeasureText } from '@kit.ArkUI';
import measure from '@ohos.measure'
import { http } from '@kit.NetworkKit';

const BLOCK_DEFAULT_BORDER_WIDTH = 4;
@Entry
@Component
struct SliderIndex {
  @State loginState:string = '未登录'
  dialogControllerTwo: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExampleTwo({msg:this.loginState}),
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Top,
  })
  controller?: CustomDialogController
  onPageShow(): void {

  }
  login(){
    return '登录失败';
  }
  build() {
    Column () {
      Text('当前状态:'+this.loginState)
      Text('登录')
        .onClick(()=>{
          let res =   this.login()
          this.loginState = res
          console.log('denglu ===',res)
          if (res === '登录失败') {
            if (this.dialogControllerTwo) {
              this.dialogControllerTwo.open()
            }
          }
        })

    }

  }
}
@CustomDialog
struct CustomDialogExampleTwo {
  controllerTwo?: CustomDialogController
  @Prop msg:string = ''
  build() {
    Column () {
      Text(this.msg)
        .fontSize(30)
        .height(100)
      Button('点我关闭弹窗')
        .onClick(() => {
          if (this.controllerTwo != undefined) {
            this.controllerTwo.close()
          }
        })
        .margin(20)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Orange)
  }
}

更多关于HarmonyOS鸿蒙Next中@CustomDialog如何铺满整个屏幕？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼•1 个月前

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5#customdialogcontrolleroptions对象说明。可以设置宽高吧。

yibo5220 3楼•1 个月前

在HarmonyOS鸿蒙Next中，要使@CustomDialog铺满整个屏幕，可以通过设置LayoutConfig来实现。首先，在CustomDialog的构造函数中获取Window对象，然后设置Window的LayoutConfig为MATCH_PARENT，以确保对话框的宽度和高度与屏幕一致。

具体代码如下：

@CustomDialog
export class FullScreenDialog extends CustomDialogController {
  constructor() {
    super({
      builder: () => {
        // 对话框内容
      },
      customStyle: true,
    });

    // 获取窗口对象
    const window = this.getWindow();
    if (window) {
      // 设置窗口布局参数为MATCH_PARENT
      window.setLayoutConfig({
        width: LayoutConfig.MATCH_PARENT,
        height: LayoutConfig.MATCH_PARENT,
      });
    }
  }
}

通过以上代码，@CustomDialog将铺满整个屏幕。注意，customStyle需要设置为true，以允许自定义对话框样式。

wuwangju 4楼•1 个月前

在HarmonyOS鸿蒙Next中，要使@CustomDialog铺满整个屏幕，可以通过设置LayoutConfig来实现。具体步骤如下：

在CustomDialog的构造函数中，使用LayoutConfig设置宽度和高度为MATCH_PARENT。
在布局文件中，确保根布局的宽度和高度也设置为MATCH_PARENT。

示例代码：

CustomDialog dialog = new CustomDialog(context);
dialog.setLayoutConfig(new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT));

这样，CustomDialog将会铺满整个屏幕。