【AlphabetIndexer_必现】简要描述：点击字母索引条字母，左边列表正常滑动，点击最下面字母索引条字母，列表滑动到最底端后，再次点击字母索引条字母，左边列表滑动异常（Grid里的两个text不显示）

【环境信息】:
RK3568
版本每日编译:http://ci.openharmony.cn/dailybuilds
【预置条件】:hap安装正常
【测试步骤】：
1.打开对应hap,点击索引条字母a->n
2.点击字母索引条字母你n->a
【预期结果】：
1.字母可以正常选中，左边对应列表正常滑动
2.字母可以正常选中，左边对应列表正常滑动
【实际结果】：
1.字母可以正常选中，左边对应列表正常滑动
2.字母可以正常选中，左边对应列表滑动异常
【恢复手段】：
从新进入界面
【出现概率】：必现
【测试hap源码】：
@entry
@citizenl
struct IndexerComponent {
@后蜗牛 selectColor: string = "red"
@后蜗牛 popupColor: string = "blue"
@后蜗牛 selectedBgColor: string = "gray"
@后蜗牛 popupBgColor: string = "gray"
@后蜗牛 usingPopup: boolean = true
@后蜗牛 align: boolean = true
@后蜗牛 selectFont: boolean = true
@后蜗牛 popFont: boolean = true
@后蜗牛 font: boolean = true
@后蜗牛 iteamSize: number = 30
@后蜗牛 currentSelected: number = 3
private scroller: Scroller = new Scroller()
private btSize: number = 15
private arr: string[] = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n']
build() {
Column() {
Grid() {
GridItem(){
Button() {
Text(this.selectColor == "blue" ? 'selectColor blue':'selectColor red').fontSize(this.btSize)
}.onClick(() => {
this.selectColor == "blue" ? this.selectColor = "red" : this.selectColor ="blue"
})
}
GridItem(){
Button() {
Text(this.popupColor == "blue" ? 'popColor blue':'popColor red').fontSize(this.btSize)
}.onClick(() => {
this.popupColor == "blue" ? this.popupColor = "red" : this.popupColor = "blue"
})
}
GridItem(){
Button() {
Text(this.selectedBgColor == "gray" ? 'selectedBgColor gray' : 'selectedBgColor green').fontSize(this.btSize)
}.onClick(() => {
this.selectedBgColor == "gray" ? this.selectedBgColor = "green" : this.selectedBgColor = "gray"
})
}
GridItem(){
Button() {
Text(this.popupBgColor == "gray" ? 'popupBgColor gray' : 'popupBgColor green').fontSize(this.btSize)
}.onClick(() => {
this.popupBgColor == "gray" ? this.popupBgColor = "green" : this.popupBgColor = "gray"
})
}
GridItem(){
Button() {
Text(this.usingPopup == true ? 'popup on' : 'popup off').fontSize(this.btSize)
}.onClick(() => {
this.usingPopup == true ? this.usingPopup = false : this.usingPopup = true
})
}
GridItem(){
Button() {
Text(this.iteamSize == 30 ? 'iteamSize 30' : 'iteamSize 25').fontSize(this.btSize)
}.onClick(() => {
this.iteamSize == 30 ? this.iteamSize = 25 : this.iteamSize = 30
})
}
GridItem(){
Button() {
Text(this.align == true ? 'align right' : 'align left').fontSize(this.btSize)
}.onClick(() => {
this.align == true ? this.align = false : this.align = true
})
}
GridItem(){
Button() {
Text(this.selectFont == true ? 'selectFont 1' : 'selectFont 2').fontSize(this.btSize)
}.onClick(() => {
this.selectFont == true ? this.selectFont = false : this.selectFont = true
})
}
GridItem(){
Button() {
Text(this.popFont == true ? 'popFont 1' : 'popFont 2').fontSize(this.btSize)
}.onClick(() => {
this.popFont == true ? this.popFont = false : this.popFont = true
})
}
GridItem(){
Button() {
Text(this.font == true ? 'font 1' : 'font 2').fontSize(this.btSize)
}.onClick(() => {
this.font == true ? this.font = false : this.font = true
})
}
}
.columnsTemplate('1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.width('100%').height(200)
Row() {
Grid(this.scroller) {
ForEach(this.arr, (item: string) => {
GridItem() {
Text(item)
}.backgroundColor(Color.Red).width(100).height(100)}, item => item)
}.columnsTemplate("1fr 1fr").rowsGap(20).columnsGap(20).width(300).height(400).margin({top:10})
.onScrollIndex((first: number) => {
console.error('zgy onScrollIndex : ' + first)
this.currentSelected = first
})
AlphabetIndexer({arrayValue: this.arr, selected: this.currentSelected})
.onSelected((index: number) => {
console.error('onSelected : ' + index)
this.scroller.scrollToIndex(index)})
.color(Color.Blue)
.selectedColor(this.selectColor)
.popupColor(this.popupColor)
.selectedBackgroundColor(this.selectedBgColor)
.popupBackground(this.popupBgColor)
.usingPopup(this.usingPopup)
.selectedFont(this.selectFont == true ? {size: 20, weight: FontWeight.Lighter, style: 1} : {size: 30, weight: FontWeight.Bolder, style: 2})
.popupFont(this.popFont == true ? {size: 50, weight: FontWeight.Lighter, style: 1} : {size: 40, weight: FontWeight.Bolder, style: 2})
.itemSize(this.iteamSize)
.font(this.font == true ? {size: 20, weight: FontWeight.Lighter, style: 1} : {size: 30, weight: FontWeight.Bolder, style: 2})
.alignStyle(this.align == true ? IndexerAlign.Right : IndexerAlign.Left)
}
}
.width('100%')
.height('100%')
}
}