鸿蒙应用开发-自定义弹窗(Custom Dialog)的定义与使用

 

1.为什么使用自定义组件

当我们发起网络请求后要在UI上反应当前的请求情况，需要动态的向用户展示当前的网络状况，加强用户与UI之间的交互，我们在请求网络或者广告、中奖、警告、软件更新时可以使用自定义弹窗组件，自定义的样式风格自由可以满足更多的用户需求。

2.新建一个ets文件用于放置自定义的弹窗具体内容

使用@CustomDialog装饰器装饰自定义弹窗，这个修饰器内自定义的内容也就是自定义的弹窗内容

必须在自定义里面的内容里加入控制器controller: CustomDialogController

静态效果：

加上修饰器@Preview可以预览样式设置效果

自定义弹窗内容代码：

文件路径：entry/src/main/ets/common/components/CustomDialogCom.ets（文件位置根据自己目录结构来存放）

@CustomDialog
export struct LoadDialog {
  @State
  message: string = '' //外部传入的提示语
  controller: CustomDialogController //控制器
​
  build() {
      //弹窗内容，这里放什么最终效果就会显示什么
    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      LoadingProgress()
          .width(30).height(30)
          .color('#fff')
      if (this.message) {
        Text(this.message)
            .fontSize((14))
            .fontColor('#fff')
      }
    }
    .width(150)
    .height(50)
    .padding(10)
    .backgroundColor('rgba(0,0,0,0.5)')
    .borderRadius(8)
  }
}

 

3.实例化CustomDialogController创建构造器与装饰器呼应相连

在使用的页面位置创建构造器，在构造器里面接收刚才自定义的弹窗

dialog: CustomDialogController = new CustomDialogController({
  builder: LoadDialog({ message: '正在加载...' }), //定义给谁用
  customStyle: true, //打卡组件已定义的私有属性
  alignment: DialogAlignment.Center, //设置显示的位置
})

4.通过生命周期函数或者想要触发的事件里进行使用和关闭

this.dialog.open() //打开弹窗
​
this.dialog.close() //关闭弹窗

5.总结

自定义弹窗的使用灵活可以根据具体需求做出不同的改变，this.dialog.open() 打开弹窗的方法和this.dialog.close()关闭弹窗的方法可以用于网络请求中灵活实现开启与关闭，轻松展现出网络的请求状况。

以上的若如不足之处敬请谅解，内容中涉及到组件之间的传参，若有学有需要的话我后面出一期，每天一个知识点共同进步。