news 2026/7/19 17:39:42

HarmonyOS7字母索引选中色演示实战：选中态反馈与主题色配置

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HarmonyOS7字母索引选中色演示实战：选中态反馈与主题色配置

文章目录

      • 前言
      • 如果准备复刻，先盯住这几块
      • 这部分最容易被低估：状态关系
      • 这一页的控制权主要在这里
      • 第一段关键代码：页面是怎么被带起来的
      • 第二段关键代码：真正决定交互手感的地方
      • 第一次跑这个案例，我会怎么试
      • 这一页真正落地时，建议额外处理什么
      • 把它吃透之后，后面会省很多时间
      • 完整代码
      • 收个尾

前言

交互体验里有个很容易被忽略的点：用户到底知不知道自己点中了什么。这个案例用选中颜色变化，把 AlphabetIndexer 的即时反馈做了出来，特别适合练 UI 反馈细节。 有些案例看完只会得到一个 demo 效果，有些案例看完会顺手带走一套页面组织方法。我的目标是把它往后者那边讲。

字母索引选中色演示 这一页真正有意思的地方，不是把效果堆出来，而是它把 选中态反馈与主题色配置 这件事说得比较落地。这类页面最容易被忽略的往往不是功能，而是手感、反馈和节奏，我会把这些细点单独挑出来说。

这类写法尤其适合落在 品牌主题页、通讯录主题皮肤、交互反馈演示 这些场景里，所以我下面不会只讲“组件怎么写”，而是更关心“放进页面之后为什么这样组织”。

如果准备复刻，先盯住这几块

这一类页面看源码最怕的就是“每一段都认识，但拼起来不知道为什么这么摆”。所以这里先从页面骨架讲起，比直接盯属性更省时间。

页面区域主要职责在代码里的典型表现
头部说明区交代当前案例在演示什么Text标题、补充说明、标签文案
核心展示区承载组件能力的主要效果Column、Row、业务组件本体
辅助信息区补充状态、标签、分组或统计信息次级文本、角标、分组标题、描述块
交互入口区负责切换、返回、定位、选择等动作点击事件、按钮、索引条、导航入口

这一页没有额外拆出接口，页面更多是直接围绕基础数据和组件参数展开。

这类页面最容易被忽略的往往不是功能，而是手感、反馈和节奏，我会把这些细点单独挑出来说。

这部分最容易被低估：状态关系

有些 ArkUI 页面看起来像静态展示，但只要你开始点、滑、选、切，状态关系马上就露出来了。这个案例也一样。

这里的多个selected不是随便拆出来的，而是在模拟三套不同主题下的独立选中态。

  • isShow：控制整页示例显示。
  • selected1、selected2、selected3：分别对应三组索引条的当前选中字母。

这样写的好处是每套主题互不干扰。用户在第一组里点到A，不会把第二组、第三组也带着变。做主题对比页时，这种独立状态很重要，否则页面看起来是在展示样式，实际交互反馈却会互相串。

这一页的控制权主要在这里

我一般不会把所有方法从上到下读一遍，而是先找“用户动一下之后，页面为什么会变”的那条链路。

  • 这个案例没有太多额外方法，核心价值主要集中在页面结构和组件组合方式。

我自己读这类方法时，通常只抓一条线：谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来，很多交互代码一下就顺了。

第一段关键代码：页面是怎么被带起来的

这一段建议慢一点看。它通常决定了页面初始状态，也决定了后续哪些区域会跟着刷新。

@StateisShow:boolean=true@Stateselected1:number=0@Stateselected2:number=4@Stateselected3:number=8build(){Column(){if(this.isShow){Column({space:16}){Text('选中颜色自定义').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text('通过属性设置 AlphabetIndexer 的选中颜色、弹窗颜色和背景').fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width('100%')Column({space:14}){// 主题色Row({space:12}){Text('主题色').fontSize(14)

这一段我通常不会一下翻过去，而是先确认下面这几个判断点：

  • @State字段到底在控制显示、选择、跳转结果还是模式切换。
  • 默认值是不是合理，页面一打开会不会就落在一个可理解的状态上。
  • 字段命名能不能让后来的人一眼看懂用途，而不是还要翻半天 UI。

第二段关键代码：真正决定交互手感的地方

这一段完整代码最值得看的，是同一个alphabetArray如何通过不同颜色配置做出三种反馈。selectedColor、popupColor、selectedBackgroundColor不是装饰品，它们决定用户在快速滑动时能不能一眼确认当前位置。

/** * 字母索引选中色演示 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'constalphabetArray:string[]='ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')@Entry@Componentstruct AlphabetIndexerSelectedColor{@StateisShow:boolean=true@Stateselected1:number=0@Stateselected2:number=4@Stateselected3:number=8build(){Column(){if(this.isShow){Column({space:16}){Text('选中颜色自定义').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)

代码读到这里，我通常会顺手补三件事，不然后面很容易只看热闹：

  1. 这个交互入口接收的到底是什么输入。
  2. 输入进来之后，代码改了哪个状态，或者触发了哪次导航。
  3. 变化发生后，用户最先感知到的反馈会落在哪个区域。

这三个问题串起来之后，这一页基本就不只是“看过”，而是真的读懂了。

第一次跑这个案例，我会怎么试

如果你准备把这个案例交给团队里别的人看，我甚至建议直接让对方按下面的顺序自己操作一遍。很多理解偏差都会在这一步消失。

  1. 先进入页面，确认首屏是不是把字母索引选中色演示的主题交代清楚。
  2. 盯住核心展示区，观察默认状态下最醒目的内容是什么。
  3. 主动触发一次关键交互，比如点击、滑动、跳转、返回、切换或者选择。
  4. 回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。
  5. 最后再打开源码，对照刚才那次交互，把状态变化链路串起来。

如果这五步你能边操作边说清楚页面发生了什么，后面再换成自己的数据和交互，心里会稳很多。

这一页真正落地时，建议额外处理什么

从教程页到业务页，差的从来不只是接口。更多时候，是组件职责、命名和状态来源要重新收拾一遍。

  • 字母索引类页面建议先把分组数据结构稳定下来，再去调索引条样式和反馈层。
  • 一旦页面里还要加搜索、筛选或定位结果，状态来源最好先分层，不然后面很容易互相覆盖。
  • 只要页面里有重复块，就别硬撑着手写到底；早点抽成小组件，后面改样式和改交互都会轻松很多。
  • 示例数据最好和布局代码分开放，不然后面一接接口，页面文件很容易立刻变臃肿。

把它吃透之后，后面会省很多时间

很多官方示例的价值在于展示组件存在过，但这种页面更进一步：它在展示“组件被放进页面之后怎么活起来”。

  • 页面结构比较稳，后续不管是换数据还是换皮肤，成本都不会特别高。
  • 状态数量总体可控，适合拿来练“一个页面里如何分配职责”这件事。
  • 组件参数和页面目标之间关系比较直观，不太会出现“能跑但看不懂为什么这么配”的情况。

完整代码

下面保留整理过命名的完整 ArkTS 代码，方便你直接对照学习。这里已经去掉原始的 Demo 命名，改成了更贴近当前案例语义的名称。

/** * 字母索引选中色演示 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'constalphabetArray:string[]='ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')@Entry@Componentstruct AlphabetIndexerSelectedColor{@StateisShow:boolean=true@Stateselected1:number=0@Stateselected2:number=4@Stateselected3:number=8build(){Column(){if(this.isShow){Column({space:16}){Text('选中颜色自定义').fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text('通过属性设置 AlphabetIndexer 的选中颜色、弹窗颜色和背景').fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width('100%')Column({space:14}){// 主题色Row({space:12}){Text('主题色').fontSize(14).fontWeight(FontWeight.Medium).fontColor('#333333').width(60)Row(){Text(alphabetArray[this.selected1]).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR).layoutWeight(1).textAlign(TextAlign.Center)AlphabetIndexer({arrayValue:alphabetArray,selected:this.selected1}).selectedColor(DEMO_THEME_COLOR).popupColor(DEMO_THEME_COLOR).popupBackground('#E8EAF6').popupSelectedColor(DEMO_THEME_COLOR).selectedBackgroundColor('#E8EAF6').usingPopup(true).itemSize(13).onSelect((index:number)=>{this.selected1=index})}.layoutWeight(1).height(80).backgroundColor(DEMO_CARD_COLOR).borderRadius(10)}.width('100%')// 绿色Row({space:12}){Text('绿色').fontSize(14).fontWeight(FontWeight.Medium).fontColor('#333333').width(60)Row(){Text(alphabetArray[this.selected2]).fontSize(20).fontWeight(FontWeight.Bold).fontColor(PRESET_COLORS[0].value).layoutWeight(1).textAlign(TextAlign.Center)AlphabetIndexer({arrayValue:alphabetArray,selected:this.selected2}).selectedColor(PRESET_COLORS[0].value).popupColor(PRESET_COLORS[0].value).popupBackground('#E8F5E9').popupSelectedColor(PRESET_COLORS[0].value).selectedBackgroundColor('#E8F5E9').usingPopup(true).itemSize(13).onSelect((index:number)=>{this.selected2=index})}.layoutWeight(1).height(80).backgroundColor(DEMO_CARD_COLOR).borderRadius(10)}.width('100%')// 橙色Row({space:12}){Text('橙色').fontSize(14).fontWeight(FontWeight.Medium).fontColor('#333333').width(60)Row(){Text(alphabetArray[this.selected3]).fontSize(20).fontWeight(FontWeight.Bold).fontColor(PRESET_COLORS[2].value).layoutWeight(1).textAlign(TextAlign.Center)AlphabetIndexer({arrayValue:alphabetArray,selected:this.selected3}).selectedColor(PRESET_COLORS[2].value).popupColor(PRESET_COLORS[2].value).popupBackground('#FFF3E0').popupSelectedColor(PRESET_COLORS[2].value).selectedBackgroundColor('#FFF3E0').usingPopup(true).itemSize(13).onSelect((index:number)=>{this.selected3=index})}.layoutWeight(1).height(80).backgroundColor(DEMO_CARD_COLOR).borderRadius(10)}.width('100%')}.width('100%').padding(16).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)}.alignItems(HorizontalAlign.Start)}Text('字母索引选中色演示 - AlphabetIndexer 选中颜色').fontSize(12).fontColor('#999999').margin({top:12})}.width('100%').height('100%').backgroundColor(DEMO_BG_COLOR).padding(16)}}

收个尾

真放到日常开发里，最有参考价值的往往不是花样最多的页面，而是这种把关键决定摆得很清楚的案例。字母索引选中色演示 就属于这一类。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/7/19 17:38:10

node-jsonc-parser与主流JSON库对比：何时选择JSONC解析器

node-jsonc-parser与主流JSON库对比：何时选择JSONC解析器 【免费下载链接】node-jsonc-parser Scanner and parser for JSON with comments. 项目地址: https://gitcode.com/gh_mirrors/no/node-jsonc-parser 在当今的JavaScript和TypeScript开发中&#xff…

作者头像 李华
网站建设 2026/7/19 17:37:03

C++ 递归锁（Recursive Lock）详解

C 递归锁（Recursive Lock）详解 1. 什么是递归锁？ 递归锁（Recursive Mutex）是指同一个线程可以多次对同一个互斥量加锁而不会导致死锁的互斥量。 C 标准库中对应的类是： std::recursive_mutex：普…

作者头像 李华
网站建设 2026/7/19 17:35:04

Go语言_文件---文件操作

一、文件基础分类1. 设备文件（标准输入 / 输出）操作系统自带的默认打开设备文件，程序启动即可直接使用标准输出设备 stdout：屏幕fmt.Println() 底层封装 os.Stdout，向屏幕输出内容原生 API：os.Stdout.Write…

作者头像 李华