HarmonyOS 提供城市拼音选择组件

import { CityType, CITY_DATA, TAB_VALUE } from './DetailData';  
import promptAction from '@ohos.promptAction';  
  
@Entry  
@Component  
export struct CityView {  
  private scroller: Scroller = new Scroller();  
  @State stabIndex: number = 0;  
  // @Link isSearchState: boolean;  
  
  build() {  
    Stack({ alignContent: Alignment.End }) {  
      Column() {  
        List({ space: 14, initialIndex: 0, scroller: this.scroller }) {  
          ForEach(CITY_DATA, (index: CityType) => {  
            ListItem() {  
              Column() {  
                Text(`${index.name}`)  
                  .height(30)  
                  .fontSize(16)  
                  .fontColor('#000000')  
                  .width('100%')  
                ForEach(index.city, (item: string) => {  
                  Text(item)  
                    .height(30)  
                    .fontSize(14)  
                    .width('100%')  
                    .onClick(() => {  
                      // 调用Toast显示提示:此样式仅为案例展示  
                      promptAction.showToast({ message: '此样式仅为案例展示' });  
                    })  
                })  
              }  
            }  
          })  
        }  
        .width('100%')  
        .margin({ left: 5, bottom: 50 })  
        .layoutWeight(1)  
        .edgeEffect(EdgeEffect.None)  
        .divider({  
          strokeWidth: 2, color: "#f5f5f5",  
          startMargin: 0, endMargin: 20  
        })  
        .listDirection(Axis.Vertical)  
        .scrollBar(BarState.Off)  
        .onScrollIndex((firstIndex: number, lastIndex: number) => {  
          this.stabIndex = firstIndex;  
        })  
      }  
      .alignItems(HorizontalAlign.Start)

/* TODO：知识点：可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件，arrayValue为字母索引字符串数组，selected为初始选中项索引值。  
* 1. 当用户滑动List组件，list组件onScrollIndex监听到firstIndex的改变，绑定赋值给AlphabetIndexer的selected属性，从而定位到字母索引。  
* 2. 当点击AlphabetIndexer的字母索引时，通过scrollToIndex触发list组件滑动并指定firstIndex，从而实现List列表与AlphabetIndexer组件  
* 首字母联动吸顶展示。  
*/  
AlphabetIndexer({ arrayValue: TAB_VALUE, selected: this.stabIndex })  
  .height('100%')  
  .selectedColor('#ffffff') // 选中项文本颜色  
  .popupColor('#a9a9a9') // 弹出框文本颜色  
  .selectedBackgroundColor('#5dabff') // 选中项背景颜色  
  .popupBackground('#F1F3F5') // 弹出框背景颜色  
  .popupPosition({ x: 50, y: 350 })  
  .usingPopup(true) // 是否显示弹出框  
  .selectedFont({ size: 16, weight: FontWeight.Bolder }) // 选中项字体样式  
  .popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框内容的字体样式  
  .alignStyle(IndexerAlign.Right) // 弹出框在索引条左侧弹出  
  .itemSize(20) // 每一项的尺寸大小  
  .margin({ right: -8 })  
  .onSelect((tabIndex: number) => {  
    this.scroller.scrollToIndex(tabIndex);  
  })  
}  
.flexShrink(1)  
  .flexGrow(1)  
  .padding({ bottom: 10 })  
/* 性能知识点：由于需要通过搜索按钮频繁的控制自定义组件的显隐状态，因此推荐使用显隐控制替代条件渲染，  
* 参考合理选择条件渲染和显隐控制文章：  
* https://gitee.com/harmonyos-cases/cases/blob/master/docs/performance/proper-choice-between-if-and-visibility.md  
*/  
// .visibility(this.isSearchState ? Visibility.None : Visibility.Visible)  
}  
}

// 定义城市类型类  
export class CityType {  
  name: string;  
  city: string[];  
  
  constructor(name: string, city: string[]) {  
    this.name = name;  
    this.city = city;  
  }  
}  
  
// 城市列表数据  
export const CITY_DATA = [  
  new CityType('A', ['阿尔山', '阿勒泰地区', '安庆', '安阳']),  
  new CityType('B', ['北京', '亳州', '包头', '宝鸡']),  
  new CityType('C', ['重庆', '长春', '长沙', '成都']),  
  new CityType('F', ['福州', '阜阳', '佛山', '抚顺']),  
  new CityType('G', ['广州', '桂林', '赣州', '高雄']),  
  new CityType('H', ['哈尔滨', '合肥', '杭州', '呼和浩特', '鹤岗', '呼兰']),  
  new CityType('J', ['济南', '九江', '佳木斯']),  
  new CityType('L', ['兰州', '丽江', '洛阳',]),  
  new CityType('N', ['南昌', '南京', '宁波']),  
  new CityType('Q', ['青岛', '七台河', '秦皇岛']),  
  new CityType('S', ['上海', '沈阳', '石家庄', '三亚', '双鸭山', '深圳', '苏州']),  
  new CityType('T', ['天津', '太原', '吐鲁番', '台北', '台湾', "唐山"]),  
  new CityType('W', ['武汉', '文昌', '温岭', '温州', '芜湖']),  
  new CityType('X', ['西安', '咸阳', '信阳', '厦门', '香港', '响水', '湘西']),  
  new CityType('Y', ['银川', '延吉', '宜昌', '延边', '扬州', '烟台']),  
  new CityType('Z', ['郑州', '珠海', '张家口', '张家界', '镇江', '中山', '枣阳', '枣庄', '漳州', '枝江', '芷江', '织金', '中牟', '中卫', '周口', '舟山', '庄河', '珠海'])  
];  
  
// AlphabetIndexer字母索引条数据  
export const TAB_VALUE = ['A', 'B', 'C', 'F', 'G', 'H', 'J', 'L', 'N', 'Q', 'S', 'T', 'W', 'X', 'Y', 'Z'];