HarmonyOS 鸿蒙Next 城市对象数据本地重构排序

class CarTable {
  title: string = ''
  projects: string[] = []
}
@Entry
@Component
struct AlphabetIndexPage {
private value: 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’]
@State selectedIndex: number = 0
@State showDialog:boolean=false
@State isSelectIndexer: boolean = false
listScroller: ListScroller = new ListScroller()
private carList: CarTable[] = [
{
title: ‘A’,
projects: [‘奥迪’, ‘埃安’, ‘AITO’, ‘阿斯顿马丁’, ‘阿尔法罗密欧’, ‘阿维塔’, ‘爱驰’, ‘Aria’, ‘ATS’, ‘Aspark’, ‘阿尔特’, ‘AIM’]
},
{
title: ‘B’,
projects: [‘奔驰’, ‘宝马’, ‘本田’, ‘别克’, ‘比亚迪’, ‘保时捷’, ‘北京’, ‘标致’, ‘宾利’, ‘宝骏’, ‘奔腾’, ‘宝沃’, ‘布加迪’]
},
{
title: ‘C’,
projects: [‘长安’, ‘起源’, ‘长城’, ‘创维’, ‘成功’, ‘车池’, ‘刺猬’, ‘长江’, ‘Canoo’, ‘曹操’, ‘Cupra’, ‘程式’]
},
{
title: ‘D’,
projects: [‘大众’, ‘东风风行’, ‘东风风神’, ‘东风风行’, ‘东风风神’, ‘东风风行’, ‘东风风神’, ‘大发’, ‘大运’, ‘东南’, ‘DS’]
},
{
title: ‘E’,
projects: [‘Electra’, ‘E-lengend’, ‘ego’, ‘Edison’]
},
{
title: ‘F’,
projects: [‘丰田’, ‘福特’, ‘飞凡’, ‘方程’, ‘飞凡’, ‘方程’, ‘菲亚特’, ‘法拉利’]
}
]
@Builder
itemHead(text: string) {
Text(text)
.fontSize(20)
.backgroundColor(0xAABBCC)
.width(“100%”)
.padding(10)
}
build() {
Stack({ alignContent: Alignment.Start }) {
Row() {
List({ space: 0, initialIndex: 0, scroller: this.listScroller }) {
ForEach(this.carList, (item: CarTable) => {
ListItemGroup({ header: this.itemHead(item.title) }) {
ForEach(item.projects, (project: string) => {
ListItem() {
Text(project)
.width(“100%”)
.height(60)
}
}, (item: string) => item)
}
})
}
.width(‘70%’)
.height(‘100%’)
.sticky(StickyStyle.Header)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
.onScrollIndex((start: number, end: number) => {
if (!this.isSelectIndexer) {
this.showDialog=false
this.selectedIndex = start + 1
}
})
    AlphabetIndexer({ arrayValue: <span class="hljs-keyword">this</span>.value, selected: <span class="hljs-number">0</span> })
      .selected(<span class="hljs-keyword">this</span>.selectedIndex)
      .selectedColor(<span class="hljs-number">0xFFFFFF</span>)<span class="hljs-comment">// 选中项文本颜色</span>
      .selectedBackgroundColor(<span class="hljs-number">0xCCCCCC</span>)<span class="hljs-comment">// 选中项背景颜色</span>
      .usingPopup(<span class="hljs-literal">true</span>) <span class="hljs-comment">// 是否显示弹出框</span>
      .selectedFont({ size: <span class="hljs-number">16</span>, weight: FontWeight.Bolder })<span class="hljs-comment">// 选中项字体样式</span>
      .itemSize(<span class="hljs-number">28</span>)<span class="hljs-comment">// 每一项的尺寸大小</span>
      .onSelect((index: number) =&gt; {
        <span class="hljs-keyword">this</span>.showDialog = <span class="hljs-literal">true</span>
        <span class="hljs-keyword">this</span>.isSelectIndexer = <span class="hljs-literal">true</span>
        <span class="hljs-keyword">this</span>.listScroller.scrollToItemInGroup(index - <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-literal">true</span>)
      })
  }
  .width(<span class="hljs-string">'100%'</span>)
  .height(<span class="hljs-string">'100%'</span>)
}
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>