HarmonyOS 城市选择框？

Question

我想实现一个类似TextPickerDialog的城市联动选择器，可以根据省来定位市的联动，暂时没有看到相关Api和demo,我该如何实现。效果如下图

Answer 1

//城市选择器
import { BusinessError } from '@kit.BasicServicesKit';
import util from '@ohos.util';
import common from '@ohos.app.ability.common';
import { buffer, JSON } from '@kit.ArkTS';
@CustomDialog
export default struct CityPicker {
  @State cascade: TextCascadePickerRangeContent[] = [];
  @Link selectedCity:string
  aboutToAppear(): void {
    try {
      getContext().resourceManager.getRawFileContent("province.json", (error: BusinessError, value: Uint8Array) => {
        if (error != null) {
          console.error("error is " + error);
        } else {
          let jsonString = buffer.from(value).toString('utf-8');
          let arr = JSON.parse(jsonString) as Array<TextCascadePickerRangeContent>
          this.cascade = arr;
        }
      });
    } catch (error) {
      let code = (error as BusinessError).code;
      let message = (error as BusinessError).message;
      console.error(`callback getRawFileContent failed, error code: ${code}, message: ${message}.`);
    }
  }
  private cityName:string=''
  private controller?: CustomDialogController;
  cancel: () => void = () => {
  }
  confirm: () => void = () => {
  }
  build() {
    Column({space:5}){
      Row(){
        Text('取消')
          .margin({ left: 20 })
          .fontColor(Color.Gray)
          .onClick(()=>{
            this.controller?.close()
            this.cancel()
          })
        Text('确认')
          .margin({ right: 20 })
          .fontColor(Color.Blue)
          .onClick(()=>{
            this.controller?.close()
            this.confirm()
            this.selectedCity = this.cityName;
          })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .padding({ top: '12vp', bottom: '12vp' })
      TextPicker({ range: this.cascade })
        .onChange((value: string | string[], index: number | number[]) => {
          this.cityName = JSON.stringify(value);
          console.info('TextPicker 多列联动:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index))

        })
    }
    .backgroundColor(Color.White)
    .width('100%')
  }
}

//城市选择器的调用
import CustomDialogPicker from './CityPicker';
@Entry
@Component
struct Index {
  @State selectedCity: string = "北京市"
  customDialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogPicker({
      selectedCity: $selectedCity
    }),
    alignment: DialogAlignment.Bottom,
    customStyle: true,
    offset: {
      dx: 0,
      dy: 0
    }
  });
  build() {
    RelativeContainer() {
      Text(this.selectedCity)
      Text('点击弹出城市')
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.customDialogController.open();
        })
    }
    .height('100%')
    .width('100%')
  }
}