前言“海风日记“的图片查看器底部提供了缩略图导航和操作栏支持图片切换和保存/分享/更多操作。本文将从源码出发深入讲解底部操作栏的实现。一、底部操作栏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 })二、分页指示器组合// 页码文字 Text(${this.currentIndex 1} / ${this.imageUrls.length}) .fontSize(15).fontColor(#FFFFFF).fontWeight(FontWeight.Medium) // 分页圆点 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) } .width(100%).justifyContent(FlexAlign.Center) .padding({ top: 12, bottom: 12 })三、总结本文通过“海风日记“的图片查看器深入讲解了底部操作栏和分页指示器的实现底部操作栏3 个操作图标等分分页指示器页码 圆点双反馈SymbolGlyph 白色图标深色背景layoutWeight 等分均匀分布如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源SymbolGlyph 文档layoutWeight 属性文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区