鸿蒙List使用

const alphabets = ['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'];

interface CarItemInterface {
  title: string
}

interface CarInterface {
  alphabet: string,
  carItem: CarItemInterface[]
}

@Entry
@Component
struct CarListIndex {
  @State selectedIndex: number = 0
  private listScroller: Scroller = new Scroller()
  @State carList: CarInterface[] = [{
    alphabet: "A",
    carItem: [
      {
        title: "奥迪"
      },
      {
        title: "奥拓"
      },
      {
        title: "爱驰"
      },
      {
        title: "ATS"
      },
      {
        title: "AIM"
      },
      {
        title: "阿尔特"
      },
    ]
  },
    {
      alphabet: "B",
      carItem: [
        {
          title: "奔驰"
        },
        {
          title: "比亚迪"
        },
        {
          title: "宝马"
        },
        {
          title: "保时捷"
        },
        {
          title: "北京"
        },
        {
          title: "标致"
        },
      ]
    },
    {
      alphabet: "C",
      carItem: [
        {
          title: "长安"
        },
        {
          title: "长城"
        },
        {
          title: "曹操汽车"
        },
        {
          title: "成功汽车"
        },
        {
          title: "北京"
        },
        {
          title: "标致"
        },
      ]
    },
    {
      alphabet: "D",
      carItem: [
        {
          title: "大众"
        },
        {
          title: "东风"
        },
        {
          title: "Ds"
        },
        {
          title: "大运"
        },
        {
          title: "东南"
        },
        {
          title: "大帝"
        },
      ]
    },
    {
      alphabet: "E",
      carItem: [
        {
          title: "e.GO"
        },
        {
          title: "Elek"
        },
      ]
    },
    {
      alphabet: "F",
      carItem: [
        {
          title: "丰田"
        },
        {
          title: "福特"
        },
        {
          title: "福田"
        },
        {
          title: "法拉利"
        },
        {
          title: "福地"
        },
        {
          title: "菲亚特"
        },
      ]
    }
  ]

  //自定义组件内自定义构建函数
  @Builder itemHead(text: string) {
    Text(text)
      .fontSize(20)
      .backgroundColor(0xEEEEEE)
      .width("100%")
      .padding(10)
  }

  build() {
    Column() {
      Stack({ alignContent: Alignment.End }) {
        Column() {
          List({ scroller: this.listScroller }) {
            ForEach(this.carList, (item: CarInterface) => {
              ListItemGroup({ header: this.itemHead(item.alphabet) }) {
                ForEach(item.carItem, (pro: CarItemInterface) => {
                  ListItem() {
                    Text(pro.title)
                      .fontSize(16)
                      .padding(10)
                      .width("100%")
                  }
                })
              }
            })
          }
          .onScrollIndex((index: number) => {
            this.selectedIndex = index
          })
          .sticky(StickyStyle.Header)

        }.height('100%')
        .width('100%')

        AlphabetIndexer({ arrayValue: alphabets, selected: 0 })
          .selected(this.selectedIndex)
          .onSelect((index) => {
            this.listScroller.scrollToIndex(index)
          })
      }
    }
    .width('100%')
    .height('100%')
  }
}