AlphabetIndexer
可以與容器組件聯(lián)動(dòng)用于按邏輯結(jié)構(gòu)快速定位容器顯示區(qū)域的組件。
說明:
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
子組件
無
接口
AlphabetIndexer(value: {arrayValue: Array, selected: number})
參數(shù)名 | 參數(shù)類型 | 必填 | 參數(shù)描述 |
---|---|---|---|
arrayValue | Array | 是 | 字母索引字符串?dāng)?shù)組,不可設(shè)置為空。 |
selected | number | 是 | 初始選中項(xiàng)索引值,若超出索引值范圍,則取默認(rèn)值0。 從API version 10開始,該參數(shù)支持[$$]雙向綁定變量。 |
屬性
除支持[通用屬性]外,還支持以下屬性:
名稱 | 參數(shù)類型 | 描述 |
---|---|---|
color | [ResourceColor] | 設(shè)置文字顏色。 默認(rèn)值:0x99000000。 |
selectedColor | [ResourceColor] | 設(shè)置選中項(xiàng)文字顏色。 默認(rèn)值:0xFF254FF7。 |
popupColor | [ResourceColor] | 設(shè)置提示彈窗文字顏色。 默認(rèn)值:0xFF254FF7。 |
selectedBackgroundColor | [ResourceColor] | 設(shè)置選中項(xiàng)背景顏色。 默認(rèn)值:0x1F0A59F7。 |
popupBackground | [ResourceColor] | 設(shè)置提示彈窗背景色。 默認(rèn)值:0xFFFFFFFF。 |
usingPopup | boolean | 設(shè)置是否使用提示彈窗。 默認(rèn)值:false。 |
selectedFont | [Font] | 設(shè)置選中項(xiàng)文字樣式。 默認(rèn)值: { size:'12.0fp', style:FontStyle.Normal, weight:FontWeight.Normal, family:'HarmonyOS Sans' } |
popupFont | [Font] | 設(shè)置提示彈窗字體樣式。 默認(rèn)值: { size:'24.0vp', style:FontStyle.Normal, weight:FontWeight.Normal, family:'HarmonyOS Sans' } |
font | [Font] | 設(shè)置字母索引條默認(rèn)字體樣式。 默認(rèn)值: { size:'12.0fp', style:FontStyle.Normal, weight:FontWeight.Normal, family:'HarmonyOS Sans' } |
itemSize | string | number |
alignStyle | value: [IndexerAlign], offset10+?: [Length] | value:設(shè)置字母索引條彈框的對齊樣式,支持彈窗顯示在索引條右側(cè)和左側(cè)。 默認(rèn)值: IndexerAlign.Right。 offset:設(shè)置提示彈窗與索引條之間間距,大于等于0為有效值,在不設(shè)置或設(shè)置為小于0的情況下間距與popupPosition.x相同。與popupPosition同時(shí)設(shè)置時(shí),水平方向上offset生效,豎直方向上popupPosition.y生效。 |
selected | number | 設(shè)置選中項(xiàng)索引值。 默認(rèn)值:0。 從API version 10開始,該參數(shù)支持[$$]雙向綁定變量。 |
popupPosition | [Position] | 設(shè)置彈出窗口相對于索引器條上邊框中點(diǎn)的位置。 默認(rèn)值:{x:60.0, y:48.0}。 |
popupSelectedColor10+ | [ResourceColor] | 設(shè)置提示彈窗非字母部分選中文字色。 默認(rèn)值:#FF182431 |
popupUnselectedColor10+ | [ResourceColor] | 設(shè)置提示彈窗非字母部分未選中文字色。 默認(rèn)值:#FF182431 |
popupItemFont10+ | [Font] | 設(shè)置提示彈窗非字母部分字體樣式。 默認(rèn)值: { size:24, style:FontStyle.Medium } |
popupItemBackgroundColor10+ | [ResourceColor] | 設(shè)置提示彈窗非字母部分背景色。 默認(rèn)值:#FFFFFF |
IndexerAlign枚舉說明
名稱 | 描述 |
---|---|
Left | 彈框顯示在索引條右側(cè)。 |
Right | 彈框顯示在索引條左側(cè)。 |
事件
除支持[通用事件]外,還支持以下事件:
名稱 | 功能描述 |
---|---|
onSelect(callback: (index: number) => void)8+ | 索引條選中回調(diào),返回值為當(dāng)前選中索引。 |
onRequestPopupData(callback: (index: number) => Array)8+ | 選中字母索引后,請求索引提示彈窗顯示內(nèi)容回調(diào)。 返回值:索引對應(yīng)的字符串?dāng)?shù)組,此字符串?dāng)?shù)組在彈窗中豎排顯示,字符串列表最多顯示5個(gè),超出部分可以滑動(dòng)顯示。 |
onPopupSelect(callback: (index: number) => void)8+ | 字母索引提示彈窗字符串列表選中回調(diào)。HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿 |
示例
// 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) // 選中項(xiàng)文本顏色
.popupColor(0xFFFAF0) // 彈出框文本顏色
.selectedBackgroundColor(0xCCCCCC) // 選中項(xiàng)背景顏色
.popupBackground(0xD2B48C) // 彈出框背景顏色
.usingPopup(true) // 是否顯示彈出框
.selectedFont({ size: 16, weight: FontWeight.Bolder }) // 選中項(xiàng)字體樣式
.popupFont({ size: 30, weight: FontWeight.Bolder }) // 彈出框內(nèi)容的字體樣式
.itemSize(28) // 每一項(xiàng)的尺寸大小
.alignStyle(IndexerAlign.Left) // 彈出框在索引條右側(cè)彈出
.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 // 當(dāng)選中A時(shí),彈出框里面的提示文本列表顯示A對應(yīng)的列表arrayA,選中B、C、L時(shí)也同樣
} 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 [] // 選中其余子母項(xiàng)時(shí),提示文本列表為空
}
})
.onPopupSelect((index: number) = > {
console.info('onPopupSelected:' + index)
})
}
.width('100%')
.height('100%')
}
}
}
審核編輯 黃宇
-
組件
+關(guān)注
關(guān)注
1文章
495瀏覽量
17731 -
鴻蒙
+關(guān)注
關(guān)注
56文章
2267瀏覽量
42489
發(fā)布評論請先 登錄
相關(guān)推薦
評論