鸿蒙HarmonyOS NEXT开发：AlphabetIndexer（基础组件）

最新推荐文章于 2024-09-29 19:27:55 发布
最新推荐文章于 2024-09-29 19:27:55 发布
阅读量774 收藏 26
点赞数 16
分类专栏： ArkTS 鸿蒙 文章标签： harmonyos 华为 android 驱动开发 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanbbq/article/details/141196722
版权
鸿蒙 同时被 2 个专栏收录
99 篇文章 0 订阅
订阅专栏
ArkTS
94 篇文章 0 订阅
订阅专栏

AlphabetIndexer

可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。

说明：

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

AlphabetIndexer(value: {arrayValue: Array<string>, selected: number})

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

参数：

参数名参数类型必填参数描述
arrayValueArray<string>是字母索引字符串数组，不可设置为空。
selectednumber是初始选中项索引值，若超出索引值范围，则取默认值0。
从API version 10开始，该参数支持$$双向绑定变量。

属性

width属性设置"auto"时表示自适应宽度，宽度会随索引项最大宽度变化。

除支持通用属性外，还支持以下属性：

color

color(value: ResourceColor)

设置文字颜色。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是文字颜色。
默认值：0x99182431。

selectedColor

selectedColor(value: ResourceColor)

设置选中项文字颜色。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是选中项文字颜色。
默认值：0xFF007DFF。

popupColor

popupColor(value: ResourceColor)

设置提示弹窗文字颜色。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是提示弹窗文字颜色。
默认值：0xFF007DFF。

selectedBackgroundColor

selectedBackgroundColor(value: ResourceColor)

设置选中项背景颜色。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是选中项背景颜色。
默认值：0x1A007DFF。

popupBackground

popupBackground(value: ResourceColor)

设置提示弹窗背景色。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是提示弹窗背景色。
默认值：
API version 11及以前：0xFFFFFFFF。
API version 12及以后：#66808080。

usingPopup

usingPopup(value: boolean)

设置是否使用提示弹窗。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是是否使用提示弹窗。
默认值：false。

selectedFont

selectedFont(value: Font)

设置选中项文字样式。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueFont是选中项文字样式。
默认值：
API version 11及以前：
{
size:‘12.0fp’,
style:FontStyle.Normal,
weight:FontWeight.Normal,
family:‘HarmonyOS Sans’
}
API version 12及以后：
{
size:‘10.0vp’,
style:FontStyle.Normal,
weight:FontWeight.Medium,
family:‘HarmonyOS Sans’
}

popupFont

popupFont(value: Font)

设置提示弹窗字体样式。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueFont是提示弹窗字体样式。
默认值：
{
size:‘24.0vp’,
style:FontStyle.Normal,
weight:FontWeight.Normal,
family:‘HarmonyOS Sans’
}

font

font(value: Font)

设置字母索引条默认字体样式。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueFont是字母索引条默认字体样式。
默认值：
API version 11及以前：
{
size:‘12.0fp’,
style:FontStyle.Normal,
weight:FontWeight.Normal,
family:‘HarmonyOS Sans’
}
API version 12及以后：
{
size:‘10.0vp’,
style:FontStyle.Normal,
weight:FontWeight.Medium,
family:‘HarmonyOS Sans’
}

itemSize

itemSize(value: string | number)

设置字母索引条字母区域大小。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuestring | number是字母索引条字母区域大小，字母区域为正方形，即正方形边长。不支持设置为百分比。
默认值：16.0
单位：vp

alignStyle

alignStyle(value: IndexerAlign, offset?: Length)

设置字母索引条弹框的对齐样式。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueIndexerAlign是字母索引条弹框的对齐样式，支持弹窗显示在索引条右侧和左侧。
默认值: IndexerAlign.Right。
offset10+Length否提示弹窗与索引条之间间距，大于等于0为有效值，在不设置或设置为小于0的情况下间距与popupPosition.x相同。与popupPosition同时设置时，水平方向上offset生效，竖直方向上popupPosition.y生效。

selected8+

selected(index: number)

设置选中项索引值。

从API version 10开始，该参数支持$$双向绑定变量。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是选中项索引值。
默认值：0

popupPosition8+

popupPosition(value: Position)

设置弹出窗口相对于索引器条上边框中点的位置。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuePosition是弹出窗口相对于索引器条上边框中点的位置。
默认值：{x:60.0, y:48.0}

popupSelectedColor10+

popupSelectedColor(value: ResourceColor)

设置提示弹窗非字母部分选中文字色。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是提示弹窗非字母部分选中文字色。
默认值：#FF182431

popupUnselectedColor10+

popupUnselectedColor(value: ResourceColor)

设置提示弹窗非字母部分未选中文字色。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是提示弹窗非字母部分未选中文字色。
默认值：#FF182431

popupItemFont10+

popupItemFont(value: Font)

设置提示弹窗非字母部分字体样式。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueFont是提示弹窗非字母部分字体样式。
默认值：
{
size:24,
weight:FontWeight.Medium
}

popupItemBackgroundColor10+

popupItemBackgroundColor(value: ResourceColor)

设置提示弹窗非字母部分背景色。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是提示弹窗非字母部分背景色。
默认值：
API version 11及以前：#FFFFFFFF。
API version 12及以后：#00000000。

autoCollapse11+

autoCollapse(value: boolean)

设置是否使用自适应折叠模式。

如果字符串首字符为“#”，除去首字符。当剩余字符数 $\leq$ 9时，选择全显示模式。当9 < 剩余字符数 $\leq$ 13时，根据索引条高度自适应选择全显示模式或者短折叠模式。当剩余字符数 > 13时，根据索引条高度自适应选择短折叠模式或者长折叠模式。

如果字符串首字符不为“#”。当所有字符数 $\leq$ 9时，选择全显示模式。当9 < 所有字符数 $\leq$ 13时，根据索引条高度自适应选择全显示模式或者短折叠模式。当所有字符数 > 13时，根据索引条高度自适应选择短折叠模式或者长折叠模式。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是是否使用自适应折叠模式。
默认值：false

popupItemBorderRadius12+

popupItemBorderRadius(value: number)

设置提示弹窗索引项背板圆角半径。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是设置提示弹窗索引项背板圆角半径。
默认值：24vp。
不支持百分比，小于0时按照0设置。
提示弹窗背板圆角自适应变化（索引项圆角半径+4vp）。

itemBorderRadius12+

itemBorderRadius(value: number)

设置索引项背板圆角半径。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是设置索引项背板圆角半径。
默认值：8vp
不支持百分比，小于0时按照0设置。
索引条背板圆角自适应变化（索引项圆角半径+4vp）。

popupBackgroundBlurStyle12+

popupBackgroundBlurStyle(value: BlurStyle)

设置提示弹窗的背景模糊材质。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueBlurStyle是设置提示弹窗的背景模糊材质。
默认值：COMPONENT_REGULAR。

popupTitleBackground12+

popupTitleBackground(value: ResourceColor)

设置提示弹窗首个索引项背板颜色。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是设置提示弹窗首个索引项背板颜色。
默认值：
提示弹窗只有一个索引项：#00FFFFFF。
提示弹窗有多个索引项：#0c182431。

IndexerAlign枚举说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称描述
Left弹框显示在索引条右侧。
Right弹框显示在索引条左侧。

事件

除支持通用事件外，还支持以下事件：

onSelected(deprecated)

onSelected(callback: (index: number) => void)

索引条选中回调，返回值为当前选中索引。

从API Version 8开始废弃，建议使用onSelect代替。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是当前选中的索引。

onSelect8+

onSelect(callback: (index: number) => void)

索引条选中回调，返回值为当前选中索引。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是当前选中的索引。

onRequestPopupData8+

onRequestPopupData(callback: (index: number) => Array<string>)

选中字母索引后，请求索引提示弹窗显示内容回调。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是当前选中的索引

返回值：

类型说明
Array<string>索引对应的字符串数组，此字符串数组在弹窗中竖排显示，字符串列表最多显示5个，超出部分可以滑动显示。

onPopupSelect8+

onPopupSelect(callback: (index: number) => void)

字母索引提示弹窗字符串列表选中回调。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是当前选中的索引。

示例

示例1

// 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)
            }
          }, (item: string) => item)

          ForEach(this.arrayB, (item: string) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }
          }, (item: string) => item)

          ForEach(this.arrayC, (item: string) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }
          }, (item: string) => item)

          ForEach(this.arrayL, (item: string) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }
          }, (item: string) => 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) // 弹出框在索引条右侧弹出
          .popupItemBorderRadius(24) // 设置提示弹窗索引项背板圆角半径
          .itemBorderRadius(14) // 设置索引项背板圆角半径
          .popupBackgroundBlurStyle(BlurStyle.NONE) // 设置提示弹窗的背景模糊材质
          .popupTitleBackground(0xCCCCCC) // 设置提示弹窗首个索引项背板颜色
          .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 // 当选中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%')
    }
  }
}
ts

示例2

// xxx.ets
@Entry
@Component
struct AlphabetIndexerSample {
  private arrayA: string[] = ['安']
  private arrayB: string[] = ['卜', '白', '包', '毕', '丙']
  private arrayC: string[] = ['曹', '成', '陈', '催']
  private arrayJ: 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']
  @State isNeedAutoCollapse: boolean = false;
  @State indexerHeight: string = '75%';

  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)
            }
          }, (item: string) => item)

          ForEach(this.arrayB, (item: string) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }
          }, (item: string) => item)

          ForEach(this.arrayC, (item: string) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }
          }, (item: string) => item)

          ForEach(this.arrayJ, (item: string) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }
          }, (item: string) => item)
        }
        .width('50%')
        .height('100%')

        Column() {
          Column() {
            AlphabetIndexer({ arrayValue: this.value, selected: 0 })
              .autoCollapse(this.isNeedAutoCollapse)
              .height(this.indexerHeight)
              .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.Right)// 弹出框在索引条左侧弹出
              .popupTitleBackground("#D2B48C") // 弹出框首个索引项背板颜色
              .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;
                } else if (this.value[index] == 'B') {
                  return this.arrayB;
                } else if (this.value[index] == 'C') {
                  return this.arrayC;
                } else if (this.value[index] == 'J') {
                  return this.arrayJ;
                } else {
                  return [];
                }
              })
              .onPopupSelect((index: number) => {
                console.info('onPopupSelected:' + index);
              })
          }
          .height('80%')
          .justifyContent(FlexAlign.Center)

          Column() {
            Button('切换成折叠模式')
              .margin('5vp')
              .onClick(() => {
                this.isNeedAutoCollapse = true;
              })
            Button('切换索引条高度到30%')
              .margin('5vp')
              .onClick(() => {
                this.indexerHeight = '30%';
              })
            Button('切换索引条高度到70%')
              .margin('5vp')
              .onClick(() => {
                this.indexerHeight = '70%';
              })
          }.height('20%')
        }
        .width('50%')
        .justifyContent(FlexAlign.Center)
      }
      .width('100%')
      .height('100%')
    }
  }
}
ts

示例3

// 该示例实现了自定义设置提示弹窗的背景模糊材质
@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']
  @State customBlurStyle: BlurStyle = BlurStyle.NONE;

  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)
            }
          }, (item: string) => item)

          ForEach(this.arrayB, (item: string) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }
          }, (item: string) => item)

          ForEach(this.arrayC, (item: string) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }
          }, (item: string) => item)

          ForEach(this.arrayL, (item: string) => {
            ListItem() {
              Text(item)
                .width('80%')
                .height('5%')
                .fontSize(30)
                .textAlign(TextAlign.Center)
            }
          }, (item: string) => item)
        }
        .width('30%')
        .height('100%')
        Column(){
          Column() {
            Text('切换模糊材质: ')
              .fontSize(24)
              .fontColor(0xcccccc)
              .width('100%')
            Button('COMPONENT_REGULAR')
              .margin('5vp')
              .width(200)
              .onClick(() => {
                this.customBlurStyle = BlurStyle.COMPONENT_REGULAR;
              })
            Button('BACKGROUND_THIN')
              .margin('5vp')
              .width(200)
              .onClick(() => {
                this.customBlurStyle = BlurStyle.BACKGROUND_THIN;
              })
          }.height('20%')

          Column(){
            AlphabetIndexer({ arrayValue: this.value, selected: 0 })
              .usingPopup(true) // 是否显示弹出框
              .alignStyle(IndexerAlign.Left) // 弹出框在索引条右侧弹出
              .popupItemBorderRadius(24) // 设置提示弹窗索引项背板圆角半径
              .itemBorderRadius(14) // 设置索引项背板圆角半径
              .popupBackgroundBlurStyle(this.customBlurStyle) // 设置提示弹窗的背景模糊材质
              .popupTitleBackground(0xCCCCCC) // 设置提示弹窗首个索引项背板颜色
              .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)
              })
          }
          .height('80%')
        }
        .width('70%')
      }
      .width('100%')
      .height('100%')
      .backgroundImage($r("app.media.image"))
    }
  }
}
ts

「已注销」
关注
专栏目录
harmonyOS基础样式
weixin_56893328的博客
12-30 478
通俗易懂点讲就是几个组件放置在同一个位置,或者有层叠的部分,比如下边这个图。通俗易懂点讲Column是(垂直)竖着排列。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之AlphabetIndexer组件
weixin_47730343的博客
02-11 1243
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之AlphabetIndexer组件。
AlphabetIndexer字母索引器
欢迎加入Android老司机学院 482266514（技术交流群）密码CSDN
10-29 1808
ListView中添加一些自定义影像，这种方法我觉得一定是可行的。    但是，android系统给我们提供了一个更简单的方法：使用AlphabetIndexer。    AlphabetIndexer,实现了SectionIndexer接口,是adapter的一个辅助类,辅助实现在快滑时，显示索引字母。    使用字母索引的话，必须保证数据列表是按字母顺序排序，以便AlphabetInde
鸿蒙Harmony应用开发—ArkTS声明式开发（基础组件：AlphabetIndexer）
m0_64420071的博客
03-07 1309
ArkTS声明式开发-基础组件：AlphabetIndexer
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
《全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战》是一套针对初学者精心设计的鸿蒙操作系统开发教程。本教程旨在帮助没有编程基础的学员快速掌握HarmonyOS的开发技能，通过丰富的实例和清晰的讲解，...
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程
02-11
### 全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战教程解析 #### 一、鸿蒙开发环境准备与工具下载 本教程旨在帮助初学者从零开始学习鸿蒙 HarmonyOS NEXT 星河版的开发技术。首先，我们需要准备开发环境。...
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5714
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
通讯录-快读滑动
01-20
这是一个类似通讯录，使用的是AlphabetIndexer快读定位
鸿蒙HarmonyOS应用开发 | 深入解析 HarmonyOS Next 中的仓颉语言
最新发布
一键难忘的博客
09-29 2835
仓颉语言是专为 HarmonyOS Next 设计的编程语言，它具有简洁、高效、易读易写等特点。仓颉语言借鉴了多种现代编程语言的优点，同时结合了 HarmonyOS Next 的特性，使得开发者能够更加高效地开发出高质量的应用。仓颉语言在 HarmonyOS Next 开发中具有重要的地位，它的简洁性、高效性和与 HarmonyOS Next 的深度融合，使得开发者能够更加轻松地开发出高质量的应用。随着 HarmonyOS Next 的不断发展，仓颉语言也将不断完善和壮大，为开发者带来更多的惊喜和便利。
Android7.0中文文档（API）-- AlphabetIndexer
应公子的专栏
06-15 499
Android中文文档 AlphabetIndexer
AlphabetIndexer字母索引辅助类
09-04 660
http://blog.sina.com.cn/s/blog_5da93c8f0100ycol.html
OpenHarmony实战开发-城市选择案例、如何通过AlphabetIndexer实现首字母快速定位城市的索引条导航。
2401_82546228的博客
04-16 716
本示例介绍城市选择场景的使用：通过AlphabetIndexer实现首字母快速定位城市的索引条导航。
【鸿蒙实战开发】模态转场、List 组件、AlphabetIndexer
m0_72720965的博客
08-24 1181
首先，先来讲一讲什么是模态转场吧，简单来讲就是我们在手机上面看到的分享图标点击以后出来的一个半屏的分享界面，这个过程就叫做模态转场。
通讯录-AlphabetIndexer的使用
forwardyzk的专栏
01-20 2754
AlphabetIndexer,实现了SectionIndexer接口,是adapter的一个辅助类,辅助实现在快滑时，显示索引字母。 使用字母索引的话，必须保证数据列表是按字母顺序排序，以便AlphabetIndexer采用二分查找法快速定位 下面使用AlphabetIndexer来模拟快速滑动展示通讯录。 自定义适配器，IndexAdapter， public IndexAdapt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值