手把手教你成功省城市镇

想了解更多对于开源的内容，请访问：

鸿蒙开发者社区

前言

hello 大家好，我是无言，由于地址级联选用配置其实还是十分经常出现的，而且官方有TextPicker文本选用组件也可以成功地址级联选用，然而我发现超越3级之后，文字就太多了，会很美观，不好操作等关系疑问。所以有必要自己来成功一个美观的省城市镇-四级地址级联选用组件。

目标

经过本篇文章小同伴们能学到什么？我繁难的总结了一下大略有以下几点。

成果提早看一看：

成功环节

一、预备上班

二、成功自定义弹窗

// xxx.ets@CustomDialogstruct CustomDialogExample {controller?: CustomDialogControllercancel: () => void = () => {}confirm: () => void = () => {}build() {Column() {Text('这是自定义弹窗').fontSize(30).height(100)Button('点我封锁弹窗').onClick(() => {if (this.controller != undefined) {this.controller.close()}}).margin(20)}}}// @Entry去掉入口页面标记@Componentexportstruct 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: Color.White,shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}),})// 在自定义组件行将析构销毁时将dialogController置空aboutToDisappear() {this.dialogController = null // 将dialogController置空}onCancel() {console.info('Callback when the first button is clicked')}onAccept() {console.info('Callback when the second button is clicked')}existApp() {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 })}}

import {CustomDialogCascade} from "../components/cascade/index"@Entry@Componentstruct Index {build() {RelativeContainer() {CustomDialogCascade()}.height('100%').width('100%')}}

预览一下看看成果。

三、成功父子组件的通讯

在讲后续配置前，这里有必要讲一下鸿蒙开发组件形态。

@State @Watch('onCountChange') count: number = 0/** * 一旦count变动，此回调函数就会智能调用 * @param count被监督的形态属性名 */onCountChange (count) {// 可以在此做特定处置}

四、完善逻辑

好了回到咱们的主题，前面咱们的示例中，只是子组件自己调用弹窗了，咱们要成功以下几个配置。

修正/ets/components/cascade/index.ets,成功父组件传参给子组件，子组件回调方法传值给父组件。而后还修正了弹窗的样式以及位置，详细请看上方代码。

// xxx.ets@CustomDialogstruct CustomDialogExample {controller?: CustomDialogController@Prop level: number;cancel: () => void = () => {}confirm: (data:string) => void = () => {}build() {Column() {Text('这是自定义弹窗').fontSize(30).height(100)Text('层级'+this.level)Button('点我封锁弹窗').onClick(() => {if (this.controller != undefined) {this.controller.close()}this.confirm('aaa') //回传消息}).margin(20)}}}// @Entry去掉入口页面标记@Componentexportstruct CustomDialogCascade { //修正命名 留意前面加了 export 须要泄露组件@Link CustomDialogController: CustomDialogController | null ;@Prop level: number;cancel?: () => voidconfirm?: (data:string) => void = () => {}aboutToAppear(): void {this.CustomDialogController=new CustomDialogController({builder: CustomDialogExample({cancel: this.cancel,confirm: this.confirm,level:this.level,}),autoCancel: true,onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {dismissDialogAction.dismiss()}if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {dismissDialogAction.dismiss()}},alignment: DialogAlignment.Bottom,offset: { dx: 0, dy:0},customStyle: false,cornerRadius: 0,width: '100%',backgroundColor: Color.White,})}aboutToDisappear() {this.CustomDialogController = null // 将dialogController置空}build() { //由于用的 自定义弹窗配置，所以这上方可认为空}}

修正/ets/pages/index.ets 文件成功配置重要是父元素调用子组件方法，以及子组件的回调方法调用。

import {CustomDialogCascade} from "../components/cascade/index"@Entry@Componentstruct Index {@State CustomDialogController :CustomDialogController|null = null;build() {Column() {Button('关上弹窗').onClick(()=>{this.CustomDialogController?.open()})CustomDialogCascade({level:3,//层级 最大4最小1CustomDialogController:this.CustomDialogController, //弹窗实体类 重要控制弹窗显示暗藏等confirm:(data)=>{console.log('data',(data))}},)}.height('100%').width('100%')}}

运转成果如下，点击点我封锁弹窗按钮可以发现 子组件的回调消息aaa在父组件中成功打印。

五、完善地址级联逻辑

export const regionDict = {"86": {"110000": "北京市","120000": "天津市","130000": "河北省",...},"110000": {"110100": "北京市"},"110100": {"110101": "东城区","110102": "西城区","110105": "背阴区","110106": "丰台区","110107": "石景山区","110108": "海淀区","110109": "门头沟区","110111": "房山区","110112": "通州区","110113": "顺义区","110114": "昌平区","110115": "大兴区","110116": "怀柔区","110117": "平谷区","110118": "密云区","110119": "延庆区"},"110101": {"110101001": "东华门街道","110101002": "景山街道"},...};

exportinterface RegionType{code?:string;pcode?:string;name?:string}exporttype levelNumber = 1 | 2 | 3 | 4;

import { regionDict } from "./addressObj"import {RegionType,levelNumber} from './Cascade'@CustomDialogexportstruct CustomAddress {controller?: CustomDialogController@State region:RegionType[]=[]; //寄存选中的结果@State>

import{CustomAddress }from"./CustomAddress"import {RegionType,levelNumber} from './Cascade'export{RegionType }from './Cascade' //从新泄露申明文件类型// @Entry去掉入口页面标记@Componentexportstruct CustomDialogCascade { //修正命名 留意前面加了 export 须要泄露组件@Link CustomDialogController: CustomDialogController | null ;@Prop level: levelNumber;cancel?: () => voidconfirm?: (data:RegionType[]) => void = () => {}aboutToAppear(): void {this.CustomDialogController=new CustomDialogController({builder: CustomAddress({cancel: this.cancel,confirm: this.confirm,level:this.level,}),autoCancel: true,onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {dismissDialogAction.dismiss()}if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {dismissDialogAction.dismiss()}},alignment: DialogAlignment.Bottom,offset: { dx: 0, dy:0},customStyle: false,cornerRadius: 0,width: '100%',backgroundColor: Color.White,})}aboutToDisappear() {this.CustomDialogController = null // 将dialogController置空}build() {}}

从新运转一下，当街道选好之后，即可发现弹窗智能封锁，而且选好地址消息成功拿到。

总结

本文详细引见了对于在华为鸿蒙系统去成功一个自定义弹窗的详细教程，重要是提供一些思绪，了解组件之间通讯的技巧，以及如何成功一个地址级联选中的详细环节。

想了解更多对于开源的内容，请访问：

鸿蒙开发者社区