鸿蒙 制作自定义弹窗效果

自定义弹窗效果

1. 首先在一个文件夹 必须是ets蓝色安装包下 随意即可 也可以把它 当做工具 存着 我们待会 调用

2. 我们看看实现逻辑 然后 开始复制下面的代码  放入 CustomDialogLoading.ets中

@CustomDialog
export struct CustomDialogLoading {
  message: string = '加载中'
  controller: CustomDialogController

  build() {
    Column({ space: 10 }) {
      LoadingProgress()
        .width(48)
        .height(48)
        .color($r('app.color.white'))
      if (this.message) {
        Text(this.message)
          .fontSize(14)
          .fontColor($r('app.color.white'))
      }
    }
    .justifyContent(FlexAlign.Center)
    .width(120)
    .height(120)
    .backgroundColor('rgba(0,0,0,0.6)')
    .borderRadius(16)
  }
}

看不懂下面有解释代码:

@CustomDialog 
// 这是一个装饰器，可能用于为后面定义的结构体添加特定的功能或属性

export struct CustomDialogLoading { 
// 导出一个名为 CustomDialogLoading 的结构体

  message: string = '加载中' 
// 定义一个字符串类型的属性 message，初始值为 '加载中'

  controller: CustomDialogController 
// 定义一个名为 controller 的属性，其类型为 CustomDialogController

  build() { 
// 定义一个名为 build 的方法，用于构建界面布局

    Column({ space: 10 }) { 
// 创建一个 Column 布局容器，并设置间距为 10

      LoadingProgress() 
// 创建一个加载进度组件

      .width(48) 
// 设置宽度为 48

      .height(48) 
// 设置高度为 48

      .color($r('app.color.white')) 
// 设置颜色为应用中定义的白色

      if (this.message) { 
// 如果 message 属性有值

        Text(this.message) 
// 创建一个文本组件，并显示 message 的内容

        .fontSize(14) 
// 设置文本的字体大小为 14

        .fontColor($r('app.color.white')) 
// 设置文本的颜色为应用中定义的白色

      }
    }
  .justifyContent(FlexAlign.Center) 
// 设置 Column 容器内的内容在主轴上居中对齐

  .width(120) 
// 设置 Column 容器的宽度为 120

  .height(120) 
// 设置 Column 容器的高度为 120

  .backgroundColor('rgba(0,0,0,0.6)') 
// 设置背景颜色为半透明的黑色

  .borderRadius(16) 
// 设置容器的圆角半径为 16

  }
}

然后我们在官方给的 Page/Index中输入自己需要调用的代码:

import { CustomDialogLoading } from '@Test/Apublic'

@Entry
@Component
struct Index {
  @State pand: boolean = true
  dialog: CustomDialogController = new CustomDialogController({
    builder: CustomDialogLoading({ message: '你猜我在干嘛呢' }),
    customStyle: true,
    alignment: DialogAlignment.Center
  })

  build() {
    Column() {
      Button('点我呀~')
        .onClick(() => {
          if (!this.pand) {
            this.dialog.open()
          } else {
            this.dialog.close()
          }
        })
    }
  }
}

最终实现的效果以及代码:

注意以下是模拟器 并非预览器 预览器不能实现这个自定义弹窗 所以建议下载模拟器 运行

以上代码 就是调用的时候需要进行对按钮的定义 :

dialog: CustomDialogController = new CustomDialogController({
  // 创建一个 CustomDialogController 类型的对象 dialog，并进行配置
  builder: CustomDialogLoading({ message: '你猜我在干嘛呢' }),
  // 指定构建器为 CustomDialogLoading，并设置其 message 属性
  customStyle: true,
  // 设置自定义样式为 true
  alignment: DialogAlignment.Center
  // 设置对齐方式为中心对齐
})

this.dialog.open()//打开自定义弹窗
this.dialog.close() //关闭自定义弹窗

对应的两种方法是这个 其实下面那个else可以不用写 自行点击 屏幕效果会自动消失 我就顺便粘贴了一下 一般这种自定弹窗 用于获取数据前和获取数据后 调用接口 数据获取前弹窗 数据获取完毕就需要进行第二种方法 也就是关闭自定义弹窗 

官方文档地址

我给大家描述了华为自定义弹窗的源码展示了如何创建并配置一个自定义弹窗，包括设置弹窗内容、样式、对齐方式，以及通过按钮点击控制弹窗的打开和关闭。

掌握自定义弹窗的实现方法，能提升应用的交互性和用户体验，满足多样化的业务需求，使应用更加灵活和个性化。

深入探究自定义弹窗的代码，每一次理解都是技能的积累。勇敢前行，不断实践，相信您能运用这一知识为应用增添独特魅力，打造出令人惊艳的交互效果！

以上内容仅供学习交流，如有违法或者侵权可以联系删除。