零基础开始学习鸿蒙-自定义弹窗

目录

1.弹窗关键装饰器 @CustomDialog，在自定义弹窗加上这个关键注解就可以当成一个组件来用啦。

2.弹窗的调用，我们给dialogController挂上我们自定义的弹窗,通过alignment来控制弹窗的位置。

3.通过一个按钮的点击事件，调用dialogController.open()方法打开弹窗，反之，dialogController.close()关闭弹窗。

4.下面附上完整的代码

5.运行效果如下图所示

---

1.弹窗关键装饰器 @CustomDialog，在自定义弹窗加上这个关键注解就可以当成一个组件来用啦。

代码示例:


//弹窗组件
@CustomDialog
struct myDialog{
  controller:CustomDialogController
  build(){
    Column(){
      Text('登录成功!').fontSize(15).fontColor(Color.Green).margin({top:20,bottom:20})
    }
  }
}

2.弹窗的调用，我们给dialogController挂上我们自定义的弹窗,通过alignment来控制弹窗的位置。

代码示例:
 
 //弹窗
      dialogController: CustomDialogController = new CustomDialogController({
      builder: myDialog({}),
      alignment: DialogAlignment.Center,
  })

3.通过一个按钮的点击事件，调用dialogController.open()方法打开弹窗，反之，dialogController.close()关闭弹窗。

代码示例:

 Button("点击我弹窗").onClick(()=>{
           //弹窗
           this.dialogController.open();
         });

4.下面附上完整的代码

代码示例:


import router from '@ohos.router';
//弹窗组件
@CustomDialog
struct myDialog{
  controller:CustomDialogController
  build(){
    Column(){
      Text('登录成功!').fontSize(15).fontColor(Color.Green).margin({top:20,bottom:20})
    }
  }
}

@Entry
@Component
struct testDialog{
   //弹窗
      dialogController: CustomDialogController = new CustomDialogController({
      builder: myDialog({}),
      alignment: DialogAlignment.Center,
  })
  build(){
    Column(){
      Flex({alignContent:FlexAlign.Center}){
       Row({space:5}){
         Button("点击我弹窗").onClick(()=>{
           //弹窗
           this.dialogController.open();
         });
         Button("返回").onClick(()=>{
           //关闭弹窗
           this.dialogController.close();
           //返回
           router.back();
         })
       }
      }

    }

  }
}

5.运行效果如下图所示