鸿蒙进阶-AlphabetIndexer组件

大家好,这里是鸿蒙开天组,今天我们来学习AlphabetIndexer组件,喜欢就点点关注吧!

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

核心用法

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

参数名

参数类型

必填

参数描述

arrayValue

Array<string>

字母索引字符串数组,不可设置为空。

selected

number

初始选中项索引值,若超出索引值范围,则取默认值0。

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

参考代码

@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 = 0build() {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%')}
}

注意:

  • 通过双向绑定变量。可以实现修改变量值,同步更新选中的索引

外观设置

设置文字外观

选中AlphabetIndexer,如果默认的颜色效果无法满足要求,可以通过如下属性来进行设置

名称

参数类型

描述

color

ResourceColor

设置文字颜色。
默认值:0x99000000。

itemSize

number

设置每个字母的区域大小

font

Font

设置每个字母的字体样式

selectedFont

Font

设置选中字母的字体样式

selectedColor

ResourceColor

设置选中项文字颜色。
默认值:0xFF254FF7。

selectedBackgroundColor

ResourceColor

设置选中项背景颜色。
默认值:0x1F0A59F7。

给大家一个案例

@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 = 0build() {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。

参考代码

@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 = 0build() {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%')}
}

事件

支持的常用事件是onSelect,会在选中不同项时触发

链接链接

名称

功能描述

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

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

.... 其他事件后续用到再补充,目前掌握这一个即可

@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 = 0build() {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 }).color(Color.Orange)// 文字颜色.selectedColor(Color.Green)// 选中文字颜色.selectedBackgroundColor(Color.Black)// 选中背景颜色.usingPopup(true)// 显示弹窗.popupColor(Color.Orange)// 弹窗文字颜色.popupBackground(Color.Pink)// 弹窗背景色.onSelect((index: number) => {// this.selectedIndex = indexconsole.log('选中的索引是:', index)})}.width('100%').height('100%')}
}

学习完上面的内容,让我们来做一个案例:

案例-用户列表联动

需求:

  1. 整合 AlphabetIndexer 到联系人案例中
  2. 滚动 List,同步选中对应的AlphabetIndexer
  3. 选中AlphabetIndexer的区域,同步滚动List

核心步骤:

  • 整合 AlphabetIndexer 到联系人案例中
    • 整合数组,定义 状态变量 记录索引
    • 整合AlphabetIndexer组件,设置 导航数组 和 索引
    • 使用 Stack 作为容器,调整位置
  • 滚动 List,同步选中对应的AlphabetIndexer
    • List组件注册 onScrollIndex 事件,获取索引值
    • 将上一步获取到的索引值设置给 记录索引的状态变量
  • 选中AlphabetIndexer的区域,同步滚动List
    • AlphabetIndexer组件注册onSelect事件,获取选中的索引值
    • 调用 List 组件的控制器的 scrollToIndex方法,结合获取到的索引进行滚动

代码实现

interface ContactData {initial: stringnameList: string[]
}@Entry
@Component
struct Page09_ContactAndAlpha {// contacts,alphabets 不需要修改,只是用来渲染,可以不添加@Statecontacts: ContactData[] = [{ initial: 'A', nameList: ['阿猫', '阿狗', '阿虎', '阿龙', '阿鹰', '阿狼', '阿豹', '阿狮', '阿象', '阿鲸'] },{ initial: 'B', nameList: ['白兔', '白鸽', '白鹤', '白鹭', '白狐', '白狼', '白虎', '白鹿', '白蛇', '白马'] },{ initial: 'C', nameList: ['春花', '春风', '春雨', '春草', '春柳', '春燕', '春莺', '春蝶', '春蓝', '春绿'] },{ initial: 'D', nameList: ['冬雪', '冬梅', '冬松', '冬竹', '冬云', '冬霜', '冬月', '冬夜', '冬青', '冬红'] },{ initial: 'E', nameList: ['饿狼', '饿虎', '饿鹰', '饿豹', '饿熊', '饿蛇', '饿鱼', '饿虾', '饿蟹', '饿蚌'] },{ initial: 'F', nameList: ['飞鸟', '飞鱼', '飞虫', '飞蜂', '飞蝶', '飞蛾', '飞蝉', '飞蝗', '飞鼠', '飞猫'] },{ initial: 'G', nameList: ['孤狼', '孤鹰', '孤虎', '孤豹', '孤蛇', '孤鲨', '孤鲸', '孤鹿', '孤雁', '孤鸿'] },{ initial: 'H', nameList: ['海鸥', '海龟', '海豚', '海星', '海马', '海葵', '海参', '海胆', '海螺', '海贝'] },{ initial: 'I', nameList: ['火焰', '火球', '火箭', '火山', '火车', '火柴', '火把', '火鸟'] },{ initial: 'J', nameList: ['金鱼', '金狮', '金刚', '金鹿', '金蛇', '金鹰', '金豹', '金虎', '金狐', '金猫'] },{ initial: 'K', nameList: ['孔雀', '恐龙', '开心', '开怀', '开朗', '开拓', '开口', '开花', '开眼', '开天'] },{ initial: 'L', nameList: ['老虎', '老鹰', '老鼠', '老狼', '老狗', '老猫', '老熊', '老鹿', '老龟', '老蛇'] },{ initial: 'M', nameList: ['玫瑰', '牡丹', '梅花', '茉莉', '木兰', '棉花', '蜜蜂', '蚂蚁', '马蜂', '蟒蛇'] },{ initial: 'N', nameList: ['南山', '南极', '南海', '南京', '南阳', '南风', '南瓜', '南竹', '南花', '南鸟'] },{initial: 'O',nameList: ['熊猫', '欧鹭', '欧洲', '欧阳', '欧文', '欧若拉', '欧米茄', '欧罗巴', '欧菲莉亚', '欧瑞斯']},{ initial: 'P', nameList: ['苹果', '葡萄', '琵琶', '枇杷', '菩提', '瓢虫', '瓢泼', '飘零', '飘渺', '飘飘然'] },{ initial: 'Q', nameList: ['七喜', '强风', '奇迹', '乾坤', '奇才', '晴天', '青竹', '秋水', '轻舞', '清泉'] },{ initial: 'R', nameList: ['瑞雪', '瑞兽', '瑞光', '瑞云', '瑞彩', '瑞气', '瑞香', '瑞草', '瑞莲', '瑞竹'] },{ initial: 'S', nameList: ['三羊', '三狗', '三猫', '三鱼', '三角', '三鹿', '三鹰', '三蛇', '三狐', '三豹'] },{ initial: 'T', nameList: ['太阳', '天空', '田园', '太极', '太湖', '天鹅', '太空', '天使', '坦克', '甜橙'] },{ initial: 'U', nameList: ['乌鸦', '乌鹊', '乌鱼', '乌龟', '乌云', '乌梅', '乌木', '乌金', '乌黑', '乌青'] },{ initial: 'V', nameList: ['五虎', '五狼', '五鹰', '五豹', '五熊', '五蛇', '五鲨', '五鲸', '五鹿', '五马'] },{ initial: 'W', nameList: ['悟空', '微笑', '温暖', '无畏', '温柔', '舞蹈', '问心', '悟道', '未来', '文学'] },{ initial: 'X', nameList: ['西风', '西洋', '西子', '西施', '西岳', '西湖', '西柚', '西竹', '西花', '西鸟'] },{ initial: 'Y', nameList: ['夜猫', '夜鹰', '夜莺', '夜空', '夜色', '夜月', '夜影', '夜翼', '夜狐', '夜狼'] },{ initial: 'Z', nameList: ['珍珠', '紫薇', '紫霞', '紫竹', '紫云', '紫燕', '紫鸢', '紫藤', '紫荆', '紫罗兰'] },]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']// 选中的索引,需要更改,且需要同步更新到 UI 上,故添加@State@State selectedIndex: number = 0// 随机颜色函数getRandomColor(): ResourceColor {// 生成 0-255 的随机数const r = Math.floor(Math.random() * 256);const g = Math.floor(Math.random() * 256);const b = Math.floor(Math.random() * 256);// 拼接成随机的颜色,半透明并返回return `rgba(${r}, ${g}, ${b}, 0.5)`;}// 控制器对象scroller: Scroller = new Scroller()build() {Stack({ alignContent: Alignment.End }) {Column() {Stack({ alignContent: Alignment.End }) {Text('通讯录').width('100%').textAlign(TextAlign.Center).fontSize(20).onClick(() => {this.scroller.scrollToIndex(0, true)})Image($r('app.media.ic_public_add')).width(20)}.width('100%').padding(15).backgroundColor('#fff1f3f5')List({ scroller: this.scroller }) {// 顶部区域ListItem() {Row() {Image($r('app.media.ic_public_search')).width(20).fillColor(Color.Gray)Text('搜索').fontColor(Color.Gray)}.backgroundColor(Color.White).width('100%').height(40).borderRadius(5).justifyContent(FlexAlign.Center)}.padding(10).width('100%').backgroundColor('#fff1f3f5')ForEach(this.contacts, (item: ContactData, index: number) => {// 分组的联系人信息ListItemGroup({ header: this.itemHead(item.initial), space: 10 }) {ForEach(item.nameList, (it: string, i: number) => {// 循环渲染分组A的ListItemListItem() {Row({ space: 10 }) {Image($r('app.media.ic_public_lianxiren')).width(40).fillColor(this.getRandomColor())Text(it)}}})}.divider({startMargin: 60,strokeWidth: 1,color: '#ccc'})})}.onScrollIndex((start: number) => {this.selectedIndex = start})}AlphabetIndexer({ arrayValue: this.alphabets, selected: $$this.selectedIndex }).usingPopup(true).onSelect((index: number) => {this.scroller.scrollToIndex(index)})}}@BuilderitemHead(text: string) {// 列表分组的头部组件,对应联系人分组A、B等位置的组件Text(text).fontSize(20).backgroundColor('#fff1f3f5').width('100%').padding(5)}
}

好嘞今天的内容就到这里啦,感谢大家关注!这里是鸿蒙开天组,我们明天不见不散!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/2666.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Mac电脑技巧:适用于Mac的免费外置硬盘数据恢复软件

“我有一个 1 TB 的外置硬盘&#xff0c;它被意外格式化了。我尝试从中恢复丢失的数据。我把它连接到我的Mac&#xff0c;但里面什么也没找到。我正在寻找适用于Mac的免费外置硬盘数据恢复软件&#xff0c;例如奇客数据恢复Mac版或其他Mac数据恢复免费软件来扫描它并恢复数据。…

推荐一款高级的安装程序打包工具:Advanced Installer Architect

AdvanCEd Installer Architect是一款高级的安装程序打包工具&#xff0c;我们有时候可能用nsis用的多&#xff0c;Advanced Installer Architect也是一款打包工具&#xff0c;有兴趣的朋友也可以试试。有了Advanced Installer Architect你就可以创建MSI打包。 主要功能 *先进的…

LeetCode 热题100(七)【链表】(1)

7.链表 7.1相交链表&#xff08;简单&#xff09; 题目描述&#xff1a;leetcode链接 160.相交链表 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c…

OpenAI正在与台积电(TSMC)和博通(Broadcom)合作,打造自己的AI推理芯片

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

小新学习k8s第四天之发布管理

一、金丝雀发布&#xff08;灰度发布&#xff09; Deployment控制器支持自定义控制更新过程中的滚动节奏&#xff0c;如“暂停(pause)”或“继续(resume)”更新操作。 ①比如等待第一批新的Pod资源创建完成后立即暂停更新过程&#xff0c;此时&#xff0c;仅存在一部分新版本的…

大数据安全方案 验证

一、背景 文档用于记录配置 Kerberos 和 Ranger 后&#xff0c;对 HDFS、Hive 认证和鉴权的功能测试。 二、Kerberos 验证 2.1、验证功能 1&#xff0c;HDFS 认证 2.1.1、访问 HDFS Kerberos 验证前&#xff0c;访问 HDFS 失败。 Kerberos 验证后&#xff0c;访问 HDFS 成…

全面解析:云计算技术及其应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 全面解析&#xff1a;云计算技术及其应用 全面解析&#xff1a;云计算技术及其应用 全面解析&#xff1a;云计算技术及其应用 云…

规范:项目、目录、文件、样式、事件、变量、方法、url参数、注释、git提交 命名规范及考证

一、规范命名的重要性 易懂、通用、规范、标准、专业性、是经验积累的体现 1.1、常见命名方法 序号命名方法解释1全小写2全大写3驼峰&#xff1a;小驼峰命名法4驼峰&#xff1a;大驼峰命名法5烤串命名法 / 脊柱命名法6下划线分隔法 二、项目名 采用小写字母和中划线&#…

03-Dubbo的负载均衡及高性能RPC调用

03-Dubbo的负载均衡及高性能RPC调用 Dubbo 的负载均衡策略 负载均衡策略就是当某个服务压力比较大的时候&#xff0c;这时候部署多个节点同时提供相同的服务 当服务消费者来消费的时候&#xff0c;可以从这多个节点中选择一个节点进行消费&#xff0c;这个选择的过程&#xff0…

【LVGL-列表部件 lv_list_create】

LVGL-列表部件 lv_list_create ■ LVGL-列表部件-函数■ 修改样式-■ 修改样式- 背景色■ 修改样式- 改变项的颜色-label■ 修改样式- 改变项的颜色-btn ■ 事件(Event)■ 示例0&#xff1a;综合■ 示例1&#xff08;自动出现滚动&#xff09;■ 示例2&#xff08;滚动捕捉&…

【React】初学React

A. react中如何创建元素呢&#xff1f; 说明一点&#xff1a; 属性都改为驼峰形式&#xff08;无障碍属性aria-*除外&#xff09;&#xff0c; class改成className 创建元素 B. 变量或表达式如何表示呢&#xff1f;大括号{ }包起来 变量值用大括号包裹 C. 元素和组件的区别 元素…

设备搜索相关协议使用

一、实现原理 首先&#xff0c;Client -> Gateway : 发送 UDP 广播包&#xff08;含厂商自定义协议)这一步表示客户端开始向网络中发送一个包含厂商自定义协议的 UDP 广播包&#xff0c;目的是寻找本厂商的设备&#xff08;网关&#xff09;。客户端此时处于活动状态activa…

TMDOG的Gin学习笔记_01——初识Gin框架

TMDOG的Gin学习笔记_01——初识Gin框架 博客地址&#xff1a;[TMDOG的博客](https://blog.tmdog114514.icu) 作者自述&#xff1a; 停更太久了&#xff0c;是因为开学了课太多了&#xff0c;并且我一直在准备上篇文章的内容正在coding&#xff0c;就先搁置了更新博客QAQ&…

H7-TOOL的CAN/CANFD助手增加帧发送成功标识支持, 继续加强完善功能细节

2.27版本固件正式携带此功能&#xff0c;包括之前做的负载率检测和错误信息展示也将集成到这个版本固件中。 对于接收&#xff0c;我们可以直接看到效果&#xff0c;而发送不行&#xff0c;所以打算在发送的地方展示下发送成功标识。CAN发送不像串口&#xff0c;需要等待应答后…

Pr 视频效果:超级键

视频效果/键控/超级键 Keying/Ultra Key 超级键 Ultra Key效果是 Premiere Pro 中功能强大的抠像工具&#xff0c;主要用于绿幕/蓝幕抠像。通过选择要抠除的颜色&#xff08;通常是绿幕或蓝幕的颜色&#xff09;&#xff0c;即可以将该颜色的像素设为透明&#xff0c;实现主体与…

善用Git LFS来降低模型文件对磁盘的占用

将讲一个实际的例子&#xff1a;对于模型文件&#xff0c;动辄就是好几个G&#xff0c;而有的仓库更是高达几十G&#xff0c;拉一个仓库到本地&#xff0c;稍不注意直接磁盘拉满都有可能。 比如&#xff1a;meta-llama-3.1-8b-instruct&#xff0c;拉到本地后发现居然占用了60G…

「树链剖分」学习笔记

一、引入 “在一棵树上进行路径的修改、求极值、求和”乍一看只要线段树就能轻松解决&#xff0c;实际上&#xff0c;仅凭线段树是不能搞定它的。我们需要用到一种貌似高级的复杂算法——「树链剖分」。 树链剖分&#xff08;简称树剖&#xff09;&#xff0c;顾名思义&#xf…

Golang--数组、切片、映射

1、数组 1.1 数组类型 var 数组名 [数组大小]数据类型 package main import "fmt"func main(){//1、定义一个数组var arr1 [5]intarr1[0] 100arr1[1] 200fmt.Println(arr1) //[100 200 0 0 0] } 1.2 数组的初始化方式 package main import "fmt" func …

结构体对齐,位段

大家好&#xff0c;今天来给大家分享一些结构体的知识&#xff0c;结构体是我们学习数据结构的基础&#xff0c;只有把它了解清楚才能让我们学习数据结构是得心应手&#xff0c;现在让我们来看看它的一些内容吧。 1.结构体的定义和调用我们就跳过吧 大家如果还不熟悉的话可以去…

ElementUI中el-table双击单元格显示输入框

效果图 实现 <el-table:data"formData.products"row-key"id":show-header"true"style"width: 100%; margin-top: 16px"class"zq-table-theme-info"bordercell-dblclick"handleDbClick"> <el-table-col…