字幕排序定位

子組件

無

接口

AlphabetIndexer(value: {arrayValue: Array<string>, 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) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, item => item)

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

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

          ForEach(this.arrayL, (item) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }.editable(true)
          }, item => 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) // 彈出框在索引條右側(cè)彈出
          .onSelect((index: number) => {
            console.info(this.value[index] + ' Selected!')
          })
          .onRequestPopupData((index: number) => {
            if (this.value[index] == 'A') {
              return this.arrayA // 當(dāng)選中A時，彈出框里面的提示文本列表顯示A對應(yīng)的列表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%')
    }
  }
}