ts-container-alphabet-indexer.md 7.9 KB
Newer Older
Z
zengyawen 已提交
1 2
# AlphabetIndexer

T
explain  
tianyu 已提交
3 4
可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。

H
geshi  
HelloCrease 已提交
5
>  **说明:**
G
gmy 已提交
6 7
>
>  该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
Z
zengyawen 已提交
8

Z
zengyawen 已提交
9 10

## 子组件
Z
zengyawen 已提交
11 12 13 14




Z
zengyawen 已提交
15
## 接口
Z
zengyawen 已提交
16

K
kangchongtao 已提交
17
AlphabetIndexer(value: {arrayValue: Array<string>, selected: number})
Z
zengyawen 已提交
18

G
gmy 已提交
19
**参数:**
Z
zengyawen 已提交
20

G
gmy 已提交
21 22
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
Z
zhengqiyi 已提交
23 24
| arrayValue | Array<string> | 是 | 字母索引字符串数组,不可设置为空。 |
| selected   | number              | 是    | 初始选中项索引值,若超出索引值范围,则取默认值0。     |
Z
zengyawen 已提交
25

Z
zengyawen 已提交
26
## 属性
Z
zengyawen 已提交
27

G
gmy 已提交
28 29
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:

K
kangchongtao 已提交
30 31
| 名称                  | 参数类型     | 描述                                                              |
| ----------------------- | --------------- | ----------------------------------------------------------- |
Z
zhengqiyi 已提交
32 33 34 35 36 37 38 39 40
| color                   | [ResourceColor](ts-types.md#resourcecolor)       | 设置文字颜色。<br/>默认值:0x99000000。                           |
| selectedColor           | [ResourceColor](ts-types.md#resourcecolor)     | 设置选中项文字颜色。<br/>默认值:0xFF254FF7。                           |
| popupColor              | [ResourceColor](ts-types.md#resourcecolor)        | 设置提示弹窗文字颜色。<br/>默认值:0xFF254FF7。                         |
| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor)       | 设置选中项背景颜色。<br/>默认值:0x1F0A59F7。                           |
| popupBackground         | [ResourceColor](ts-types.md#resourcecolor)        | 设置提示弹窗背景色。<br/>默认值:0xFFF1F3F5。                            |
| usingPopup              | boolean                                  | 设置是否使用提示弹窗。<br/>默认值:false。                         |
| selectedFont            | [Font](ts-types.md#font) | 设置选中项文字样式。<br/>默认值:<br/>{<br/>fontSize:10,<br/> fontStyle:FontStyle.Normal,<br/> fontWeight:FontWeight.Normal,<br/> fontFamily:HarmonyOS Sans<br/>}                          |
| popupFont               | [Font](ts-types.md#font) | 设置提示弹窗字体样式。<br/>默认值:<br/>{<br/>fontSize:10,<br/> fontStyle:FontStyle.Normal,<br/> fontWeight:FontWeight.Normal,<br/> fontFamily:HarmonyOS Sans<br/>}                         |
| font                    | [Font](ts-types.md#font) | 设置字母索引条默认字体样式。<br/>默认值:<br/>{<br/>fontSize:10,<br/> fontStyle:FontStyle.Normal,<br/> fontWeight:FontWeight.Normal,<br/> fontFamily:HarmonyOS Sans<br/>}                      |
Z
zhengqiyi 已提交
41
| itemSize                | string&nbsp;\|&nbsp;number            | 设置字母索引条字母区域大小,字母区域为正方形,即正方形边长。不支持设置为百分比。<br/>默认值:24.0。       |
Z
zhengqiyi 已提交
42 43 44
| alignStyle              | IndexerAlign                             | 设置字母索引条弹框的对齐样式,支持弹窗显示在索引条右侧和左侧。<br/>默认值:IndexerAlign.Right。 |
| selected | number | 设置选中项索引值。<br/>默认值:0。 |
| popupPosition | [Position](ts-types.md#position8) | 设置弹出窗口相对于索引器条上边框中点的位置。<br/>默认值:{x:96.0, y:48.0}。 |
Z
zengyawen 已提交
45

G
gmy 已提交
46
## IndexerAlign枚举说明
Z
zengyawen 已提交
47

G
gmy 已提交
48 49 50 51
| 名称 | 描述 |
| -------- | -------- |
| Left | 弹框显示在索引条右侧。 |
| Right | 弹框显示在索引条左侧。 |
Z
zengyawen 已提交
52

Z
zengyawen 已提交
53
## 事件
Z
zengyawen 已提交
54

G
gmy 已提交
55 56
仅支持以下事件:

Z
zengyawen 已提交
57 58
| 名称 | 功能描述 |
| -------- | -------- |
59
| onSelected(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)<sup>(deprecated)</sup> | 索引条选中回调,返回值为当前选中索引。 从API Version 8开始废弃,建议使用onSelect代替。                             |
K
kangchongtao 已提交
60 61 62
| onSelect(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 索引条选中回调,返回值为当前选中索引。                                 |
| onRequestPopupData(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;Array&lt;string&gt;)<sup>8+</sup> | 选中字母索引后,请求索引提示弹窗显示内容回调。<br/>返回值:索引对应的字符串数组,此字符串数组在弹窗中竖排显示,字符串列表最多显示5个,超出部分可以滑动显示。 |
| onPopupSelect(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 字母索引提示弹窗字符串列表选中回调。                            |
Z
zengyawen 已提交
63 64


Z
zengyawen 已提交
65
## 示例
Z
zengyawen 已提交
66

H
geshi  
HelloCrease 已提交
67 68
```ts
// xxx.ets
Z
zengyawen 已提交
69 70
@Entry
@Component
Z
zengyawen 已提交
71
struct AlphabetIndexerSample {
72 73 74 75 76 77 78 79
  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']
Z
zengyawen 已提交
80 81

  build() {
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160
    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 }) // 弹出框内容的字体样式
          .itemSize(28) // 每一项的尺寸大小
          .alignStyle(IndexerAlign.Left) // 弹出框在索引条左侧弹出
          .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%')
    }
Z
zengyawen 已提交
161 162 163 164
  }
}
```