鸿蒙开发城市联动选择弹框

鸿蒙开发城市联动选择弹框

城市联动选择弹框不容易，在Android那边也是不容易。选择某个省份时，城市要对得上，切换得及时

一、思路：

关键用@Provide和@Consume互相监听对方的变化

二、效果图：

三、关键代码如下：

// 联系：893151960
@Component
export struct ProvinceLevelComponent {
  @State labelList: string[] = [];
  @Consume selectProvinceIndex: number ;
  @Consume currentFirst: string;
  @Consume dataSource: Array<ProvinceListBean>;

  aboutToAppear() {
    for (let i = 0; i < this.dataSource.length; i++) {
      this.labelList.push(this.dataSource[i].province)
      if (this.dataSource[i].province === this.currentFirst) {
        this.selectProvinceIndex = i;
      }
    }
    this.currentFirst = this.dataSource[this.selectProvinceIndex].province
  }

  build() {
    Column() {
      Column() {
        if (this.labelList.length === 0) {
          Text('暂无数据').fontSize(20)
        } else {
          TextPicker({ range: this.labelList, selected: this.selectProvinceIndex })
            .onChange((value: string|string[], index: number|number[]) => {
              if (typeof  index === 'number') {
                this.selectProvinceIndex = index
                this.currentFirst = this.dataSource[index].province
              }
            })
            .selectedTextStyle({
              color:$r('app.color.color_main')
            })
            .canLoop(false)
        }
      }
      .backgroundColor(Color.White)
      .border({ color: '#e2e2e2', width: { right: 0.5 }
      })
      .width('100%')
      .layoutWeight(1)
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }
}

@Component
export struct CityLevelComponent {
  @State mTip: string = '暂无数据'
  @Consume @Watch('onFirstChange') currentFirst: string;
  @Consume currentSecond: string;
  @Consume selectProvinceIndex: number;
  @State labelList: string[] = [];
  @State select: number = 0;
  @Consume dataSource: Array<ProvinceListBean>;
  isIncludeUnlimited:boolean = true

  aboutToAppear(){
    this.onFirstChange()
  }

  build() {
    Column() {
      Column() {
        if (this.labelList.length === 0) {
          Text(this.mTip).fontSize(20)
        } else {
          TextPicker({ range: this.labelList, selected: this.select })
            .onChange((value: string | string[], index: number | number[]) => {
              if (typeof  index === 'number') {
                this.select = index
                this.currentSecond = this.labelList[index]
              }
            })
            .selectedTextStyle({
              color:$r('app.color.color_main')
            })
            .canLoop(false)

        }
      }
      .backgroundColor(Color.White)
      .border({
        color: '#e2e2e2',
        width: { right: 0.5 }
      })
      .width('100%')
      .layoutWeight(1)
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }

//   export interface ProvinceCityAreaDataBean{
//   version?:number
//   list?:Array<ProvinceListBean>
// }
//
// export interface ProvinceListBean{
//   province?:string
//   cityList?:Array<CityListBean>
// }
//
// export interface CityListBean{
//   city?:string
// }

  onFirstChange() {

    this.labelList = []
    let tempList : string[] = []
    let cityList : Array<CityListBean> = []
    let json: ProvinceListBean = JSON.parse(JSON.stringify(this.dataSource[this.selectProvinceIndex]));
    cityList = json.cityList!
    if (this.isIncludeUnlimited){
      if (cityList.length > 1) {
        tempList.push('全省')
      }
    }
    for (let i = 0; i < cityList.length; i++) {
      tempList.push(cityList[i].city)
    }
    this.labelList = tempList
    if (this.isIncludeUnlimited || !this.currentSecond) {
      this.select = 0;
      this.currentSecond = this.labelList[this.select]
    } else {
      for (let i = 0; i < this.labelList.length; i++) {
        if (this.labelList[i] === this.currentSecond) {
          this.select = i;
          this.currentSecond = this.labelList[this.select]
          break
        }
      }
      // 切换了省，但是没滑动市
      if (this.select === 0) {
        this.currentSecond = this.labelList[this.select]
      }
    }

  }

}

四、完整项目demo源码结构图：

有问题或者需要完整源码看简介联系我，或者私信我