HarmonyOS应用开发实战：萌宠日记 - 照片总数统计展示

HarmonyOS应用开发实战萌宠日记 - 照片总数统计展示前言照片总数统计是相册页底部的汇总信息它告诉用户相册中一共存储了多少张照片。在萌宠日记的 AlbumPage 中底部有一个“共128张照片”的统计文字居中显示作为相册内容的收尾。虽然这个组件看似简单但它涉及数据绑定、动态更新、布局设计等多个技术要点。本文将从萌宠日记中照片总数统计的实现出发深入解析统计信息的布局设计、数据绑定、动态更新、统计计算逻辑以及底部留白的处理技巧帮助读者掌握 ArkUI 中数据展示组件的完整实现方法。一、统计展示组件设计1.1 基础实现// AlbumPage.ets — 照片总数统计Text(共128张照片).fontSize(13).fontColor(#999999).width(100%).textAlign(TextAlign.Center).padding({top:8,bottom:24})这段代码实现了相册底部的统计信息展示。看似简单但每个属性都有其设计考量属性值设计意图fontSize13fp小号辅助文字不抢夺主体内容注意力fontColor#999999灰色视觉上柔和低调width100%撑满容器宽度确保居中效果textAlignTextAlign.Center水平居中与相册网格对齐padding.top8vp与上方网格保持适当间距padding.bottom24vp底部留白避免内容贴底1.2 在页面中的位置// AlbumPage.ets — 完整的相册页面布局Scroll(){Column({space:16}){// 分类标签栏this.CategoryTabs()// 日期分组照片网格ForEach(this.photoGroups,(group:PhotoGroup){this.PhotoGroupSection(group)})// 照片总数统计位于底部this.PhotoCountSummary()}.padding({left:16,right:16,top:16})}.layoutWeight(1)统计信息位于Scroll 的底部作为所有照片内容的收尾给用户一个完整的信息闭环。二、动态数据绑定2.1 使用 State 实现数据驱动// 动态数据绑定StatetotalPhotos:number128Text(共${this.totalPhotos}张照片).fontSize(13).fontColor(#999999).width(100%).textAlign(TextAlign.Center).padding({top:8,bottom:24})使用模板字符串\共${this.totalPhotos}张照片将数字嵌入文本中当totalPhotos 变化时UI 自动更新。2.2 数据更新的触发场景// 更新照片总数的场景// 场景1从媒体库加载照片后loadPhotosFromLibrary():void{constphotosthis.fetchPhotos()this.totalPhotosphotos.lengththis.photoGroupsthis.groupByMonth(photos)}// 场景2删除照片后deletePhoto(photoId:string):void{this.photosthis.photos.filter(pp.id!photoId)this.totalPhotosthis.photos.lengththis.photoGroupsthis.groupByMonth(this.photos)}// 场景3新增照片后addPhotos(newPhotos:PhotoItem[]):void{this.photos[...this.photos,...newPhotos]this.totalPhotosthis.photos.lengththis.photoGroupsthis.groupByMonth(this.photos)}三、统计计算逻辑3.1 从数据源计算总数// 从照片数据源计算总数Statephotos:PhotoItem[][]StatephotoGroups:PhotoGroup[][]// 计算照片总数gettotalPhotosCount():number{returnthis.photos.length}// 或者从分组数据计算gettotalFromGroups():number{letcount0for(constgroupofthis.photoGroups){countgroup.photos.length}returncount}提示使用get访问器计算属性可以自动派生数据无需手动维护totalPhotos状态。当photos数组变化时totalPhotosCount自动返回最新值。3.2 计算属性 vs 独立状态方式优点缺点推荐场景get计算属性自动派生无需手动同步每次访问都重新计算简单计算场景State独立状态手动控制更新时机需要手动同步复杂计算或异步场景3.3 使用计算属性的完整实现EntryComponentexportstruct AlbumPage{Statephotos:PhotoItem[][]StateselectedCategory:number0// 计算属性自动计算照片总数gettotalPhotos():number{returnthis.photos.length}build(){Column(){// 分类标签栏this.CategoryTabs()// 照片网格Scroll(){Column({space:16}){ForEach(this.photoGroups,(group:PhotoGroup){this.PhotoGroupSection(group)})// 使用计算属性this.PhotoCountSummary()}.padding({left:16,right:16,top:16})}.layoutWeight(1)}.width(100%).height(100%).backgroundColor(#FFF8F0)}BuilderPhotoCountSummary(){Text(共${this.totalPhotos}张照片).fontSize(13).fontColor(#999999).width(100%).textAlign(TextAlign.Center).padding({top:8,bottom:24})}}四、按分类统计4.1 分类筛选后的统计// 根据当前选中的分类计算照片数量getfilteredPhotos():PhotoItem[]{if(this.selectedCategory0)returnthis.photos// 全部constcategoryLabelthis.categories[this.selectedCategory].labelreturnthis.photos.filter(pp.categorycategoryLabel)}getfilteredCount():number{returnthis.filteredPhotos.length}// 显示分类统计Text(共${this.filteredCount}张照片).fontSize(13).fontColor(#999999).width(100%).textAlign(TextAlign.Center)4.2 分类统计对照表分类筛选条件统计显示全部不过滤共 128 张照片日常category 日常共 56 张照片成长category 成长共 32 张照片旅行category 旅行共 24 张照片其他category 其他共 16 张照片五、统计文本的样式定制5.1 多种样式方案// 方案1简约风格萌宠日记当前使用Text(共${this.totalPhotos}张照片).fontSize(13).fontColor(#999999)// 方案2强调数字Text(){Span(共 )Span(${this.totalPhotos}).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#F5A623)Span( 张照片)}.fontSize(13).fontColor(#999999)// 方案3完整统计信息Text(共${this.totalPhotos}张照片 ·${this.photoGroups.length}个月份).fontSize(12).fontColor(#999999)5.2 使用 Span 组件实现混排// 使用 Span 组件实现数字高亮Text(){Span(共 ).fontSize(13).fontColor(#999999)Span(${this.totalPhotos}).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#F5A623)// 数字使用品牌色高亮Span( 张照片).fontSize(13).fontColor(#999999)}.width(100%).textAlign(TextAlign.Center)六、底部留白设计6.1 留白的作用// 底部留白 24vp.padding({bottom:24})底部留白在 UI 设计中的作用安全区域适配避免内容被底部导航栏或系统手势条遮挡视觉舒适内容不贴边呼吸感更强滚动体验最后一项滚动到底部时有足够的缓冲空间6.2 安全区域适配// 安全区域适配扩展方案import{window}fromkit.ArkUIStatebottomSafeArea:number0aboutToAppear():void{constwindowClasswindow.getLastWindow(this.context)windowClass.then(win{constavoidAreawin.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)this.bottomSafeAreaavoidArea.bottomRect.height})}Text(共${this.totalPhotos}张照片).padding({bottom:this.bottomSafeArea24})七、统计信息的无障碍设计7.1 无障碍适配Text(共${this.totalPhotos}张照片).fontSize(13).fontColor(#999999).width(100%).textAlign(TextAlign.Center).accessibilityText(相册中共有${this.totalPhotos}张照片)八、统计信息的状态管理8.1 数据流媒体库加载 → photos[] 更新 → totalPhotos 计算属性 → UI 自动更新 ↓ 用户删除照片 → photos[] 变化 → totalPhotos 重新计算 → UI 刷新 ↓ 用户新增照片 → photos[] 变化 → totalPhotos 重新计算 → UI 刷新8.2 完整的增删改场景// 初始化加载aboutToAppear():void{this.loadPhotos()}asyncloadPhotos():Promisevoid{consturisawaitthis.fetchAllPhotoUris()this.photosuris.map((uri,index)({id:photo_${index},uri:uri,category:this.detectCategory(uri),date:this.extractDate(uri)}))this.photoGroupsthis.groupByMonth(this.photos)}九、统计信息的国际化9.1 多语言支持// zh_CN/element/string.json{string:[{name:photo_count,value:共%d张照片}]}// en_US/element/string.json{string:[{name:photo_count,value:%d photos in total}]}// 使用资源引用import{resourceManager}fromkit.LocalizationKitStatetotalPhotos:number128// 获取本地化字符串getLocalizedCount():string{returnthis.context.resourceManager.getStringSync($r(app.string.photo_count).id,[this.totalPhotos])}十、最佳实践10.1 统计信息展示原则有序列表 — 统计信息设计的 5 个原则位置明确统计信息放在内容区域的底部作为收尾字号小、颜色浅使用 13fp 灰色不抢夺主体内容的注意力数据驱动使用 State 或计算属性自动更新底部留白24vp 以上底部间距适配安全区域无障碍支持为统计信息添加 accessibilityText 描述10.2 萌宠日记统计信息总结设计要素值说明位置相册底部内容收尾字号13fp小号辅助文字颜色#999999灰色不抢眼对齐居中与网格对齐上边距8vp与上方内容间距下边距24vp底部留白数据绑定计算属性自动派生总结本文从萌宠日记的照片总数统计展示实现出发深入解析了统计信息组件的完整实现方案基础实现Text 组件展示统计文本13fp 灰色居中动态数据绑定使用 State 模板字符串实现数据驱动 UI统计计算逻辑get计算属性自动派生总数分类统计按选中分类筛选并计算数量样式定制Span 组件实现数字高亮混排底部留白24vp 底部间距 安全区域适配无障碍设计accessibilityText 描述国际化支持多语言 string.json 资源统计信息组件虽然小巧但涵盖的数据绑定、计算属性、条件渲染、无障碍、国际化等技术点使其成为 ArkUI 组件设计的优秀范例。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Text 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textSpan 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-spanState 装饰器https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state资源分类与访问https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/resource-categories-and-access无障碍开发指导https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit安全区域适配https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/safe-area国际化开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/internationalization开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net