鴻蒙地址選擇庫（ArkTs UI）

功能點：支持三級聯動、點擊確認返回省市區code及name（安心）、布局可以高度自定義

實現：TextPicker+讀取本地json（也可用第三方的json 不過需要自行調整了）
先上圖吧、廢話下面再說：

湊和看吧、（可能是虛擬機卡、或者動畫原因、聯動會慢一些）

調用：
?

  方式一 1、//注意調用處是在ets @Component 組件中let areaData = await AreaDataUtil.loadJsonFile(getContext())GlobalAreaPicker.show(this.getUIContext(),{areaData: areaData,onConfirm: (province, city, county,addr) => {//或者直接用addrconsole.log(`選中：${province.name} ${city.name} ${county.name}`);},onCancel: () => {console.log('取消選擇');}})方式二 2、//調用注意調用處是在ets @Component 組件中showAreaPicker(this.getUIContext(), (province, city, county,addr) => {// this.companyAddress = `${province.name} ${city.name} ${county.name}`;})

1、主要類說明看截圖

補充代碼截圖

2、上代碼 :
2.1 GlobalAreaPicker.ets（核心實現類）

// GlobalAreaPicker.ets
import { JsonAddr } from '../utils/AreaDataUtil';
import { ComponentContent } from '@kit.ArkUI';
import { FontDiy, TextStyleModifier } from './style/TextStyles';
import { IS_PREVIEW } from 'models';
import { DIVIDER_COLOR } from '../constant/ColorConstant';//地址選擇器參數傳遞
export interface AreaSelectOption {areaData: JsonAddr[],onConfirm?: (province: JsonAddr, city: JsonAddr, county: JsonAddr,addressInfo:string) => void,//addressInfo 拼接好的地址 默認空格隔開onCancel?: () => void// 反正我沒用著、留著唄
}//全局彈窗封裝、不依賴沙雕Pager
export class GlobalAreaPicker {static contentNode?: ComponentContent<Object>static show(uiContext: UIContext, options: AreaSelectOption) {GlobalAreaPicker.contentNode = new ComponentContent(uiContext,wrapBuilder(buildAreaPicker),options);uiContext.getPromptAction().openCustomDialog(GlobalAreaPicker.contentNode, {alignment: DialogAlignment.Bottom,autoCancel: true,});}static close(uiContext: UIContext) {if (GlobalAreaPicker.contentNode !== null) {uiContext.getPromptAction().closeCustomDialog(GlobalAreaPicker.contentNode)}}
}//全局彈窗需要、甲魚的屁股-》規定
@Builder
function buildAreaPicker(params: AreaSelectOption) {AreaPickerContent({areaData: params.areaData,onConfirm: params.onConfirm,onCancel: params.onCancel})
}// 彈窗內容組件（開業）
// @Preview 需要虛擬機運行才行、
@Component
struct AreaPickerContent {@Prop areaData: JsonAddr[] = [];@State selectedProvince: JsonAddr | null = null;@State selectedCity: JsonAddr | null = null;@State selectedCounty: JsonAddr | null = null;@State provinceIndex: number = 0;@State cityIndex: number = 0;@State countyIndex: number = 0;// TextPicker 數據@State provinceNames: string[] = [];@State cityNames: string[] = [];@State countyNames: string[] = [];onConfirm?: (province: JsonAddr, city: JsonAddr, county: JsonAddr,addressInfo:string) => void;onCancel?: () => void;aboutToAppear() {this.provinceNames = this.areaData.map(p => p.name);this.initDefaultSelection();}initDefaultSelection() {if (this.areaData.length > 0) {this.selectedProvince = this.areaData[0];this.provinceIndex = 0;this.updateCities();}}updateCities() {if (this.selectedProvince?.children && this.selectedProvince.children.length > 0) {this.cityNames = this.selectedProvince.children.map(c => c.name);this.selectedCity = this.selectedProvince.children[0];this.cityIndex = 0;this.updateCounties();}}updateCounties() {if (this.selectedCity?.children && this.selectedCity.children.length > 0) {this.countyNames = this.selectedCity.children.map(c => c.name);this.selectedCounty = this.selectedCity.children[0];this.countyIndex = 0;}}build() {Column() {// 頂部操作欄Row() {Text('取消').attributeModifier(new TextStyleModifier(16, '#999999', FontDiy.MEDIUM, IS_PREVIEW)).onClick(() => {GlobalAreaPicker.close(this.getUIContext());this.onCancel?.();})Blank()Text('確認').attributeModifier(new TextStyleModifier(16, '#1778FF', FontDiy.MEDIUM, IS_PREVIEW)).onClick(() => {if (this.selectedProvince && this.selectedCity && this.selectedCounty) {this.onConfirm?.(this.selectedProvince,this.selectedCity,this.selectedCounty,`${this.selectedProvince.name}${this.selectedCity.name.includes('市轄區')?' ':` ${this.selectedCity.name} `}${this.selectedCounty.name}`//拼接字符串地址（過濾掉市轄區）);}GlobalAreaPicker.close(this.getUIContext());})}.width('100%').height(44).padding({ left: 16, right: 16 })Divider().color('#f0f0f0')Row() {// 省份TextPicker({ range: this.provinceNames, selected: this.provinceIndex }).width('33.33%').height(250).canLoop(false).selectTextStyle()//往下扒拉扒拉 能找到.onChange((value: string | string[], index: number | number[]) => {if (typeof index === 'number') {this.provinceIndex = index;this.selectedProvince = this.areaData[index];this.updateCities();}})// 城市TextPicker({ range: this.cityNames, selected: this.cityIndex }).width('33.33%').height(250).canLoop(false).selectTextStyle().onChange((value: string | string[], index: number | number[]) => {if (typeof index === 'number' && this.selectedProvince?.children) {this.cityIndex = index;this.selectedCity = this.selectedProvince.children[index];this.updateCounties();}})// 區縣TextPicker({ range: this.countyNames, selected: this.countyIndex }).width('33.33%').height(250).canLoop(false).selectTextStyle().onChange((value: string | string[], index: number | number[]) => {if (typeof index === 'number' && this.selectedCity?.children) {this.countyIndex = index;this.selectedCounty = this.selectedCity.children[index];}})}}.backgroundColor(Color.White).borderRadius({ topLeft: 12, topRight: 12 })}
}
//擴展屬性
@Extend(TextPicker)
function selectTextStyle() {.selectedTextStyle({color: '#333333', font: {size: 18, family:$r('[base].media.pf_medium')}})//報錯 刪了family就行、自定義字體.textStyle({color: '#999999', font: {size: 16, family:$r('[base].media.pf_regular')}}).disappearTextStyle({color: '#999999', font: {size: 14, family:$r('[base].media.pf_regular')}}).divider({color: DIVIDER_COLOR,//#d5d5d5} as DividerOptions)
}/*
// 使用方式
GlobalAreaPicker.show({areaData: yourAreaData,onConfirm: (province, city, county) => {console.log(`選中：${province.name} ${city.name} ${county.name}`);},onCancel: () => {console.log('取消選擇');}
});*/

2.2 AreaDataUtil.ts（讀取地址json）

import { logger } from "../../../mock/baseMock";
import { Context } from "@kit.AbilityKit";
import { util } from "@kit.ArkTS";// utils/AreaDataUtil.ets
export class AreaDataUtil {private static JsonAddr: JsonAddr[] = []//讀取本地json文件static async loadJsonFile(context: Context): Promise<JsonAddr[]> {if (this.JsonAddr.length > 0) {logger.info('loadJsonFile stop read reason: has address '+AreaDataUtil.JsonAddr.length)return AreaDataUtil.JsonAddr}try {logger.info('開始讀取地址 ')const mgr = context.resourceManager;const value = await mgr.getRawFileContent('newprovince.json');const textDecoder = util.TextDecoder.create('utf-8');const jsonStr = textDecoder.decodeWithStream(value);logger.info('地址讀取完成 ')let ja = JSON.parse(jsonStr) as JsonAddr[]AreaDataUtil.JsonAddr = jareturn ja;} catch (error) {console.error('讀取JSON失敗', error);return null;}}
}//地址選擇
/*export interface AreaList {province_list: Record<string, string>city_list: Record<string, string>county_list: Record<string, string>test: CascaderOption[]
}*///映射第三庫的地址
export interface CascaderOption {text: stringvalue: stringchildren?: CascaderOption[]
}//本地地址json newprovince.json
export interface JsonAddr {name: stringcode: stringchildren?: JsonAddr[]
}

2.3 TextStyleModifier.ets 自定義字體（不重要、可以不用加、只需要刪除text中的.attributeModifier(xxxxx)屬性即可）

export class TextStyleModifier implements AttributeModifier<TextAttribute> {fontSize?: number | string | ResourcefontColor?: ResourceColorfontFamily?: string | Resource | FontDiy = FontDiy.UNSETisPreview :boolean = falseconstructor(fontSize: number | string | Resource,fontColor?: ResourceColor,fontFamily?: string | Resource| FontDiy,isPreview:boolean = false) {this.fontSize = fontSizethis.fontColor = fontColorthis.fontFamily = fontFamilythis.isPreview = isPreview}applyNormalAttribute(instance: TextAttribute): void {if (this.fontSize !== undefined) {instance.fontSize(this.fontSize)}if (this.fontColor !== undefined) {instance.fontColor(this.fontColor)}if (this.fontFamily !== undefined) {//枚舉類型if (this.isFontDiy(this.fontFamily)) {if(this.isPreview) {return}switch (this.fontFamily) {case FontDiy.REGULAR:// 處理 REGULARinstance.fontFamily($r('[base].media.pf_regular'))breakcase FontDiy.MEDIUM:instance.fontFamily($r('[base].media.pf_medium'))// 處理 MEDIUMbreakcase FontDiy.SEMI_BOLD:instance.fontFamily($r('[base].media.pf_semibold'))// ...breakdefault:// 默認處理instance.fontFamily($r('[base].media.youshebiaotihei'))break}} else {//不確定是否有問題instance.fontFamily(`${this.fontFamily}`)}}}// 類型守衛函數isFontDiy(value: string | Resource | FontDiy): boolean {return Object.values(FontDiy).includes(value as FontDiy);}
}export enum FontDiy {UNSET,REGULAR,MEDIUM,SEMI_BOLD,YOU_SHE_BIAO_TIHEI
}

2.4?PickerGlobalFun.ets

//地址選擇器
export async function showAreaPicker(uiContext: UIContext, call?: (province: JsonAddr, city: JsonAddr,county: JsonAddr,addressInfo:string) => void) {//去讀本地數據數據let areaData = await AreaDataUtil.loadJsonFile(getContext())GlobalAreaPicker.show(uiContext, {areaData: areaData,onConfirm:call,})
}

相關代碼基本就這么多、加到自己工程里、需要自己稍微調整下部分變量如IS_PREVIEW找不到可以使用false代替

別大意=》（注意文件類型、注意文件類型、注意文件類型如ets/ts）

3、json地址文件

文件地址：https://download.csdn.net/download/BirdEatBug/91801354

至此基本over

擴展：

1、環境

硬件環境：DevEco Studio 5.0.0

鴻蒙sdk版本（Compatible Sdk）：12?

2、json數據源是否可以自定義？

可以
放心目前用的也就是最近兩三年的地址json、當然有的需求不一樣需要用自己的服務器的地址json

只需要調整JsonAddr 就行了（同時修改AreaPickerContent 所涉及的JsonAddr 字段即可）

修改JsonAddr參考AreaDataUtils 中

let ja = JSON.parse(jsonStr) as JsonAddr[]//改成自己定義的接口就行。
//原來數據源定義如下、可按照需求調整
export interface JsonAddr {name: string// 省市區 名稱code: string//對應如上的地址編碼children?: JsonAddr[]//市區/市縣
}

3、是否有推薦的第三方地址json庫

這個：OpenHarmony三方庫中心倉?

github：https://github.com/ibestservices/area-data?這兩個是同一個庫、地址維護比較新? ? ? ??
?