鸿蒙进阶-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.mzph.cn/pingmian/59242.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu交叉编译expat库给arm平台使用

1.下载expat库源码: https://github.com/libexpat/libexpat/release?page=2 wget https://github.com/libexpat/libexpat/release/download/R_2_3_0/expat-2.3.0.tar.bz2 下载成功: 2.解压expat库,并进入解压后的目录: tar xjf expat-2.3.0.tar.bz2 cd expat-2.3.0 <…

【系统面试篇】进程和线程类(1)(笔记)——区别、通讯方式、同步、互斥、锁分类

目录 一、问题综述 1. 进程和线程的区别&#xff1f; 2. 进程的状态有哪些&#xff1f; 3. 进程之间的通信方式? &#xff08;1&#xff09;管道 &#xff08;2&#xff09;消息队列 &#xff08;3&#xff09;共享内存 &#xff08;4&#xff09;信号量 &#xff08…

nginx(四):如何在 Nginx 中配置以保留真实 IP 地址

如何在 Nginx 中配置以保留真实 IP 地址 1、概述2、nginx配置示例2.1、配置说明2.2、客户端获取真实IP2.2.1、代码说明 3、插曲4、总结 大家好&#xff0c;我是欧阳方超&#xff0c;可以我的公众号“欧阳方超”&#xff0c;后续内容将在公众号首发。 1、概述 当使用nginx作为…

C++《list的模拟实现》

在上一篇C《list》专题当中我们了解了STL当中list类当中的各个成员函数该如何使用&#xff0c;接下来在本篇当中我们将试着模拟实现list&#xff0c;在本篇当中我们将通过模拟实现list过程中深入理解list迭代器和之前学习的vector和string迭代器的不同&#xff0c;接下来就开始…

本篇万字,博客最细,oled多级菜单代码解析,与实现教程,指针实现(含源码)!!!

目录 教程前言 多级菜单基本知识 驱动文件创建 ​编辑 ​编辑 ​编辑 定义菜单数据类型代码解析 按键代码解析 菜单数据赋值代码解析 菜单按键切换显示代码解析 项目工程移植地址 教程前言 前言&#xff1a;编写不易&#xf…

华为HarmonyOS打造开放、合规的广告生态 - 贴片广告

场景介绍 贴片广告是一种在视频播放前、视频播放中或视频播放结束后插入的视频或图片广告。 接口说明 接口名 描述 loadAd(adParam: AdRequestParams, adOptions: AdOptions, listener: AdLoadListener): void 请求单广告位广告&#xff0c;通过AdRequestParams、AdOptions…

Leetcode137只出现一次的数字|| 及其拓展

简述&#xff1a; 虽然标题是这么描述的&#xff0c;但是我们不是一上来就解这道题&#xff0c;先看一下他的子题和扩展 子题&#xff1a;136. 只出现一次的数字 - 力扣&#xff08;LeetCode&#xff09; 扩展题&#xff1a; 所以我们由易到难&#xff0c;先来看第一道&#x…

【解决办法】无法使用右键“通过VSCode打开文件夹”

个人博客&#xff1a;苏三有春的博客 前言 作者的编程环境为VScode&#xff0c;工作时常使用VScode打开整个工程文件夹。如果先打开VScode再从VScode中选择文件夹打开效率太慢&#xff0c;作者一般使用的方式是右键文件夹&#xff0c;直接选择"通过code打开文件夹"…

数据揭秘:掌握K-means聚类算法的精髓与实践

数据揭秘&#xff1a;掌握K-means聚类算法的精髓与实践 在机器学习领域&#xff0c;聚类是一种探索性的数据挖掘技术&#xff0c;用于将数据集中的样本划分成若干个簇&#xff0c;使得同一簇内的样本相似度高&#xff0c;而不同簇之间的样本相似度低。本文将深入探讨聚类分析的…

ADNI蛋白质数据集下载

&#xff08;我发现这个网站最近又更新了界面&#xff0c;现在变得很好看很简洁&#xff0c;但是有一些入口变了&#xff09; 1.官网链接 https://ida.loni.usc.edu/home/projectPage.jsp?projectADNI 2.登录 选择ADNI&#xff08;其实PPMI数据也是这样下的&#xff09;&a…

【数据分享】2024年我国省市县三级的生活服务设施数量(46类设施/Excel/Shp格式)

人才市场、售票处、旅行社等生活服务设施的配置情况是一个城市公共基础设施完善程度的重要体现&#xff0c;一个城市生活服务设施种类越丰富&#xff0c;数量越多&#xff0c;通常能表示这个城市的公共服务水平越高&#xff01; 本次我们为大家带来的是我国各省份、各地级市、…

彻底解决idea不识别java项目

需求背景 下载了一个java swing的项目,通过idea导入后,项目无法识别。打开java文件,也不会报错,也不编译。 无法识别效果图 可以看到左侧的菜单,项目是没有被识别。 打开java文件,可以看到没有识别,java的图标也没有出现。 解决方法 1、打开Project Structure 2、修改…

HTMLCSS:打造酷炫下载安装模拟按钮

效果演示 这段代码通过HTML和CSS创建了一个具有交互效果的下载按钮&#xff0c;当复选框被选中时&#xff0c;会触发一系列动画和样式变化&#xff0c;模拟了一个下载和安装的过程&#xff0c;包括圆形的动画、文本的显示和隐藏等。 HTML <div class"container&quo…

Multi Agents协作机制设计及实践

01 多智能体协作机制的背景概述 在前述博客中&#xff0c;我们利用LangChain、AutoGen等开发框架构建了一个数据多智能体的平台&#xff0c;并使用了LangChain的Multi-Agents框架。然而&#xff0c;在实施过程中&#xff0c;我们发现现有的框架存在一些局限性&#xff0c;这些…

ML2001-1 机器学习/深度学习 Introduction of Machine / Deep Learning

图片说明来自李宏毅老师视频的学习笔记&#xff0c;如有侵权&#xff0c;请通知下架 影片参考 【李宏毅】3.第一节 - (上) - 机器学习基本概念简介_哔哩哔哩_bilibili 1. 机器学习的概念与任务类型 概念&#xff1a;机器学习近似于寻找函数&#xff0c;用于处理不同类型的任…

90%会展主办方都会用的6款数字化工具

在会展行业&#xff0c;数字化转型已成为提升竞争力的关键。面对日益增长的运营成本和收入增长的瓶颈&#xff0c;主办方需要借助数字化工具来实现效率提升和成本控制。 今天介绍几种常见的数字化工具和应用方式。 一、线上展览平台 构建线上展览平台是会展主办方拓展线上销…

JMeter快速造数之数据导入导出

导入数据 输入表格格式如下 创建CSV Data Set Config 在Body Data中调用 { "username": "${email}", "password": "123456", "client_id": "00bb9dbfc67439a5d42e0e19f448c7de310df4c7fcde6feb5bd95c6fac5a5afc"…

渗透测试-快速获取目标中存在的漏洞(小白版)

《Java代码审计》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484219&idx1&sn73564e316a4c9794019f15dd6b3ba9f6&chksmc0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene21#wechat_redirect 《Web安全》h…

[免费]基于Python的Django+Vue3在线考试系统【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的基于Python的DjangoVue3在线考试系统&#xff0c;分享下哈。 项目视频演示 【免费】基于Python的DjangoVue3在线考试系统 Python毕业设计_哔哩哔哩_bilibili 项目介绍 本论文提出并实现了一种基于Python…

Unity3D学习FPS游戏(9)武器音效添加、创建敌人模型和血条

前言&#xff1a;虽然已经实现了基本玩家操作&#xff0c;但是游戏运行起来并没有音效。既然是FPS游戏有了玩家和武器&#xff0c;肯定还得有敌人。本篇演示如何给武器添加音效和创建敌人。 武器音效添加和创建敌人 武器音效添加Audio Source代码控制 创建敌人目标敌人模型敌人…