AlphabetIndexer

Note:

Currently in the beta phase.

A component that can interact with container components to quickly locate the display area of a container based on logical structure.

Import Module

import kit.ArkUI.*

Child Components

None

Creating the Component

init(Array<String>, ?UInt32)

public init(arrayValue!: Array<String>, selected!: ?UInt32)

Function: Creates an AlphabetIndexer component.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
arrayValue	Array<String>	Yes	-	Named parameter. String array where each string represents an index item.
selected	?UInt32	Yes	-	Named parameter. Initial selected index value. If it exceeds the index range, the default value 0 is used. Initial value: 0

Universal Attributes/Events

Universal attributes: All supported.

Note:

When the width attribute is set to LengthMetrics.AUTO, it indicates adaptive width, which changes with the maximum width of index items.

The padding attribute defaults to 4.vp.

Universal events: All supported.

Component Attributes

func alignStyle(?IndexerAlign)

public func alignStyle(value: ?IndexerAlign): This

Function: Sets the alignment style of the alphabet indexer popup.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
value	?IndexerAlign	Yes	-	Alignment style of the alphabet indexer popup, supporting display on the left or right side of the popup. Initial value: IndexerAlign.Right

func color(?ResourceColor)

public func color(value: ?ResourceColor): This

Function: Sets the text color of unselected items.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
value	?ResourceColor	Yes	-	Text color of unselected items. Initial value: Color(0x99182431)

func font(?Length, ?FontWeight, ?ResourceStr, ?FontStyle)

public func font(
    size!: ?Length = None,
    weight!: ?FontWeight = None,
    family!: ?ResourceStr = None,
    style!: ?FontStyle = None
): This

Function: Sets the text style of selected items.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
size	?Length	No	None	Named parameter. Text size of selected items. Initial value: 10.vp
weight	?FontWeight	No	None	Named parameter. Font weight of selected text. Initial value: FontWeight.Normal
family	?ResourceStr	No	None	Named parameter. Font family of selected text. Initial value: "HarmonyOS Sans"
style	?FontStyle	No	None	Named parameter. Text style of selected items. Initial value: FontStyle.Normal

func itemSize(?Length)

public func itemSize(value: ?Length): This

Function: Sets the size of the index item area.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
value	?Length	Yes	-	Size of the index item area. The index item area is square, i.e., the side length of the square. Percentage values are not supported. Initial value: 16.vp

func popupBackground(?ResourceColor)

public func popupBackground(value: ?ResourceColor): This

Function: Sets the background color of the popup.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
value	?ResourceColor	Yes	-	Background color of the popup. Initial value: Color(0x66808080)

func popupColor(?ResourceColor)

public func popupColor(value: ?ResourceColor): This

Function: Sets the text color of primary index items in the popup.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
value	?ResourceColor	Yes	-	Text color of primary index items in the popup. Initial value: Color(0xFF007DFF)

func popupFont(?Length, ?FontWeight, ?ResourceStr, ?FontStyle)

public func popupFont(
    size!: ?Length = None,
    weight!: ?FontWeight = None,
    family!: ?ResourceStr = None,
    style!: ?FontStyle = None
): This

Function: Sets the font style of the popup.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
size	?Length	No	None	Named parameter. Text size in the popup. Initial value: 24.vp
weight	?FontWeight	No	None	Named parameter. Font weight of text in the popup. Initial value: FontWeight.Normal
family	?ResourceStr	No	None	Named parameter. Font family of text in the popup. Initial value: "HarmonyOS Sans"
style	?FontStyle	No	None	Named parameter. Text style in the popup. Initial value: FontStyle.Normal

func popupPosition(?Length, ?Length)

public func popupPosition(x!: ?Length = None, y!: ?Length = None): This

Function: Sets the position of the popup relative to the midpoint of the top border of the indexer bar.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
x	?Length	No	None	Named parameter. X-coordinate of the popup relative to the midpoint of the top border of the indexer bar. Initial value: 60.vp
y	?Length	No	None	Named parameter. Y-coordinate of the popup relative to the midpoint of the top border of the indexer bar. Initial value: 48.vp

func selected(?Int32)

public func selected(index: ?Int32): This

Function: Sets the selected index value.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
index	?Int32	Yes	-	Selected index value. Initial value: 0

func selectedBackgroundColor(?ResourceColor)

public func selectedBackgroundColor(value: ?ResourceColor): This

Function: Sets the background color of selected items.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
value	?ResourceColor	Yes	-	Background color of selected items. Initial value: Color(0x1A007DFF)

func selectedColor(?ResourceColor)

public func selectedColor(value: ?ResourceColor): This

Function: Sets the text color of selected items.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
value	?ResourceColor	Yes	-	Text color of selected items. Initial value: Color(0xFF007DFF)

func selectedFont(?Length, ?FontWeight, ?ResourceStr, ?FontStyle)

public func selectedFont(
    size!: ?Length = None,
    weight!: ?FontWeight = None,
    family!: ?ResourceStr = None,
    style!: ?FontStyle = None
): This

Function: Sets the text style of selected items.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
size	?Length	No	None	Named parameter. Text size of selected items. Initial value: 10.vp
weight	?FontWeight	No	None	Named parameter. Font weight of selected text. Initial value: FontWeight.Normal
family	?ResourceStr	No	None	Named parameter. Font family of selected text. Initial value: "HarmonyOS Sans"
style	?FontStyle	No	None	Named parameter. Text style of selected items. Initial value: FontStyle.Normal

func usingPopup(?Bool)

public func usingPopup(value: ?Bool): This

Function: Sets whether to use the popup.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
value	?Bool	Yes	-	Whether to use the popup. Initial value: false

Component Events

func onPopupSelect(?OnAlphabetIndexerPopupSelectCallback)

public func onPopupSelect(callback: ?OnAlphabetIndexerPopupSelectCallback): This

Function: Triggered when a string in the alphabet indexer popup is selected.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
callback	?OnAlphabetIndexerPopupSelectCallback	Yes	-	Callback function triggered when a string in the alphabet indexer popup is selected. Initial value: { _: Int64 => }

func onRequestPopupData(?OnAlphabetIndexerRequestPopupDataCallback)

public func onRequestPopupData(callback: ?OnAlphabetIndexerRequestPopupDataCallback): This

Function: Triggered when an alphabet index is selected, requesting the display content of the index popup.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
callback	?OnAlphabetIndexerRequestPopupDataCallback	Yes	-	Callback function triggered when the current index is selected. Return value: String array corresponding to the index, displayed vertically in the popup. The string list displays up to 5 items, with additional items scrollable. Initial value: { _: Int64 => Array<String>() }

func onSelect(?OnAlphabetIndexerSelectCallback)

public func onSelect(callback: ?OnAlphabetIndexerSelectCallback): This

Function: Triggered when the index bar is selected, returning the current selected index.

System Capability: SystemCapability.ArkUI.ArkUI.Full

Since: 22

Parameters:

Name	Type	Required	Default Value	Description
callback	?OnAlphabetIndexerSelectCallback	Yes	-	Callback function triggered when the index bar is selected. Initial value: { _: Int64 => }

Basic Type Definitions

type OnAlphabetIndexerSelectCallback

public type OnAlphabetIndexerSelectCallback = (Int64) -> Unit

Function: Event triggered when an index item is selected.

Type: (Int64) -> Unit

type OnAlphabetIndexerRequestPopupDataCallback

public type OnAlphabetIndexerRequestPopupDataCallback = (Int64) -> Array<String>

Function: Event triggered when an index item is selected and usingPopup is set to true.

Type: (Int64) -> Array<String>

type OnAlphabetIndexerPopupSelectCallback

public type OnAlphabetIndexerPopupSelectCallback = (Int64) -> Unit

Function: Event triggered when a secondary index item in the popup is selected.

Type: (Int64) -> Unit

Sample Code

package ohos_app_cangjie_entry
import kit.ArkUI.*
import ohos.hilog.*
import ohos.arkui.state_macro_manage.*

@Entry
@Component
class EntryView {
    var arrayA: Array<String> = ["An"]
    var arrayB: Array<String> = ["Bu", "Bai", "Bao", "Bi", "Bing"]
    var arrayC: Array<String> = ["Cao", "Cheng", "Chen", "Cui"]
    var arrayJ: Array<String> = ["Jia", "Jia"]
    var arrayNull: Array<String> = []
    let value: Array<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"]
    @State var indexerHeight: Length = 75.percent;
    func build() {
        Stack(alignContent: Alignment.Start) {
            Row() {
                List(space: 20, initialIndex: 0) {
                    ForEach(
                        this.arrayA,
                        {
                            item: String, idx: Int64 => ListItem() {
                                Text(item)
                                    .width(80.percent)
                                    .height(5.percent)
                                    .fontSize(30)
                                    .textAlign(TextAlign.Center)
                            }
                        }
                    )
                    ForEach(
                        this.arrayB,
                        {
                            item: String, idx: Int64 => ListItem() {
                                Text(item)
                                    .width(80.percent)
                                    .height(5.percent)
                                    .fontSize(30)
                                    .textAlign(TextAlign.Center)
                            }
                        }
                    )
                    ForEach(
                        this.arrayC,
                        {
                            item: String, idx: Int64 => ListItem() {
                                Text(item)
                                    .width(80.percent)
                                    .height(5.percent)
                                    .fontSize(30)
                                    .textAlign(TextAlign.Center)
                            }
                        }
                    )
                    ForEach(
                        this.arrayJ,
                        {
                            item: String, idx: Int64 => ListItem() {
                                Text(item)
                                    .width(80.percent)
                                    .height(5.percent)
                                    .fontSize(30)
                                    .textAlign(TextAlign.Center)
                            }
                        }
                    )
                }
                    .width(50.percent)
                    .height(100.percent)
                Column() {
                    Column() {
                        AlphabetIndexer(arrayValue: value, selected: 0)
                            .height(this.indexerHeight) // Index bar height
                            .selectedColor(0xFFFFFF) // Selected item text color
                            .popupColor(0xFFFAF0) // Popup text color
                            .selectedBackgroundColor(0xCCCCCC) // Selected item background color
                            .popupBackground(0xD2B48C) // Popup background color
                            .usingPopup(true) // Whether to display popup
                            .selectedFont(size: 16.vp, weight: FontWeight.Bolder) // Selected item font style
                            .popupFont(size: 30.vp, weight: FontWeight.Bolder) // Popup content font style
                            .itemSize(28) // Size of each item
                            .alignStyle(IndexerAlign.Right) // Popup appears on the right side of index bar
                            .popupBackground(0xCCCCCC) // Set first index item's popup background color
                            .selectedColor(0x00FF00)
                            .onSelect({index: Int64 => Hilog.info(0, "AppLogCj", this.value[index] + " Selected!");})
                            .onRequestPopupData(
                                {
                                    index: Int64 => if (this.value[index] == "A") {
                                        return this.arrayA.toArray()
                                    } else if (this.value[index] == "B") {
                                        return this.arrayB.toArray()
                                    } else if (this.value[index] == "C") {
                                        return this.arrayC.toArray()
                                    } else if (this.value[index] == "J") {
                                        return this.arrayJ.toArray()
                                    } else {
                                        return Array<String>()
                                    }
                                })
                            .onPopupSelect({
                                index: Int64 => Hilog.info(0, "AppLogCj", "onPopupSelected:${index}");
                            })
                    }
                        .height(80.percent)
                        .justifyContent(FlexAlign.Center)
                }
                    .width(50.percent)
                    .justifyContent(FlexAlign.Center)
            }
                .width(100.percent)
                .height(100.percent)
        }
    }
}

alphabet_indexer1

AlphabetIndexer

Import Module

Child Components

Creating the Component

init(Array<String>, ?UInt32)

Universal Attributes/Events

Component Attributes

func alignStyle(?IndexerAlign)

func color(?ResourceColor)

func font(?Length, ?FontWeight, ?ResourceStr, ?FontStyle)

func itemSize(?Length)

func popupBackground(?ResourceColor)

func popupColor(?ResourceColor)

func popupFont(?Length, ?FontWeight, ?ResourceStr, ?FontStyle)

func popupPosition(?Length, ?Length)

func selected(?Int32)

func selectedBackgroundColor(?ResourceColor)

func selectedColor(?ResourceColor)

func selectedFont(?Length, ?FontWeight, ?ResourceStr, ?FontStyle)

func usingPopup(?Bool)

Component Events

func onPopupSelect(?OnAlphabetIndexerPopupSelectCallback)

func onRequestPopupData(?OnAlphabetIndexerRequestPopupDataCallback)

func onSelect(?OnAlphabetIndexerSelectCallback)

Basic Type Definitions

type OnAlphabetIndexerSelectCallback

type OnAlphabetIndexerRequestPopupDataCallback

type OnAlphabetIndexerPopupSelectCallback

Sample Code

Example 1 (Setting Prompt Popup Display Text Content)