#鸿蒙通关秘籍#如何在HarmonyOS Next中通过自定义Dialog实现省市区选择器的弹窗功能？

import AreaPicker from './AreaPicker'

@CustomDialog
export default struct AreaPickerDialog {
  private dialogController: CustomDialogController
  @State value: string[] = []
  private onChange: (value: string[]) => void = () => {}

  aboutToAppear(): void {
    this.defaultValue = this.value
    if (Array.isArray(this.value) && this.value.length < 3) {
      this.value = ['北京市', '北京市', '东城区']
    }
  }

  build() {
    Column({ space: 50 }) {
      Row() {
        Text('取消')
          .fontColor('#909090')
          .onClick(() => {
            this.dialogController.close()
          })
        Text('请选择省市区')
        Text('确定')
          .fontColor('#0A7EE6')
          .onClick(() => {
            if (this.defaultValue.join('') !== this.value.join('')) {
              this.onChange(this.value)
            }
            this.dialogController.close()
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

      AreaPicker({ value: this.value })
    }
    .backgroundColor(Color.White)
    .borderRadius(24)
    .padding(20)
    .width('93%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.