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

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

城市联动选择弹框不容易，在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 = indexthis.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 = trueaboutToAppear(){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 = indexthis.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 = tempListif (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源码结构图：

有需要完整源码的可私信我