【HarmonyOS】鸿蒙面包屑导航实现示例

import { promptAction } from '@kit.ArkUI' class MyDataItem {  id: number = 0  provinceid: string = ""  provincename: string = ""  cityid: string = ""  cityname: string = ""  countyid: string = ""  countyname: string = ""} // 示例数据const transformedData: MyDataItem[] =  [    {      "id": 1,      "provinceid": "110000",      "provincename": "北京市",      "cityid": "110100000000",      "cityname": "北京市",      "countyid": "110101000000",      "countyname": "东城区"    },    {      "id": 2,      "provinceid": "110000",      "provincename": "北京市",      "cityid": "110100000000",      "cityname": "北京市",      "countyid": "110102000000",      "countyname": "西城区"    },    {      "id": 3,      "provinceid": "110000",      "provincename": "北京市",      "cityid": "110100000000",      "cityname": "北京市",      "countyid": "110103000000",      "countyname": "朝阳区"    },    {      "id": 4,      "provinceid": "120000",      "provincename": "天津市",      "cityid": "120100000000",      "cityname": "天津市",      "countyid": "120101000000",      "countyname": "和平区"    },    {      "id": 5,      "provinceid": "120000",      "provincename": "天津市",      "cityid": "120100000000",      "cityname": "天津市",      "countyid": "120102000000",      "countyname": "河东区"    },    {      "id": 6,      "provinceid": "120000",      "provincename": "天津市",      "cityid": "120100000000",      "cityname": "天津市",      "countyid": "120103000000",      "countyname": "河西区"    },    {      "id": 7,      "provinceid": "130000",      "provincename": "河北省",      "cityid": "130100000000",      "cityname": "石家庄市",      "countyid": "130102000000",      "countyname": "桥西区"    },    {      "id": 8,      "provinceid": "130000",      "provincename": "河北省",      "cityid": "130100000000",      "cityname": "石家庄市",      "countyid": "130103000000",      "countyname": "新华区"    },    {      "id": 9,      "provinceid": "130000",      "provincename": "河北省",      "cityid": "130100000000",      "cityname": "石家庄市",      "countyid": "130104000000",      "countyname": "长安区"    }  ] export class MyTabBean {  name: string = ""  idType: string | null = null // 'province' | 'city' | null = null  idContent: string | null = null  x: number = -1 //当前位置  width: number = -1 //当前宽度     constructor(name: string) {    this.name = name  }} @Entry@Componentstruct Page11 {  scroller: Scroller = new Scroller()  @State titles: MyTabBean[] = []  scrollWidthOld: number = 0  @State searchValue: string = "" //搜索内容  @State errorInfo: string = "" //错误信息  @State contentList: contentItem[] = [] //要显示的列表   aboutToAppear(): void {    this.getDataByIdType("全部", null, null)  }   build() {    Column() {       //tab栏      Scroll(this.scroller) {        Row() {          ForEach(this.titles, (item: MyTabBean, index: number) => {            if (index == 0) {              Text(item.name)                .padding({ left: '30lpx', right: '16lpx' ,top:'5lpx',bottom:'5lpx'})                .fontColor(index == this.titles.length - 1 ? "#FF1919" : "#2E2E2E")                .fontSize('30lpx')                .transition(TransitionEffect.OPACITY.animation({ duration: 200 }))                .onAreaChange((previousArea: Area, currentArea: Area) => {                  if (item.x == -1) {                    item.x = currentArea.position.x as number                  }                  if (item.width == -1) {                    item.width = currentArea.width as number                  }                })                .onClick(() => {                  this.getDataByIdType("全部", null, null)                })            } else {              Row() {                Text(">").width('44lpx').height('44lpx')                Text(item.name)                  .fontColor(index == this.titles.length - 1 ? "#FF1919" : "#2E2E2E")                  .fontSize('30lpx')              }.padding({ right: '16lpx' ,top:'5lpx',bottom:'5lpx'})              .transition(TransitionEffect.OPACITY.animation({ duration: 200 }))              .onAreaChange((previousArea: Area, currentArea: Area) => {                if (item.x == -1) {                  item.x = currentArea.position.x as number                }                if (item.width == -1) {                  item.width = currentArea.width as number                }              })              .onClick(() => {                this.getDataByIdType(item.name, item.idType, item.idContent, index)              })            }          })        }.height('95lpx')        .onAreaChange((previousArea: Area, currentArea: Area) => {          let scrollWidth = currentArea.width as number          console.info(`scrollWidth:${scrollWidth}`)          if (this.titles.length > 0 && this.scrollWidthOld != scrollWidth) {            this.scrollWidthOld = scrollWidth            let item = this.titles[this.titles.length-1]            this.scroller.scrollTo({              xOffset: (item.x - scrollWidth / 2 + item.width / 2),              yOffset: 0,              animation: true            })          }        })      }      .scrollable(ScrollDirection.Horizontal)      .scrollBar(BarState.Off)      .borderWidth({ bottom: 1 })      .borderColor("#e3e3e3")      .align(Alignment.Start)      .width('100%')        //内容      Scroll() {        Column() {          ForEach(this.contentList, (item: contentItem, index: number) => {            if (index != 0) {              Text()                .height(1)                .width('720lpx')                .margin({ left: '30lpx' })                .backgroundColor("#e3e3e3")            }            Row() {              Column() {                Text(item.name).fontSize('30lpx').fontColor("#4B4B4B")              }.layoutWeight(1).alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Center)            }            .width('100%')            .backgroundColor(Color.White)            .padding({ top: '20lpx', bottom: '20lpx' })            .onClick(() => {              this.getDataByIdType(item.name, item.idType, item.idContent)              // else{//是叶子节点了，点击需要调用加入部门接口              //   // for(let i = 0 ;i<this.contentList.length;i++){              //   //   this.contentList[i].isSelect = false              //   // }              //              // }            })          })        }        .width('100%')        .padding({ left: '30lpx', right: '30lpx' })        .margin({ top: '20lpx', bottom: '20lpx' })        .borderWidth({ top: 1, bottom: 1 })        .borderColor("#e3e3e3")        .backgroundColor(Color.White)      }      .align(Alignment.Top)      .width('100%')      .layoutWeight(1)      .scrollBar(BarState.Off)      .backgroundColor("#fafafa")      .visibility(this.contentList.length != 0 ? Visibility.Visible : Visibility.None)     }    .height('100%')    .width('100%');  }   // 封装一个方法来根据ID类型和具体内容返回相应的数据  //idType: 'province' | 'city' | null  getDataByIdType(name: string, idType: string | null, idContent: string | null, index?: number) {      console.info(`内容填充`)     let contentItems: contentItem[] = [];     if (idType === null) {      // 如果idType为空，返回所有省份的不重复数据      const seenProvinces: object = Object();       for (let i = 0; i < transformedData.length; i++) {        const item = transformedData[i];        const provinceKey = item.provincename + item.provinceid;         if (!seenProvinces[provinceKey]) {          seenProvinces[provinceKey] = true;          contentItems.push({            name: item.provincename,            idType: 'province',            idContent: item.provinceid          });        }      }    } else {      // 如果idType为省份或城市，筛选出相应级别的所有数据      for (let i = 0; i < transformedData.length; i++) {        const item = transformedData[i];         if (idType === 'province') {          // 如果idType为省份，筛选出指定省份下的所有数据          if (item.provinceid === idContent) {            contentItems.push({              name: item.cityname,              idType: 'city',              idContent: item.cityid            });          }        } else if (idType === 'city') {          // 如果idType为城市，筛选出指定城市下的所有数据          if (item.cityid === idContent) {            contentItems.push({              name: item.countyname,              idType: 'county',              idContent: item.countyid            });          }        }      }    }    if(contentItems.length == 0){      let str = ""      for(let i = 0 ;i<transformedData.length;i++){        if(idContent ==transformedData[i].countyid ){          str = `省：${transformedData[i].provincename}，市：${transformedData[i].cityname}，区：${transformedData[i].countyname}`          break;        }      }      promptAction.showDialog({        title: '当前选中的是',        message: `${str}`,        buttons: [          {            text: '我知道了',            color: '#000000'          }        ],      })      return    }    this.contentList = [...contentItems]      //标题栏填充    console.info(`标题栏填充`)    if (!idType) {      console.info(`用户点了根，或者是首次启动的`)      this.titles = [new MyTabBean(name)]    } else {      //清空index之后的      console.info(`index:${index}`)      console.info(`this.titles:${JSON.stringify(this.titles)}`)      if (index) {        this.titles.splice(index)      }      let myTabBean = new MyTabBean(name)      myTabBean.idType = idType      myTabBean.idContent = idContent      this.titles.push(myTabBean)      console.info(`this.titles:${JSON.stringify(this.titles)}`)    }  }}  class contentItem {  name: string = "";  idType: string | null = null; //'province' | 'city' | 'county' | null  idContent: string | null = null;}