鸿蒙5.0开发进阶：UI组件-自定义弹窗 (CustomDialog)

于 2024-09-08 21:25:22 发布
阅读量844 收藏 30
点赞数 9
分类专栏： 鸿蒙5.0 ArkUI 文章标签： harmonyos ui 华为 android 鸿蒙 ArkUI 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69424697/article/details/141475050
版权
鸿蒙5.0 同时被 2 个专栏收录
124 篇文章 0 订阅
订阅专栏
ArkUI
124 篇文章 0 订阅
订阅专栏

 CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。

创建自定义弹窗

  1. 使用@CustomDialog装饰器装饰自定义弹窗。

  2. @CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。

    @CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })

  build() {
    Column() {
      Text('我是内容')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
    }
  }
}

  3. 创建构造器，与装饰器呼应相连。

     @Entry
 @Component
 struct CustomDialogUser {
   dialogController: CustomDialogController = new CustomDialogController({
     builder: CustomDialogExample(),
   })
 }

  4. 点击与onClick事件绑定的组件使弹窗弹出。

    @Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
  })

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%').margin({ top: 5 })
  }
}

弹窗的交互

弹窗可用于数据交互，完成用户一系列响应操作。

  1. 在@CustomDialog装饰器内添加按钮，同时添加数据函数。

    @CustomDialog
struct CustomDialogExample {
  cancel?: () => void
  confirm?: () => void
  controller: CustomDialogController

  build() {
    Column() {
      Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            if (this.cancel) {
              this.cancel()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.controller.close()
            if (this.confirm) {
              this.confirm()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
  }
}

  2. 页面内需要在构造器内进行接收，同时创建相应的函数操作。

    @Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: ()=> { this.onCancel() },
      confirm: ()=> { this.onAccept() },
    }),
  })

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%').margin({ top: 5 })
  }
}

    3.可通过弹窗中的按钮实现路由跳转，同时获取跳转页面向当前页传入的参数。

    // Index.ets
import { router } from '@kit.ArkUI';

@CustomDialog
struct CustomDialogExample {
  @Link textValue: string
  controller?: CustomDialogController
  cancel: () => void = () => {
  }
  confirm: () => void = () => {
  }

  build() {
    Column({ space: 20 }) {
      if (this.textValue != '') {
        Text(`第二个页面的内容为：${this.textValue}`)
          .fontSize(20)
      } else {
        Text('是否获取第二个页面的内容')
          .fontSize(20)
      }
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            if (this.controller != undefined) {
              this.controller.close()
              this.cancel()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            if (this.controller != undefined && this.textValue != '') {
              this.controller.close()
            } else if (this.controller != undefined) {
              router.pushUrl({
                url: 'pages/Index2'
              })
              this.controller.close()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }.borderRadius(10).padding({ top: 20 })
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State textValue: string = ''
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: () => {
        this.onCancel()
      },
      confirm: () => {
        this.onAccept()
      },
      textValue: $textValue
    })
  })

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  onPageShow() {
    const params = router.getParams() as Record<string, string>; // 获取传递过来的参数对象
    if (params) {
      this.dialogController?.open()
      this.textValue = params.info as string; // 获取info属性的值
    }
  }

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  exitApp() {
    console.info('Click the callback in the blank area')
  }

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}
    // Index2.ets
import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index2 {
  @State message: string = '点击返回';
  build() {
    Column() {
      Button(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold).onClick(() => {
        router.back({
          url: 'pages/Index',
          params: {
            info: 'Hello World'
          }
        });
      })
    }.width('100%').height('100%').margin({ top: 20 })
  }
}

弹窗的动画

弹窗通过定义openAnimation控制弹窗出现动画的持续时间，速度等参数。

@CustomDialog
struct CustomDialogExample {
  controller?: CustomDialogController

  build() {
    Column() {
      Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
    }
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample(),
    openAnimation: {
      duration: 1200,
      curve: Curve.Friction,
      delay: 500,
      playMode: PlayMode.Alternate,
      onFinish: () => {
        console.info('play end')
      }
    },
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 10,
  })

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

弹窗的样式

弹窗通过定义宽度、高度、背景色、阴影等参数来控制样式。

@CustomDialog
struct CustomDialogExample {
  controller?: CustomDialogController

  build() {
    Column() {
      Text('我是内容').fontSize(16).margin({ bottom: 10 })
    }
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample(),
    autoCancel: true,
    alignment: DialogAlignment.Center,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 20,
    width: '80%',
    height: '100px',
    borderWidth: 1,
    borderStyle: BorderStyle.Dashed,//使用borderStyle属性，需要和borderWidth属性一起使用
    borderColor: Color.Blue,//使用borderColor属性，需要和borderWidth属性一起使用
    shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}),
  })

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

嵌套自定义弹窗

通过第一个弹窗打开第二个弹窗时，最好将第二个弹窗定义在第一个弹窗的父组件处，通过父组件传给第一个弹窗的回调来打开第二个弹窗。

@CustomDialog
struct CustomDialogExampleTwo {
  controllerTwo?: CustomDialogController
  @State message: string = "I'm the second dialog box."
  @State showIf: boolean = false;
  build() {
    Column() {
      if (this.showIf) {
        Text("Text")
          .fontSize(30)
          .height(100)
      }
      Text(this.message)
        .fontSize(30)
        .height(100)
      Button("Create Text")
        .onClick(()=>{
          this.showIf = true;
        })
      Button ('Close Second Dialog Box')
        .onClick(() => {
          if (this.controllerTwo != undefined) {
            this.controllerTwo.close()
          }
        })
        .margin(20)
    }
  }
}
@CustomDialog
struct CustomDialogExample {
  openSecondBox?: ()=>void
  controller?: CustomDialogController

  build() {
    Column() {
      Button ('Open Second Dialog Box and close this box')
        .onClick(() => {
          this.controller!.close();
          this.openSecondBox!();
        })
        .margin(20)
    }.borderRadius(10)
  }
}
@Entry
@Component
struct CustomDialogUser {
  @State inputValue: string = 'Click Me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample({
      openSecondBox: ()=>{
        if (this.dialogControllerTwo != null) {
          this.dialogControllerTwo.open()
        }
      }
    }),
    cancel: this.exitApp,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false
  })
  dialogControllerTwo: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExampleTwo(),
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -25 } })

  aboutToDisappear() {
    this.dialogController = null
    this.dialogControllerTwo = null
  }

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  exitApp() {
    console.info('Click the callback in the blank area')
  }
  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

由于自定义弹窗在状态管理侧有父子关系，如果将第二个弹窗定义在第一个弹窗内，那么当父组件（第一个弹窗）被销毁（关闭）时，子组件（第二个弹窗）内无法再继续创建新的组件。

星星不闪包退1
关注
专栏目录
3.7、自定义弹窗（CustomDialog）
lujianfeiccie2009的专栏
04-17 209
使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。build() {Column() {Text('我是内容')3.创建构造器，与装饰器呼应相连。})4.点击与onClick事件绑定的组件使弹窗弹出})
ESPC2-01 Wi-Fi 和 BLE5.0 共存模块：智能设备开发的最佳选择
最新发布
09-10
ESPC2-01 Wi-Fi 和 BLE5.0 共存模块：智能设备开发的最佳选择
【鸿蒙软件开发】自定义弹窗（CustomDialog）
m0_62599305的博客
10-25 5895
自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。
OpenHarmony实战开发-如何实现自定义弹窗 (CustomDialog)
m0_70749039的博客
04-27 1016
CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。
HarmonyOS 鸿蒙应用开发( 六、实现自定义弹窗CustomDialog）
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-25 4810
自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。
【愚公系列】2023年12月 HarmonyOS教学课程 020-ArkUI组件（CustomDialog）
热门推荐
时光隧道
12-08 6万+
HarmonyOS的@CustomDialog是一个自定义对话框控件，它可以帮助开发人员快速创建各种各样的对话框，包括提示框、确认框、输入框等。使用@CustomDialog，开发人员可以自定义对话框的标题、消息、按钮、图标等属性，以及对话框的样式和布局。此外，它还支持自定义对话框的背景、动画和触发事件等属性，以满足不同场景的需求。build() {Column() {Text('我是内容')@Entry@Component})build() {Column() {})
基于ArkUI现有能力实现自定义弹窗封装方案
hongxiaomeng的博客
05-09 523
鸿蒙HarmonyOS实战-ArkUI组件（CustomDialog）_鸿蒙 自定义对话框(1)
2401_84853048的博客
05-09 636
使用@CustomDialog，开发人员可以自定义对话框的标题、消息、按钮、图标等属性，以及对话框的样式和布局。此外，它还支持自定义对话框的背景、动画和触发事件等属性，以满足不同场景的需求。build() {Column() {Text(‘我是内容’)@Entry@Component})build() {Column() {})
Python库 | pyinstaller-5.0-py3-none-manylinux2014_x86_64.whl
05-09
资源分类：Python库 所属语言：Python 资源全名：pyinstaller-5.0-py3-none-manylinux2014_x86_64.whl 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
采用thinkphp 5.0开发源导航V1.0-集网址、资源、资讯于一体的导航系统.zip
07-04
采用thinkphp 5.0开发源导航V1.0-集网址、资源、资讯于一体的导航系统 源导航是一款集网址、资源、资讯于一体的导航系统,选用thinkphp 5.0开发! 遍及常识：建立一个网站的标配包含了服务器和域名 （源授权不支持...
ffmpeg-5.0-1.5.7-API文档-中文版.zip
07-06
赠送jar包：ffmpeg-5.0-1.5.7.jar； 赠送原API文档：ffmpeg-5.0-1.5.7-javadoc.jar； 赠送源代码：ffmpeg-5.0-1.5.7-sources.jar； 赠送Maven依赖信息文件：ffmpeg-5.0-1.5.7.pom； 包含翻译后的API文档：ffmpeg-5.0...
DBeaver链接hive驱动包下载： hive-jdbc-uber-2.6.5.0-292.jar
05-17
《DBeaver与Hive连接：hive-jdbc-uber-2.6.5.0-292.jar驱动详解》 在大数据处理领域，Hive作为一个基于Hadoop的数据仓库工具，广泛用于数据查询和分析。而DBeaver，作为一款跨平台的数据库管理工具，以其用户友好的...
鸿蒙HarmonyOS实战-ArkUI组件（CustomDialog）
shudaoshanQAQ的博客
01-05 1618
CustomDialog组件是一种自定义对话框，可以通过开发人员根据特定的要求定制内容和布局。它允许开发人员创建一个完全可定制的对话框，可以显示任何类型的内容，例如文本、图像、表单和按钮。
【鸿蒙开发细枝末节】自定义弹窗实现
yihanss的博客
04-09 1702
创建一个新文件，我这里起名叫build() {} }这个注解表示这个控件是对话框如果不写这个的话，无法被其他文件调用接下来我们在build里面写界面，先分析一下效果图：一个输入框TextInput，两个按钮Button水平排列，输入框和按钮竖直排列。最外层使用Column排列输入框和按钮，两个按钮使用Row包起来横排，按钮中间用Blank填充空隙。build() {Column() {TextInput({ placeholder: '请输入内容' }) //输入框。
如何使用命令行对RK开发板进行OpenHarmony版本烧录？
m0_64420071的博客
03-29 1601
开发版烧录
鸿蒙5.0开发【鸿蒙自定义 Dialog 的 6 种方式】
2401_82772199的博客
08-05 1485
自定义弹窗的最常规方式就是通过 CustomDialogController 类去控制显示自定义的弹窗或者浮层。
Harmony鸿蒙实现隐私政策自定义弹窗
le0102的博客
07-23 1181
Harmony鸿蒙实现隐私政策自定义弹窗 这个跟之前的，类AlertDialog的CommonDialog是一样的，不过这个是可以自定义布局的 效果如下： 一、新建一个PrivacyDialog public class PrivacyDialog extends CommonDialog { private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0x00201, "MY_TAG"); private C
鸿蒙开发自定义Dialog
王鑫林的博客
06-08 1227
首先创建一个BaseDialog public class WbBaseDialog extends CommonDialog { /** * 类似Android Dialog的cancelable属性， * true: 支持点击外部或返回键消失。 * false: 则只有手动调用hide才会消失。 */ private boolean cancelable = true; protected boolean hideWithBackPre
Hibernate Validator 5.0 中文文档：Bean验证与自定义约束指南
"hibernate_validator5.0 中文文档" Hibernate Validator是Bean Validation (JSR-303)规范的官方实现，它提供了一套强大的校验框架，用于确保Java对象的数据符合预设的规则。在5.0.0.Alpha1版本中，Hibernate ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值