AlphabetIndexer

可以與容器組件聯(lián)動用于按邏輯結構快速定位容器顯示區(qū)域的組件。

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標單獨標記該內(nèi)容的起始版本。

子組件

無

接口

AlphabetIndexer(value: {arrayValue: Array, selected: number})

參數(shù)：

屬性

除支持[通用屬性]外，還支持以下屬性：

IndexerAlign枚舉說明

事件

除支持[通用事件]外，還支持以下事件：

示例

// xxx.ets
@Entry
@Component
struct AlphabetIndexerSample {
  private arrayA: string[] = ['安']
  private arrayB: string[] = ['卜', '白', '包', '畢', '丙']
  private arrayC: string[] = ['曹', '成', '陳', '催']
  private arrayL: string[] = ['劉', '李', '樓', '梁', '雷', '呂', '柳', '盧']
  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']

  build() {
    Stack({ alignContent: Alignment.Start }) {
      Row() {
        List({ space: 20, initialIndex: 0 }) {
          ForEach(this.arrayA, (item: string) = > {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, (item: string) = > item)

          ForEach(this.arrayB, (item: string) = > {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, (item: string) = > item)

          ForEach(this.arrayC, (item: string) = > {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, (item: string) = > item)

          ForEach(this.arrayL, (item: string) = > {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, (item: string) = > item)
        }
        .width('50%')
        .height('100%')

        AlphabetIndexer({ arrayValue: this.value, selected: 0 })
          .selectedColor(0xFFFFFF) // 選中項文本顏色
          .popupColor(0xFFFAF0) // 彈出框文本顏色
          .selectedBackgroundColor(0xCCCCCC) // 選中項背景顏色
          .popupBackground(0xD2B48C) // 彈出框背景顏色
          .usingPopup(true) // 是否顯示彈出框
          .selectedFont({ size: 16, weight: FontWeight.Bolder }) // 選中項字體樣式
          .popupFont({ size: 30, weight: FontWeight.Bolder }) // 彈出框內(nèi)容的字體樣式
          .itemSize(28) // 每一項的尺寸大小
          .alignStyle(IndexerAlign.Left) // 彈出框在索引條右側彈出
          .popupSelectedColor(0x00FF00)
          .popupUnselectedColor(0x0000FF)
          .popupItemFont({ size: 30, style: FontStyle.Normal })
          .popupItemBackgroundColor(0xCCCCCC)
          .onSelect((index: number) = > {
            console.info(this.value[index] + ' Selected!')
          })
          .onRequestPopupData((index: number) = > {
            if (this.value[index] == 'A') {
              return this.arrayA // 當選中A時，彈出框里面的提示文本列表顯示A對應的列表arrayA，選中B、C、L時也同樣
            } else if (this.value[index] == 'B') {
              return this.arrayB
            } else if (this.value[index] == 'C') {
              return this.arrayC
            } else if (this.value[index] == 'L') {
              return this.arrayL
            } else {
              return [] // 選中其余子母項時，提示文本列表為空
            }
          })
          .onPopupSelect((index: number) = > {
            console.info('onPopupSelected:' + index)
          })
      }
      .width('100%')
      .height('100%')
    }
  }
}

審核編輯 黃宇