HarmonyOS 地区选择demo

可以参考

import I18n from '@ohos.i18n';
import Intl from '@ohos.intl';
import UIAbility from '@ohos.app.ability.UIAbility';
import buffer from '@ohos.buffer';
import { RegionRequestData } from './RegionRequestData';
import { RegionData } from './RegionData';
import { RegionDataGroups } from './RegionDataGroups';
import display from '@ohos.display';

// import { display } from '@kit.ArkUI';


// const logger: Logger = new Logger("TelCountryChoosePanel")

let collator = new Intl.Collator(I18n.System.getSystemLocale(), {
  usage: 'sort',
  collation: 'pinyin',
  caseFirst: 'lower'
})

let data1 = '{\"code\":\"0\",\"lstRegionInfo\":[[{\"id\":3510,\"name\":\"北京\"},{\"id\":3511,\"name\":\"安徽\"},{\"id\":3656,\"name\":\"福建\"},{\"id\":3751,\"name\":\"甘肃\"},{\"id\":3853,\"name\":\"广东\"},{\"id\":4035,\"name\":\"广西壮族自治区\"},{\"id\":4158,\"name\":\"贵州\"},{\"id\":4261,\"name\":\"海南\"},{\"id\":4304,\"name\":\"河北\"},{\"id\":4489,\"name\":\"河南\"},{\"id\":4672,\"name\":\"黑龙江\"},{\"id\":4814,\"name\":\"湖北\"},{\"id\":4935,\"name\":\"湖南\"},{\"id\":5073,\"name\":\"吉林\"},{\"id\":5147,\"name\":\"江苏\"},{\"id\":5285,\"name\":\"江西\"},{\"id\":5399,\"name\":\"辽宁\"},{\"id\":5516,\"name\":\"内蒙古自治区\"},{\"id\":5630,\"name\":\"宁夏回族自治区\"},{\"id\":5662,\"name\":\"青海\"},{\"id\":5714,\"name\":\"山东\"},{\"id\":5873,\"name\":\"山西\"},{\"id\":6008,\"name\":\"陕西\"},{\"id\":6126,\"name\":\"上海\"},{\"id\":6147,\"name\":\"四川\"},{\"id\":6349,\"name\":\"天津\"},{\"id\":6370,\"name\":\"西藏自治区\"},{\"id\":6451,\"name\":\"新疆维吾尔自治区\"},{\"id\":6565,\"name\":\"云南\"},{\"id\":6711,\"name\":\"浙江\"},{\"id\":6819,\"name\":\"重庆\"}]],\"lstRegionTree\":[],\"success\":true}';
let data2 = '{\"code\":\"0\",\"regionInfos\":[{\"code\":\"0\",\"id\":3530,\"leaf\":false,\"name\":\"安庆\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3542,\"leaf\":false,\"name\":\"蚌埠\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3556,\"leaf\":false,\"name\":\"池州\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3561,\"leaf\":false,\"name\":\"滁州\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3570,\"leaf\":false,\"name\":\"阜阳\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3583,\"leaf\":false,\"name\":\"淮北\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3588,\"leaf\":false,\"name\":\"淮南\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3595,\"leaf\":false,\"name\":\"黄山\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3603,\"leaf\":false,\"name\":\"六安\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3611,\"leaf\":false,\"name\":\"马鞍山\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3616,\"leaf\":false,\"name\":\"宿州\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3622,\"leaf\":false,\"name\":\"铜陵\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3627,\"leaf\":false,\"name\":\"芜湖\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3635,\"leaf\":false,\"name\":\"宣城\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3643,\"leaf\":false,\"name\":\"亳州\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":3648,\"leaf\":false,\"name\":\"合肥\",\"parentId\":3511,\"parentNumberCode\":\"3511!\",\"status\":\"1\"}],\"success\":true}';
let data3 = '{\"code\":\"0\",\"regionInfos\":[{\"code\":\"0\",\"id\":7532,\"leaf\":false,\"name\":\"蚌山区\",\"parentId\":3542,\"parentNumberCode\":\"3511!3542!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":7533,\"leaf\":false,\"name\":\"龙子湖区\",\"parentId\":3542,\"parentNumberCode\":\"3511!3542!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":7534,\"leaf\":false,\"name\":\"禹会区\",\"parentId\":3542,\"parentNumberCode\":\"3511!3542!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":7535,\"leaf\":false,\"name\":\"淮上区\",\"parentId\":3542,\"parentNumberCode\":\"3511!3542!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":7536,\"leaf\":false,\"name\":\"怀远县\",\"parentId\":3542,\"parentNumberCode\":\"3511!3542!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":7537,\"leaf\":false,\"name\":\"五河县\",\"parentId\":3542,\"parentNumberCode\":\"3511!3542!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":7538,\"leaf\":false,\"name\":\"固镇县\",\"parentId\":3542,\"parentNumberCode\":\"3511!3542!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":139619,\"leaf\":false,\"name\":\"蚌埠市经济开发区\",\"parentId\":3542,\"parentNumberCode\":\"3511!3542!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":139625,\"leaf\":false,\"name\":\"蚌埠市高新技术开发区\",\"parentId\":3542,\"parentNumberCode\":\"3511!3542!\",\"status\":\"1\"},{\"code\":\"0\",\"id\":129665,\"leaf\":false,\"name\":\"-\",\"parentId\":3542,\"parentNumberCode\":\"3511!3542!\",\"status\":\"1\"}],\"success\":true}';

@Entry
@Component
export struct SelectRegionPage {
  storage: LocalStorage = LocalStorage.GetShared()
  @State alphabetSelected: number = 0
  @State showPopup: boolean = false
  public countriesList: Array<Array<string>> = new Array()
  private controller: SearchController = new SearchController();
  private indexMap: Map<string, number> = new Map()
  private indexList: Array<string> = new Array()
  private countryGroup: Array<Array<Array<string>>> = new Array()
  @State countriesForShow: Array<Array<Array<string>>> = new Array()
  private indexUtil = I18n.getInstance(I18n.System.getSystemLocale());
  private scroller: Scroller = new Scroller()
  @LocalStorageLink('isPanelCenter') isPanelCenter: boolean = false
  @LocalStorageLink('isFullPage') isFullPage: boolean = true
  @LocalStorageLink('isLandScape') isLandScape?: boolean = false;
  private normalIndexValue: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
    'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
  private landScapeIndexValue: string[] = ['#', 'A', '·', 'G', '·', 'M', '·', 'S', '·', 'Z']
  private panelParam: string = '';
  @State regionInfo: Array<RegionData> = [];
  @State regionDataGroupsList: Array<RegionDataGroups> = [];
  @State selectRegionPath: string = "";
  @State selectedRegion: string = "";
  @State selectState: boolean = true;
  private fixedText: string = "请选择";
  private noSelect: string = "暂不选择"
  @State topVp: number = 0;

  getData(name: string) {

    if (name === 'data1') {
      return JSON.parse(data1) as RegionRequestData;
    }
    if (name === 'data2') {
      return JSON.parse(data2) as RegionRequestData;
    }
    if (name === 'data3') {
      return JSON.parse(data3) as RegionRequestData;
    }

    return new RegionRequestData();
  }

  private onClickPointIndex(indexList: string[], beforeWord: string, afterWord: string): number {
    for (let i = 1; i < indexList.length; i++) {
      if (indexList[i] > beforeWord && indexList[i] < afterWord) {
        return i;
      }
    }
    return 0;
  }

  private onSlideList(indexList: string[], target: string): number {
    for (let i = 1; i < indexList.length; i++) {
      if (indexList[i] > target && indexList[i] != '·') {
        return i;
      }
    }
    return 0;
  }

  private searchIndex(indexList: string[], target: string): number {
    return indexList.indexOf(target);
  }

  private collationData(regionRequestData: RegionRequestData, isProvinceRegion: boolean) {

    let regionDatas = isProvinceRegion ? regionRequestData.lstRegionInfo[0] : regionRequestData.regionInfos

    this.regionInfo = regionDatas.map((regionData: RegionData) => {
      if (regionData.name === '-') {
        regionData.name = this.noSelect;
      }
      return regionData;
    }).sort((a, b) => collator.compare(a.name, b.name));
    // todo 暂无数据处理
    this.indexList = [];
    this.regionDataGroupsList = [];
    this.regionInfo.forEach((value: RegionData) => {
      let index = this.indexUtil.getIndex(value.name);

      if (this.indexList.indexOf(index) === -1) {
        let regionDataGroups: RegionDataGroups = new RegionDataGroups();
        regionDataGroups.title = index;
        this.indexList.push(index);
        regionDataGroups.regionDataList.push(value);
        this.regionDataGroupsList.push(regionDataGroups);
      } else {
        this.regionDataGroupsList[this.indexList.indexOf(index)].regionDataList.push(value);
      }
    })
    this.selectState = true;
    if (!isProvinceRegion && this.selectedRegion) {
      this.selectRegionPath = this.selectRegionPath + this.selectedRegion + ' > '
    }
  }

  aboutToAppear() {
    // todo aboutToAppear日志
    let regionData1 = this.getData('data1');
    if (regionData1.lstRegionInfo.length == 0 || regionData1.lstRegionInfo[0].length == 0) {
      // todo 弹框+提示
      return;
    }
    this.collationData(regionData1, true);


    //
    console.log("regionDataGroups:" + JSON.stringify(this.regionDataGroupsList));

  }

  aboutToDisappear(): void {
  }

  @Builder
  buildToolbar() {
    Row() {
      Row() {
        Stack() {
          Image($r("app.media.hwid_ic_back"))
            .width(24)
            .height(24)
            .margin({ top: 8, left: 8 })
            .fillColor($r('sys.color.ohos_id_color_primary'))
            .id('img_hwid_select_region_back')
          Column() {
          }
          .width(40)
          .height(40)
          .opacity(0.1)
          .onClick(() => { // 关闭panel

            this.showPopup = false
          })
        }
        .alignContent(Alignment.TopStart)
        .height('100%')

        Text($r('app.string.hwid_select_region'))
          .id('text_hwid_select_region_title')
          .alignSelf(ItemAlign.End)
          .margin({ bottom: 12, left: 8 })
          .fontSize($r('sys.float.ohos_id_text_size_headline8'))
          .fontWeight(FontWeight.Medium)
          .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
      }
      .margin({ top: 12, left: 12 })

      Row() {
        Stack() {
          Image($r("app.media.hwid_ic_cancel"))
            .width(24)
            .height(24)
            .fillColor($r("sys.color.ohos_id_color_foreground"))
            .focusable(true)
            .margin({ top: 8, right: 8 })
            .id("img_hwid_select_region_close")
          Column() {
          }
          .width(40)
          .height(40)
          .opacity(0.1)
          .onClick(() => { // 关闭panel
            this.showPopup = false
          })
        }
        .height('100%')
        .alignContent(Alignment.TopEnd)
      }
      .margin({ right: 12, top: 12 })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .height(56)
    .width('100%')
  }

  @Builder
  itemHead(text: string) {
    ListItem() {
      Row() {
        Text(text)
          .fontSize($r('sys.float.ohos_id_text_size_sub_title3'))
          .fontWeight(FontWeight.Medium)
          .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
      }
      .alignItems(VerticalAlign.Bottom)
      .justifyContent(FlexAlign.Start)
      .backgroundColor($r('sys.color.ohos_id_color_panel_bg'))
      .enabled(this.selectState)
      .height(48)
      .width('100%')
      .padding({ left: 12, right: 12 })
      .backgroundImageSize(ImageSize.Auto)
    }
  }

  build() {
    NavDestination() {
      Column() {
        this.buildToolbar()
        Column() {
          Row() {
            Text() {
              Span(this.selectRegionPath)
                .fontColor($r('sys.color.ohos_id_color_text_secondary'))
                .fontSize($r('sys.float.ohos_id_text_size_body2'))
                .fontWeight(FontWeight.Medium)
                .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
                .id("text_hwid_select_region_selectRegionPath")

              Span(this.fixedText)
                .fontColor($r('sys.color.ohos_id_color_text_primary_activated'))
                .fontSize($r('sys.float.ohos_id_text_size_body2'))
                .fontWeight(FontWeight.Medium)
                .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
                .id("text_hwid_select_region_fixedText")
            }
          }
          .width('100%')
          .padding({ right: 12, left: 12 })


          Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
            Column() {
              List({ scroller: this.scroller, space: 0, initialIndex: 0 }) {
                ForEach(this.regionDataGroupsList, (regionDataGroups: RegionDataGroups, index) => {

                  ListItemGroup({ header: this.itemHead(regionDataGroups.title)}) {
                    ListItem() {
                      List() {
                        ForEach(regionDataGroups.regionDataList, (regionData: RegionData, index?: number) => {
                          ListItem({ style: ListItemStyle.CARD }) {
                            Row() {
                              Text(regionData.name)
                                .fontSize($r('sys.float.ohos_id_text_size_body1'))
                                .fontWeight(FontWeight.Medium)
                                .fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
                                .fontColor($r('sys.color.ohos_id_color_text_primary'))
                                .id("text_hwid_select_region_value_" + regionData.name)
                              LoadingProgress()
                                .id("icon_hwid_region_selected")
                                .width(24)
                                .height(24)
                                .id("text_hwid_select_region_loading_" + regionData.name)
                            }
                            .alignItems(VerticalAlign.Center)
                            .justifyContent(FlexAlign.SpaceBetween)
                            .height(48)
                            .width('100%')
                          }
                          .enabled(this.selectState)
                          .width('100%')
                          .align(Alignment.BottomStart)
                          .height(48)
                          .onClick(() => {
                            // 暂不选择需要退出
                            if (regionData.name === this.noSelect) {
                              this.selectedRegion = '';
                              // 页面返回
                              return;
                            }
                            this.selectedRegion = regionData.name;
                            this.selectState = false;

                            let regionData1 = this.getData('data3');
                            if (regionData1.regionInfos.length == 0) {
                              // todo 弹框+提示
                              return;
                            }
                            this.collationData(regionData1, false);

                          })
                        })
                      }
                      .divider({
                        strokeWidth: 0.5,
                        color: $r('sys.color.ohos_id_color_list_separator'),
                        startMargin: 12,
                        endMargin: 12
                      })
                      .width('100%')

                    }
                    .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
                    .borderRadius($r('sys.float.ohos_id_corner_radius_notification'))
                    .width('100%')
                    .padding(4)

                  }
                  .layoutWeight(1)
                  .borderRadius($r('sys.float.ohos_id_corner_radius_notification'))
                  .backgroundColor("#00000000")
                  .align(Alignment.Center)
                  .margin({ top: '0.00px', right: '0', bottom: '0.00px', left: '12.00vp' })
                })
                ListItem() {
                }
                .height(24)
              }
              .sticky(StickyStyle.Header)
              .onScrollIndex((start: number, end: number) => {
                let target = this.indexList[start]
                let indexList = this.isLandScape ? this.landScapeIndexValue : this.normalIndexValue;
                let index = this.searchIndex(indexList, target)
                this.alphabetSelected = index === -1 ? this.onSlideList(indexList, target) - 1 : index;
                // todo
                console.log("start:" + start + " alphabetSelected: " + this.alphabetSelected)
              })
              .width('100%')
              .scrollBar(BarState.Off)

              // .edgeEffect(EdgeEffect.None)
            }

            Column() {
              AlphabetIndexer({
                arrayValue: this.isLandScape ? this.landScapeIndexValue : this.normalIndexValue,
                selected: 0
              })
                .usingPopup(false)
                .selected(this.alphabetSelected)
                .onSelect((index: number) => {
                  if (index === 0) {
                    this.scroller.scrollToIndex(0);
                    return;
                  }
                  let pos = 0
                  let useValue = this.isLandScape ? this.landScapeIndexValue : this.normalIndexValue
                  let currentWord = useValue[index] // 在右侧索引上的位置
                  if (currentWord == '·') { // 在右侧索引上的位置 刚号是点，则需要找右侧索引上一个字母

                    let beforeWord = useValue[index - 1]; // 这个是右侧索引点的上一个字母
                    let afterWord = useValue[index + 1];

                    pos = this.onClickPointIndex(this.indexList, beforeWord, afterWord)
                  } else {
                    pos = this.searchIndex(this.indexList, currentWord)
                  }
                  if (pos === -1) {
                    return;
                  }
                  console.log("scrollToIndex pos:" + pos);
                  this.scroller.scrollToIndex(pos);
                })
                .id("id_hwid_region_choose_alphabetIndexer")
                .onAreaChange((oldValue: Area, newValue: Area) => {
                  // 获取屏幕对象
                  let displayObj: display.Display = display.getDefaultDisplaySync();
                  // 获取屏幕高度
                  let displayHeight: number = displayObj.height / displayObj.densityPixels;

                  console.log("displayHeight1111111:" + displayHeight + " " + newValue.height);
                })
            }
            .height("100%")
            .alignItems(HorizontalAlign.Center)

          }
          .height("100%")
          .layoutWeight(1)
        }
        .layoutWeight(1)

      }
      .width('100%')
      .height('100%')
      .backgroundColor($r('sys.color.ohos_id_color_panel_bg'))
      .onAreaChange((oldValue: Area, newValue: Area) => {
        // 获取屏幕对象
        let displayObj: display.Display = display.getDefaultDisplaySync();
        // 获取屏幕高度
        let displayHeight: number = displayObj.height / displayObj.densityPixels;

        console.log("displayHeight:" + displayHeight + " " + newValue.height);
      })
    }
    .onBackPressed(() => {

      this.showPopup = false
      return true
    })
    .onShown(() => {

    })
    .hideTitleBar(true)
    .backgroundColor(Color.Transparent)
  }
}