【鸿蒙实战开发】实现省市区镇-四级地址选择弹窗组件

通过本篇文章小伙伴们能学到什么？我简单的总结了一下大概有以下几点。

• 了解到鸿蒙Next 自定义弹窗 的核心用法。
• 了解到 实现级联选择的实现思路和过程，不仅限于鸿蒙，也适用于其他框架和场景。
• 了解到鸿蒙Next中如何封装自己的自定义组件。
• 了解到鸿蒙Next中组件之间是如何通信的，以及如何实现自己想要的功能。

实现过程

一、准备工作

• 安装好最新DevEco Studio 开发工具,创建一个新的空项目。
• 新增目录结构 ets/components/cascade/ ,在下面添加文件 addressObj.ts 用于存放地址Obj对象,index.ets 用来初始化弹窗容器，CustomAddress.ets用来存放具体的级联选择业务代码，Cascade.d.ts TS 声明文件。

二、实现自定义弹窗

• 将官网自定义弹窗的示例3复制过来,放入到ets/components/cascade/index.ets中后稍微修改一下，修改的地方我都添加注释了。 主要是 去掉 @Entry 页面的入口组件装饰，修改组件命名并用 export暴露组件供外部使用。

`// xxx.ets
@CustomDialog
struct CustomDialogExample {
 controller?: CustomDialogController
 cancel: () => void = () => {
 }
 confirm: () => void = () => {
 }
 build() {
 Column() {
 Text('这是自定义弹窗')
 .fontSize(30)
 .height(100)
 Button('点我关闭弹窗')
 .onClick(() => {
 if (this.controller != undefined) {
 this.controller.close()
 }
 })
 .margin(20)
 }
 }
}
// @Entry  去掉入口页面标志
@Component
export  struct CustomDialogCascade { //修改命名 注意前面加了 export 需要暴露组件
 dialogController: CustomDialogController | null = new CustomDialogController({
 builder: CustomDialogExample({
 cancel: ()=> { this.onCancel() },
 confirm: ()=> { this.onAccept() }
 }),
 cancel: this.existApp,
 autoCancel: true,
 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
 console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
 console.log("dialog onWillDismiss")
 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
 dismissDialogAction.dismiss()
 }
 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
 dismissDialogAction.dismiss()
 }
 },
 alignment: DialogAlignment.Center,
 offset: { dx: 0, dy: -20 },
 customStyle: false,
 cornerRadius: 20,
 width: 300,
 height: 200,
 borderWidth: 1,
 borderStyle: BorderStyle.Dashed,//使用borderStyle属性，需要和borderWidth属性一起使用
 borderColor: Color.Blue,//使用borderColor属性，需要和borderWidth属性一起使用
 backgroundColor: