鸿蒙中选择地区

1.首页ui

TypeScript 复制代码

import { CustomDialogExampleSelectRegion } from './selectRegion/SelectRegionDialog';


@Entry
@Component
struct Index {
  @State selectedRegion: string = '选择地区'
  // 地区
  dialogControllerSelectRegion: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExampleSelectRegion({
      selectedRegion: this.selectedRegion
    }),
    autoCancel: true,
    alignment: DialogAlignment.Center,
    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()
      }
    },
    width: 300,
    height: 340,
    offset: { dx: 0, dy: -25 }
  })

  build() {
    Column() {
      Button(this.selectedRegion).onClick(() => {
        this.dialogControllerSelectRegion?.open()
      })
    }
    .width('100%')
    .height("100%")
  }
}

2.弹窗ui

TypeScript 复制代码

import { SelectRegionComponent } from "./SelectRegionConponent"

// 选择地区
@CustomDialog
export struct CustomDialogExampleSelectRegion {
  controllerSelectRegion?: CustomDialogController
  @Prop changeFontSize: number = 0;
  @State provincesOrMunicipalities: string = 'country'
  @Link selectedRegion: string

  backPrevious() {
    if (this.provincesOrMunicipalities === 'country') {
      this.controllerSelectRegion?.close()
    }
    if (this.provincesOrMunicipalities === 'provinces') {
      this.provincesOrMunicipalities = 'country'
    }
    if (this.provincesOrMunicipalities === 'city') {
      this.provincesOrMunicipalities = 'provinces'
    }
    if (this.provincesOrMunicipalities === 'district') {
      this.provincesOrMunicipalities = 'city'
    }
  }

  isSelectedRegionFn(area: string) {
    this.selectedRegion = area
    this.controllerSelectRegion?.close()
  }

  build() {
    Column() {
      Row() {
        Row() {
          Text('上一级').fontSize(22)
        }.width('33.33%')
      }.width('100%').margin({ left: 20, bottom: 10 }).justifyContent(FlexAlign.SpaceBetween).onClick(() => {
        this.backPrevious()
      })

      SelectRegionComponent({
        provincesOrMunicipalities: this.provincesOrMunicipalities,
        isSelectedRegionFn: this.isSelectedRegionFn.bind(this)
      }).layoutWeight(1)
    }.width('100%').height('100%')
  }
}

3.弹窗组件ui

TypeScript 复制代码

import { common } from '@kit.AbilityKit';
import { util } from '@kit.ArkTS';
// 区县
export class DistrictType {
  name: string = '';
  code: string = '';
}

//省或市
export class ProvinceType {
  name: string = '';
  code: string = '';
  districts?: DistrictType[];
}

// 国家
export class CountryType {
  name: string = '';
  subName: string = '';
  provinces?: ProvinceType[];
}
@Component
export struct SelectRegionComponent {
  @State areaData_Country: CountryType[] = [] //国家
  @State areaData_Provinces: ProvinceType[] = [] //省直辖市
  @State areaData_City: ProvinceType[] = [] //市
  @State areaData_District: DistrictType[] = [] //区县
  @Link provincesOrMunicipalities: string
  isSelectedRegionFn: (area: string) => void = (area) => {

  }

  aboutToAppear(): void {
    let context = getContext(this) as common.UIAbilityContext;
    let resourceManager = context.resourceManager;
    resourceManager.getRawFileContent("area.json").then(value => {
      let rawFile = value;
      let textDecoder = util.TextDecoder.create('utf-8', { ignoreBOM: true })
      let retStr = textDecoder.decodeWithStream(rawFile, { stream: false });
      this.areaData_Country = JSON.parse(retStr)
      this.areaData_Provinces = this.areaData_Country[1].provinces as ProvinceType[]
    })
  }

  getFullPath_City(districtCode: string) {
    for (const country of this.areaData_Country) {
      const countryName = country.name; // 中国
      for (const province of (country.provinces as ProvinceType[])) {
        const provinceName = province.name; // 北京市
        for (const district of (province.districts as DistrictType[])) {
          if (district.code === districtCode) {
            return `${countryName} ${provinceName} ${district.name}`; // 返回完整路径
          }
        }
      }
    }
    return null; // 如果没有找到
  }

  getFullPath_Other(districtCode: string) {
    if (!this.areaData_Country || this.areaData_Country.length === 0) {
      return null; // 检查数据是否为空
    }
    // 遍历国家列表
    for (const country of this.areaData_Country) {
      const countryName = country.name; // 获取国家名称
      if (!country.provinces || country.provinces.length === 0) {
        continue; // 检查省是否存在
      }
      // 遍历省份列表
      for (const province of country.provinces) {
        const provinceName = province.name; // 获取省份名称
        if (!province.districts || province.districts.length === 0) {
          continue; // 检查城市是否存在
        }
        // 遍历城市列表
        for (const city of province.districts) {
          const cityName = city.name; // 获取城市名称
          if (!(city as ProvinceType).districts || ((city as ProvinceType).districts as DistrictType[]).length === 0) {
            continue; // 检查区是否存在
          }
          // 遍历区县列表
          for (const district of ((city as ProvinceType).districts as DistrictType[])) {
            if (district.code === districtCode) {
              // 找到匹配的区，返回完整路径
              return `${countryName} ${provinceName} ${cityName} ${district.name}`;
            }
          }
        }
      }
    }
    return null; // 如果没有找到匹配的区县，返回 null
  }

  ConfirmRegion(item: CountryType | ProvinceType | DistrictType) {
    if ((item as CountryType).provinces?.length === 0 || (item as ProvinceType).districts?.length === 0) {
      this.isSelectedRegionFn(item.name)
      return
    }
    if ((item as CountryType).provinces?.length !== 0 || (item as ProvinceType).districts?.length !== 0) {

      if (this.provincesOrMunicipalities === 'district') {
        const area = this.getFullPath_Other((item as DistrictType).code)
        this.isSelectedRegionFn(area as string)
      }

      if (this.provincesOrMunicipalities === 'city') {
        if ((item as DistrictType).code.includes("110") || (item as DistrictType).code.includes("120") ||
        (item as DistrictType).code.includes("310") || (item as DistrictType).code.includes("500")) {
          const area = this.getFullPath_City((item as DistrictType).code)
          this.isSelectedRegionFn(area as string)

          return
        }
        this.provincesOrMunicipalities = 'district'
        this.areaData_District = (item as ProvinceType).districts as DistrictType[]

      }
      if (this.provincesOrMunicipalities === 'provinces') {
        this.provincesOrMunicipalities = 'city'
        this.areaData_City = (item as ProvinceType).districts as ProvinceType[]
      }
      if (this.provincesOrMunicipalities === 'country') {
        this.provincesOrMunicipalities = 'provinces'
      }
    }
  }

  @Builder
  areaListBuilder(item: CountryType | ProvinceType | DistrictType) {
    Text(item.name)
      .height(50)
      .width('100%')
      .border({ width: { bottom: 1 }, color: "#cccccc" })
      .margin({ left: 20 })
      .onClick(() => {
        this.ConfirmRegion(item)
      })
  }

  build() {
    Column() {
      List() {
        ForEach(this.provincesOrMunicipalities === 'country' ? this.areaData_Country :
          this.provincesOrMunicipalities === 'provinces' ? this.areaData_Provinces :
            this.provincesOrMunicipalities === 'city' ? this.areaData_City : this.areaData_District,
          (item: CountryType | ProvinceType | DistrictType, i: number) => {
            ListItem() {
              this.areaListBuilder(item)
            }
          })
      }
    }.width('100%').height('100%')
  }
}

注意！！！！图中的数据来自于rawfile文件下的json文件

文件地址：世界国家地区，以及省市区-CSDN博客

世界国家地区，以及省市区资源-CSDN文库，，想给大家免费下载，但是不知道怎么弄，知道方法的朋友可以分享一下，