鸿蒙进阶-AlphabetIndexer组件

news2024/11/26 10:28:08

大家好,这里是鸿蒙开天组,今天我们来学习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 = 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%')
  }
}

注意:

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

外观设置

设置文字外观

选中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 = 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。

参考代码

@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%')
  }
}

事件

支持的常用事件是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 = 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 })
        .color(Color.Orange)// 文字颜色
        .selectedColor(Color.Green)// 选中文字颜色
        .selectedBackgroundColor(Color.Black)// 选中背景颜色
        .usingPopup(true)// 显示弹窗
        .popupColor(Color.Orange)// 弹窗文字颜色
        .popupBackground(Color.Pink)// 弹窗背景色
        .onSelect((index: number) => {
          // this.selectedIndex = index
          console.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: string
  nameList: string[]
}

@Entry
@Component
struct Page09_ContactAndAlpha {
  // contacts,alphabets 不需要修改,只是用来渲染,可以不添加@State
  contacts: 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的ListItem
                ListItem() {
                  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)
        })
    }

  }

  @Builder
  itemHead(text: string) {
    // 列表分组的头部组件,对应联系人分组A、B等位置的组件
    Text(text)
      .fontSize(20)
      .backgroundColor('#fff1f3f5')
      .width('100%')
      .padding(5)
  }
}

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

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

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

相关文章

【Unity】【游戏开发】Sprite背景闪烁怎么解决

【现象】 VR游戏中&#xff0c;给作为屏幕的3D板子加上Canvas后再加背景image&#xff0c;运行时总是发现image闪烁不定。 【分析】 两个带颜色的object在空间上完全重合时也遇到过这样的问题&#xff0c;所以推测是Canvas的image背景图与木板的面重合导致。 【解决方法】 …

sublime Text中设置编码为GBK

要在sublime Text中设置编码为GBK&#xff0c;请按照以下步骤操作 1.打开Sublime Text编辑器, 2.点击菜单栏中的“Preferences”(首选项)选项&#xff0c;找打Package Control选项。 3.点击Package Control&#xff0c;随后搜索Install Package并点击&#xff0c;如下图 4.再…

队列与栈的代码对比(Java)

目录 链表实现队列 数组实现队列 链表实现栈 数组实现栈 图片: 链表实现队列 package Queue;import java.util.Iterator;public class LinkedListQueue <E> implements Queue<E>, Iterable<E>{//单向环形哨兵链表//节点类private static class Node<…

一些常规IP核功能

一,util_vector_logic util_vector_logic 主要支持以下类型的逻辑操作: 逻辑与(AND): 当所有输入都为1时,输出为1,否则为0。逻辑或(OR): 当任意输入为1时,输出为1,否则为0。逻辑非(NOT): 当输入为1时,输出为0;输入为0时,输出为1。异或(XOR): 当输入中有奇…

Docker篇(Docker安装)

目录 一、Centos7.x 1. yum 包更新到最新 2. 安装需要的软件包 3. 设置 yum 源为阿里云 4. 安装docker 5. 安装后查看docker版本 6. 设置ustc镜像源 二、CentOS安装Docker 前言 1. 卸载&#xff08;可选&#xff09; 2. 安装docker 3. 启动docker 4. 配置镜像加速 …

【c++ gtest】使用谷歌提供的gtest和抖音豆包提供的AI大模型来对代码中的函数进行测试

【c gtest】使用谷歌提供的gtest和抖音豆包提供的AI大模型来对代码中的函数进行测试 下载谷歌提供的c测试库在VsCode中安装抖音AI大模型找到c项目文件夹&#xff0c;使用VsCode和VS进行双开生成gtest代码进行c单例测试 下载谷歌提供的c测试库 在谷歌浏览器搜索github gtest, 第…

google adsense广告费中国收款结算被银行拒解决办法

多年前搞了几个网站&#xff0c;挂了谷歌google adsense广告&#xff0c;不知道不觉到了100美金最低结算&#xff0c;谷歌给我打款&#xff0c;之前是绑定交银银行的。被银行镜内登陆谷歌不合法不合规给拒绝入账&#xff0c;把美金退回了&#xff0c;怎么办&#xff1f; googl…

蓝桥杯 区间移位--二分、枚举

题目 代码 #include <stdio.h> #include <string.h> #include <vector> #include <algorithm> #include <iostream> using namespace std; struct node{ int a,b; }; vector<node> q; bool cmp(node x,node y){ return x.b <…

书生第四期实训营基础岛——L1G1000书生大模型全链路开源体系

书生浦语大模型开源开放体系 书生浦语开源一周年历史 2023.7.6&#xff1a;InternLM-7B开源率先免费商用发布全链条开源工具体系2023.9.20&#xff1a;InternLM-20B开源&#xff0c;开源工具链全线升级2024.1.17&#xff1a;InternLM2开源&#xff0c;性能超最新同量级开源模…

单元测试(Junit)

系统—模块—子模块&#xff0c;子模块中不可分割的程序单元的测试&#xff0c;单元的粒度根据实际情况可能是 类或方法等。 面向对象编程中&#xff0c;最小单元就是方法。 单元测试目的是在集成测试和功能测试之前对系统可测试单元进行逐一检查和验证。 单元测试基本原则 …

MySQL表的增删改查(CRUD3约束)

这次我们开始先不复习嗷&#xff0c;等到把数据表的删除说完咱们统一&#xff0c;总结书写 1.数据表的删除&#xff1a; 语法&#xff1a; 1. 使用 DROP TABLE 语句删除单个表 基本语法&#xff1a;DROP TABLE [IF EXISTS] table_name; table_name是要删除的表的名称。IF EXIS…

go中Println和Printf的区别

Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 go中Println和Printf的区别 package mainimport ( "fmt" )//TIP To run your code, right-click the c…

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

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

编译安装并刷写高通智能机器人SDK

The Qualcomm Intelligent Robotics Product SDK (QIRP SDK) 高通智能机器SDK基于ROS2进行开发&#xff0c;此SDK适用于高通linux发行版本&#xff0c;QIRPSDK中提供以下内容&#xff1a; ROS 包中用于支持机器人应用程序开发的参考代码 用于评估机器人平台的端到端场景示例集…

网页版五子棋—— WebSocket 协议

目录 前言 一、背景介绍 二、原理解析 1.连接过程&#xff08;握手&#xff09; 2.报文格式 三、代码示例 1.服务端代码 &#xff08;1&#xff09;TestAPI 类 &#xff08;2&#xff09;WebSocketConfig 类 2.客户端代码 3.代码演示 结尾 前言 从本篇文章开始&am…

鸿蒙应用开发:下载功能

鸿蒙系统不断发展&#xff0c;有与安卓、iOS 形成三足鼎立之势&#xff0c;且其在智能手机、智能穿戴、车载、家居等行业领域的应用越来越广泛。作为开发者&#xff0c;如何抓住鸿蒙生态崛起的机遇&#xff0c;解决开发挑战&#xff0c;创造更好的应用体验&#xff1f;欢迎您和…

小白直接冲!BiTCN-BiLSTM-Attention双向时间卷积双向长短期记忆神经网络融合注意力机制多变量回归预测

小白直接冲&#xff01;BiTCN-BiLSTM-Attention双向时间卷积双向长短期记忆神经网络融合注意力机制多变量回归预测 目录 小白直接冲&#xff01;BiTCN-BiLSTM-Attention双向时间卷积双向长短期记忆神经网络融合注意力机制多变量回归预测效果一览基本介绍程序设计参考资料 效果一…

如何绘制产业链图谱?

绘制产业链图谱是一个系统性的工作&#xff0c;涉及到对产业的深入理解和分析。对于一般产业绘制产业图谱的步骤&#xff0c;我们可以参照以下流程&#xff1a; 1.明确目标产业链&#xff1a;确定要分析的产业链&#xff0c;比如新材料、新能源、智能制造等&#xff0c;这通常…

Pycharm,2024最新专业版下载安装配置详细教程!

先来一段官方介绍&#xff0c;PyCharm是一种PythonIDE&#xff0c;带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具&#xff0c;比如调试、语法高亮、Project管理、代码跳转、智能提示、自动完成、单元测试、版本控制。此外&#xff0c;该IDE提供了一些高级功能…

鸿蒙开发——进程模型与进程通信

1、进程模型 ❓ 什么是进程&#xff1f; 进程是一个正在执行的程序的实例。当我们启动一个程序时&#xff0c;操作系统会创建一个进程&#xff0c;分配给它所需的资源&#xff0c;如内存和CPU时间。每个进程至少有一个线程&#xff0c;即执行线程&#xff0c;负责执行程序的指…