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

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​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": "宵夜"
        }
      ]
    }
  ]
}

关键代码：

@CustomDialog
export struct Record {
    private foodInfo: FoodInfo
    private controller: CustomDialogController
    private select: number = 1
    private mileTime: Resource = $r('app.strarray.mealTime_labels')
    private foodWeight: string[] = ['25', '50', '100', '150', '200', '250', '300', '350', '400', '450', '500']
    private mealTimeId: MealTimeEnum = MealTimeEnum.Lunch
    private mealWeight: number = Number(this.foodWeight[this.select])
    build() {
        Column() {
            Row({ space: 6 }) {
                Column() {
                    Text(this.foodInfo.name)
                        .minFontSize(18)
                        .maxFontSize(30)
                        .maxLines(1)
                    Text($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,
                        colors: [[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,
                        direction: GradientDirection.Top,
                        colors: [[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({ top: 33, left: 72, right: 72 })
                .backgroundColor($r('app.color.theme_color_green'))
                .onClick(() => {
                    let dietRecordsList = AppStorage.Get<Array<DietRecord>>('dietRecords')
                    if (dietRecordsList == undefined || dietRecordsList.length === 0) {
                        dietRecordsList = new Array<DietRecord>()
                    }
                    let dietRecordData = new DietRecord(dietRecordsList.length, this.foodInfo.id, new MealTime(this.mealTimeId), this.mealWeight)
                    dietRecordsList.push(dietRecordData)
                    AppStorage.SetOrCreate<Array<DietRecord>>('dietRecords', dietRecordsList)
                    this.controller.close()
                })
        }
        .cardStyle()
        .height(254)
        .width('90%')
    }
}

对话框效果图。

总结

根据导图列出的各组件，像写对话框一样，一个个组件功能完成，对于初始者来说，一下子写一个小组件，比一开始就写一个Demo简单多了，组件写多了，经验丰富了，那时要写什么样的APP，就看个人创意了，我也打算，下来有空把这个饮食APP用到的各组件，每个组件写一个帖子，把用到的知识都总结出来，这样对以后的学习也有一定的帮助，谢谢这次活动的实例，让我学到了更多的知识，我也会一直在学习路上。

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​。