前言
“海风日记“的图片查看器底部提供了缩略图导航和操作栏，支持图片切换和保存/分享/更多操作。
本文将从源码出发，深入讲解底部操作栏的实现。
一、底部操作栏
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
- 开源鸿蒙跨平台社区
