字母表
效果
子组件
无
参数
arrayValue
字母表
selected
选中字母的序号 number
属性
font
默认字母列表的字体样式
bash
{
size:'18fp',
style:FontStyle.Italic,
weight:FontWeight.Bold
}color
未选中的颜色
autoCollapse
关闭自适应折叠模式(有弹出的显示 无弹出的不显示)
enableHapticFeedback
是否开启触觉反馈默认为 true
selectedColor
选中字母的颜色
selectedBackgroundColor
选中字母的背景颜色
selectedFont
选中字母的文本样式
itemSize
默认索引项的尺寸大小
itemBorderRadius
设置索引项背板圆角半径
注意
- 上面是字母
- 下面是弹出层
usingPopup
索引项被选中时显示提示弹窗
popupColor
提示弹窗一级索引文本颜色 1 级就是字母 2 级就是中文
popupBackground
提示弹窗背景颜色
popupFont
提示弹窗一级索引的文本样式,就是最开的字母
alignStyle
弹出框位置 2 个参数
上下左右 IndexerAlign.Left,IndexerAlign.Right,IndexerAlign.Start,IndexerAlign.End
偏移量
popupItemBorderRadius
设置提示弹窗索引项背板圆角半径
popupBackgroundBlurStyle
设置提示弹窗的背景模糊材质
popupTitleBackground
设置提示弹窗一级索引项背景颜色 1 级就是字母 2 级就是中文
popupSelectedColor
提示弹窗二级索引选中项文本颜色 1 级就是字母 2 级就是中文
popupUnselectedColor
提示弹窗二级索引未选中项文本颜色 1 级就是字母 2 级就是中文
popupItemFont
- 提示弹窗二级索引项文本样式,1 级就是字母 2 级就是中文
js
{ size: 30, style: FontStyle.Normal }popupItemBackgroundColor
- 提示弹窗二级索引项背景颜色 1 级就是字母 2 级就是中文
事件
onSelect
- 点击字母
bash
onSelect((index: number) => {
console.info(this.value[index] + ' Selected!');
})onRequestPopupData
这个事件是返回 2 级菜单
js
.onRequestPopupData((index: number) => {
// 当选中A时，提示弹窗里面的二级索引文本列表显示A对应的列表arrayA，选中B、C、L时也同样
// 选中其余索引项时，提示弹窗二级索引文本列表为空，提示弹窗会只显示一级索引项
if (this.value[index] == 'A') {
return this.arrayA;
} 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
- 点击二级菜单
js
.onPopupSelect((index: number) => {
console.info('onPopupSelected:' + index);
})示例
js
@Entry
@Component
struct Index {
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() {
Column(){
AlphabetIndexer({ arrayValue: this.value, selected: 0 })
.font({
size:'18fp',
style:FontStyle.Italic,
weight:FontWeight.Bold
})
.color(Color.Green) // 未选中的颜色
.autoCollapse(false) // 关闭自适应折叠模式
.enableHapticFeedback(false) // 关闭触控反馈
.selectedColor('red') // 选中项文本颜色
.selectedBackgroundColor('blue') // 选中项背景颜色
.selectedFont({ size: 20, weight: FontWeight.Bolder }) // 选中项文本样式
.itemSize(36) // 默认索引项的尺寸大小
.itemBorderRadius(36) // 设置索引项背板圆角半径
//--------------下面是弹出框----------------
.usingPopup(true) // 索引项被选中时显示提示弹窗
.popupColor(0xFFFAF0) // 提示弹窗一级索引文本颜色 1级就是字母2级就是中文
.popupBackground(0xD2B48C) // 提示弹窗背景颜色
.popupFont({ size: 21, weight: FontWeight.Bolder }) // 提示弹窗一级索引的文本样式,就是最开的字母
.alignStyle(
IndexerAlign.Left,
90
) // 提示弹窗在索引条右侧弹出,里面就是Left,第二个参数就是偏移量
.popupItemBorderRadius(24) // 设置提示弹窗索引项背板圆角半径
.popupBackgroundBlurStyle(BlurStyle.NONE) // 设置提示弹窗的背景模糊材质
.popupTitleBackground(0xCCCCCC) // 设置提示弹窗一级索引项背景颜色 1级就是字母2级就是中文
.popupSelectedColor('red') // 提示弹窗二级索引选中项文本颜色 1级就是字母2级就是中文
.popupUnselectedColor(0x0000FF) // 提示弹窗二级索引未选中项文本颜色 1级就是字母2级就是中文
.popupItemFont({ size: 30, style: FontStyle.Normal }) // 提示弹窗二级索引项文本样式,1级就是字母2级就是中文
.popupItemBackgroundColor(0xCCCCCC) // 提示弹窗二级索引项背景颜色 1级就是字母2级就是中文
.onSelect((index: number) => {
console.info(this.value[index] + ' Selected!');
})
.onRequestPopupData((index: number) => {
// 当选中A时，提示弹窗里面的二级索引文本列表显示A对应的列表arrayA，选中B、C、L时也同样
// 选中其余索引项时，提示弹窗二级索引文本列表为空，提示弹窗会只显示一级索引项
if (this.value[index] == 'A') {
return this.arrayA;
} 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);
})
}.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.width('100%')
.height('100%')
}
}