Openharmony应用开发--健康饮食APP分解

了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言在这里健康生活的实践课程，个人认为是非常值得学习。里面普及了很多ArkUI的知识点。从中我学会了常用基础组件的使用和页面布局，自定义组件的使用，属性动画，显示动画，转场动画，绑定手势方法，图表绘制，状态变量，国际化，一次性开发和多终端部署等，我把减肥APP界面的各个组件写在单独的文件中，然后引用组装。对于新手来说，分别理解每个组件，然后通过下图，清晰的组装成一个完整的APP。清晰效果图请到B站观看https://www.bilibili.com/video/BV1de4y1n7qc/?spm_id_from=333.999.0.0。项目结构图的开发过程从简单的组件开始，也是视频中的课后作业。当你把简单的组件一个一个做出来，组成一个完整的APP并不难。在这里，我从记录饮食对话框开始。该对话框有用餐时间，如早餐、午餐、晚餐和晚餐，并有用餐权重，用餐时间是固定的。可以在资源文件中定义国际化，然后在组件上引用。资源文件定义了餐饮Label，由字符串数组strarray.json定义。{"strarray":[{"name":"mealTime_labels","value":[{"value":"Breakfast"},{"value":"Lunch"},{"value":"Dinner"},{"value":"Supper"}]}]}{"strarray":[{"name":"mealTime_labels","value":[{"value":"早餐"},{"value":"午饭"},{"value":"晚餐"},{"value":"宴夜"}]}]}关键代码：@CustomDialogexportstructRecord{privatefoodInfo:FoodInfoprivatecontroller:CustomDialogControllerprivateselect:number=1privatemileTime：Resource=$r('app.strarray.mealTime_labels')privatefoodWeight：string[]=['25','50','100','150','200','250','300','350','400','450','500']privatemealTimeId:MealTimeEnum=MealTimeEnum.LunchprivatemealWeight:number=Number(this.foodWeight[this.select])build(){Column(){Row({space:6}){Column(){Text(this.foodInfo.name).minFontSize(18).maxFontSize(30).maxLines(1)文本($r('app.string.calorie_with_kcal_unit',this.foodInfo.calories.toString())).fontSize(16).fontColor('rgba(0,0,0,0.4)').margin({top:2})}.layoutWeight(1).justifyContent(FlexAlign.Center)TextPicker({range:this.mileTime,selected:this.select}).layoutWeight(1).linearGradient({angle:0,direction:GradientDirection.Top,颜色:[[0xfdfdfd,0.0],[0xe0e0e0,0.5],[0xfdfdfd,1]],}).onChange((value:string,index:number)=>{this.mealTimeId=index})TextPicker({range:this.foodWeight,selected:this.select}).layoutWeight(1).linearGradient({angle:0,方向：GradientDirection.Top，颜色：[[0xfdfdfd,0.0],[0xe0e0e0,0.5],[0xfdfdfd,1]],}).onChange((value:string)=>{this.mealWeight=Number(value)})}.height(128)Button($r('app.string.button_food_detail_complete'),{type:ButtonType.Capsule,stateEffect:true}).height(43).width('100%').margin({上：33，左：72，右：72}).backgroundColor($r('app.color.theme_color_green')).onClick(()=>{让dietRecordsList=AppStorage.Get>('dietRecords')if(dietRecordsList==undefined||dietRecordsList.length===0){dietRecordsList=newArray()}让dietRecordData=newDietRecord(dietRecordsList.length,this.foodInfo.id,newMealTime(this.mealTimeId),this.mealWeight)dietRecordsList.push(dietRecordData)AppStorage.SetOrCreate>('dietRecords',dietRecordsList)这个.controller.close()})}.cardStyle().height(254).width('90%')}}对话框渲染总结根据图中列出的组件，就像写对话框一样，完成每个组件的功能。对于初学者来说，一下子写一个小组件比一开始写一个demo要容易的多。组件写多了，经验丰富了，到时候写什么样的APP，就看个人的创意了。我也打算，有空就把这个减肥APP用到的每个组件写一篇帖子，把用到的知识总结一下，对以后的学习也有帮助。感谢这次活动的榜样，让我学到更多的知识，我会一直在学习的路上。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。