AlphabetIndexer组件,鸿蒙开发

前言

通过 AlphabetIndexer 组件可以与容器组件结合,实现导航联动,以及快速定位的效果

基本用法:

AlphabetIndexer不是容器组件,属于功能类的组件,使用时,需要设置如下 2 个参数

参数名 参数类型 必填 参数描述
arrayValue Array 字母索引字符串数组,不可设置为空。
selected number 初始选中项索引值,若超出索引值范围,则取默认值0。从API version 10开始,该参数支持$$双向绑定变量。
js 复制代码
    @Entry
@Component
struct Page08_AlphabetIndexer {
  alphabets: 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 selectedIndex: number = 0

  build() {
    Stack({ alignContent: Alignment.End }) {
      Text('选中的索引为:' + this.selectedIndex)
        .width('100%')
        .textAlign(TextAlign.Center)
        .onClick(() => {
          this.selectedIndex = 10
        })
      // 字母表索引组件
      // arrayValue 索引项
      // selected 选中索引 ,支持双向绑定
      AlphabetIndexer({ arrayValue: this.alphabets, selected: $$this.selectedIndex })

    }
    .width('100%')
    .height('100%')
  }
}

文字设置:

名称 参数类型 描述
color ResourceColor 设置文字颜色。 默认值:0x99000000。
itemSize number 设置每个字母的区域大小
font Font 设置每个字母的字体样式
selectedFont Font 设置选中字母的字体样式
selectedColor ResourceColor 设置选中项文字颜色。 默认值:0xFF254FF7。
selectedBackgroundColor ResourceColor 设置选中项背景颜色。 默认值:0x1F0A59F7。
js 复制代码
    @Entry
@Component
struct Page08_AlphabetIndexer {
  alphabets: 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 selecteIndex: number = 0

  build() {
    Stack({ alignContent: Alignment.End }) {
      Text('选中的索引为:' + this.selecteIndex)
        .width('100%')
        .textAlign(TextAlign.Center)
        .onClick(() => {
          this.selecteIndex = 10
        })
      // 字母表索引组件
      // arrayValue 索引项
      // selected 选中索引 ,支持双向绑定
      AlphabetIndexer({ arrayValue: this.alphabets, selected: $$this.selecteIndex })
        .color(Color.Orange)// 文字颜色
        .selectedColor(Color.Green)// 选中文字颜色
        .selectedBackgroundColor(Color.Black) // 选中背景颜色

    }
    .width('100%')
    .height('100%')
  }
}

弹窗提示:

名称 参数类型 描述
usingPopup boolean 设置是否使用提示弹窗。默认值:false。
popupBackground ResourceColor 设置提示弹窗背景色。默认值:0xFFFFFFFF。
popupColor ResourceColor 设置提示弹窗文字颜色。默认值:0xFF254FF7。
js 复制代码
    @Entry
@Component
struct Page08_AlphabetIndexer {
  alphabets: 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 selecteIndex: number = 0

  build() {
    Stack({ alignContent: Alignment.End }) {
      Text('选中的索引为:' + this.selecteIndex)
        .width('100%')
        .textAlign(TextAlign.Center)
        .onClick(() => {
          this.selecteIndex = 10
        })
      // 字母表索引组件
      // arrayValue 索引项
      // selected 选中索引 ,支持双向绑定
      AlphabetIndexer({ arrayValue: this.alphabets, selected: $$this.selecteIndex })
        .color(Color.Orange)// 文字颜色
        .selectedColor(Color.Green)// 选中文字颜色
        .selectedBackgroundColor(Color.Black)// 选中背景颜色
        .usingPopup(true)// 显示弹窗
        .popupColor(Color.Orange)// 弹窗文字颜色
        .popupBackground(Color.Pink) // 弹窗背景色

    }
    .width('100%')
    .height('100%')
  }
}
相关推荐
qczg_wxg4 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz5 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码5 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v5 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山6 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin6 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip6 小时前
结合Worker通知应用更新
前端·javascript
叶玳言6 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳6 小时前
HTML 基本结构
前端
Gazer_S6 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js