基于HarmonyOS的情侣美食管理应用开发实战（三）- 美食相册与设置功能

基于HarmonyOS的情侣美食管理应用开发实战三- 美食相册与设置功能 系列文章目录一项目设计与角色管理二菜谱管理与订单系统三美食相册与设置功能本文四数据库优化与问题解决一、美食相册功能实现1.1 功能概述美食相册用于记录情侣一起品尝美食的美好时光上传美食照片添加照片描述浏览相册删除照片1.2 相册页面1.2.1 页面结构EntryComponentstruct GalleryPage{StateimageList:GalleryImage[][]StateisRefreshing:booleanfalseStategridView:booleantrue// true-网格视图 false-列表视图aboutToAppear(){this.loadImages()}asyncloadImages(){constpredicatesnewrelationalStore.RdbPredicates(gallery_img)predicates.orderByDesc(create_time)constresultSetawaitRdbUtil.query(predicates)this.imageList[]while(resultSet.goToNextRow()){constimage:GalleryImage{id:resultSet.getLong(resultSet.getColumnIndex(id)),image:resultSet.getString(resultSet.getColumnIndex(image)),description:resultSet.getString(resultSet.getColumnIndex(description)),create_time:resultSet.getLong(resultSet.getColumnIndex(create_time))}this.imageList.push(image)}resultSet.close()}build(){Column(){// 顶部工具栏Row(){Text(美食相册).fontSize(20).fontWeight(FontWeight.Bold)Blank()// 视图切换Toggle({type:ToggleType.Switch,isOn:$$this.gridView})// 上传按钮Button().onClick((){router.pushUrl({url:pages/GalleryAddPage})})}.width(100%).padding(16)// 图片展示if(this.gridView){this.GridView()}else{this.ListView()}}}}1.2.2 网格视图与列表视图BuilderGridView(){Grid(){ForEach(this.imageList,(item:GalleryImage){GridItem(){Image(item.image).width(100%).height(100%).objectFit(ImageFit.Cover).onClick((){router.pushUrl({url:pages/GalleryDetailPage,params:{imageId:item.id}})})}})}.columnsTemplate(1fr 1fr 1fr).rowsGap(4).columnsGap(4)}BuilderListView(){List(){ForEach(this.imageList,(item:GalleryImage){ListItem(){Column(){Image(item.image).width(100%).height(200).objectFit(ImageFit.Cover)if(item.description){Text(item.description).fontSize(14).margin({top:8})}Text(this.formatTime(item.create_time)).fontSize(12).fontColor(#999999)}.backgroundColor(#FFFFFF).borderRadius(8).margin({bottom:12})}})}}二、设置功能实现2.1 功能概述设置页面提供查看个人信息修改昵称切换角色清除数据2.2 设置页面2.2.1 页面结构EntryComponentstruct SettingsPage{StatecoupleConfig:CoupleConfig|nullnullStatecurrentRole:stringasyncaboutToAppear(){awaitthis.loadConfig()this.currentRoleawaitPreferencesUtil.get(current_role,)}// 修改昵称asyncupdateName(role:chef|diner,newName:string){constvalues:relationalStore.ValuesBucket{}if(rolechef){values.chef_namenewName.trim()}else{values.diner_namenewName.trim()}constpredicatesnewrelationalStore.RdbPredicates(couple_config)predicates.equalTo(id,this.coupleConfig.id)awaitRdbUtil.update(couple_config,values,predicates)prompt.showToast({message:修改成功})}// 切换角色asyncswitchRole(){constnewRolethis.currentRolechef?diner:chefawaitPreferencesUtil.put(current_role,newRole)consttargetPagenewRolechef?pages/ChefHomePage:pages/DinerHomePagerouter.replaceUrl({url:targetPage})}// 清除所有数据asyncclearAllData(){AlertDialog.show({title:确认清除,message:清除后所有数据将无法恢复,primaryButton:{value:取消,action:(){}},secondaryButton:{value:清除,fontColor:Color.Red,action:async(){awaitRdbUtil.executeSql(DELETE FROM recipe)awaitRdbUtil.executeSql(DELETE FROM order_record)awaitRdbUtil.executeSql(DELETE FROM gallery_img)awaitRdbUtil.executeSql(DELETE FROM couple_config)awaitPreferencesUtil.clear()router.replaceUrl({url:pages/RoleSelectPage})}}})}}三、关键技术点3.1 图片展示优化使用 Grid 组件实现相册网格布局Grid(){ForEach(this.imageList,(item:GalleryImage){GridItem(){Image(item.image).objectFit(ImageFit.Cover)}})}.columnsTemplate(1fr 1fr 1fr)// 三列布局3.2 对话框交互确认对话框AlertDialog.show({title:确认操作,message:确定要执行此操作吗,primaryButton:{value:取消,action:(){}},secondaryButton:{value:确定,fontColor:Color.Red,action:(){// 执行操作}}})3.3 时间格式化formatTime(timestamp:number):string{constdiffDate.now()-timestampif(diff60000){return刚刚}elseif(diff3600000){return${Math.floor(diff/60000)}分钟前}elseif(diff86400000){return${Math.floor(diff/3600000)}小时前}else{constdatenewDate(timestamp)return${date.getMonth()1}月${date.getDate()}日}}四、总结本篇文章介绍了美食相册和设置功能的实现包括美食相册照片上传、网格/列表切换、大图查看设置功能信息修改、角色切换、数据清除技术要点Grid布局、对话框交互、时间格式化下一篇文章将总结开发过程中遇到的问题和解决方案。