分页圆点 + 页码指示器：双重视觉反馈
前言“海风日记“的图片查看器同时使用分页圆点和页码文字两种指示器为用户提供双重视觉反馈。本文将从源码出发深入讲解分页指示器的实现。一、双重视觉反馈// 1. 页码文字顶部 Text(${this.currentIndex 1} / ${this.imageUrls.length}) .fontSize(15).fontColor(#FFFFFF).fontWeight(FontWeight.Medium) // 2. 分页圆点中部 Row({ space: 6 }) { ForEach(this.imageUrls, (url: string, idx: number) { Column() .width(this.currentIndex idx ? 16 : 6).height(6).borderRadius(3) .backgroundColor(this.currentIndex idx ? #FFFFFF : rgba(255,255,255,0.4)) .animation({ duration: 200 }) }, (url: string, idx: number) url) }二、底部操作栏Row({ space: 0 }) { Column({ space: 4 }) { SymbolGlyph($r(sys.symbol.square_and_arrow_down)).fontSize(22).fontColor([#FFFFFF]) Text(保存).fontSize(10).fontColor(rgba(255,255,255,0.6)) }.layoutWeight(1).alignItems(HorizontalAlign.Center) Column({ space: 4 }) { SymbolGlyph($r(sys.symbol.shareplay)).fontSize(22).fontColor([#FFFFFF]) Text(分享).fontSize(10).fontColor(rgba(255,255,255,0.6)) }.layoutWeight(1).alignItems(HorizontalAlign.Center) Column({ space: 4 }) { SymbolGlyph($r(sys.symbol.ellipsis_circle)).fontSize(22).fontColor([#FFFFFF]) Text(更多).fontSize(10).fontColor(rgba(255,255,255,0.6)) }.layoutWeight(1).alignItems(HorizontalAlign.Center) } .width(100%).height(70) .padding({ left: 16, right: 16, bottom: 20 })三、总结本文通过“海风日记“的图片查看器深入讲解了分页指示器和底部操作栏的实现页码文字顶部显示当前/总数分页圆点中部动画圆点底部操作栏保存、分享、更多如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源SymbolGlyph 文档animation 属性文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
