鸿蒙开发实践项目--饮食记录卡片

该项目功能为记录一天的饮食，营养摄取量，通过数字化记录饮食活动，帮助用户达到健康饮食的功能，实现内容主要有，欢迎页面，饮食统计页，食物列表页

主要实现内容如下：

1.欢迎界面

持续化保存：用户首选项

进入欢迎页面-->加载首选项-->是否同意

-->若同意，进入页面

- -->若不同意，弹出用户协议-->是否同意

-->同意，保存首选项进入页面

-->不同意，退出app

2.饮食统计页

进入首页-->获取当前日期-->加载饮食记录 -->统计热量，统计营养素， 分组展示饮食记录

进入首页-->用户选择日期-->加载饮食记录-->统计热量，统计营养素， 分组展示饮食记录

进入首页-->用户点击+- ->加载饮食记录-->统计热量，统计营养素， 分组展示饮食记录

统计热量

1.推荐最大摄入热量

2.饮食摄入热量

3.运动消耗热量

4.还可以摄入=推荐最大摄入量-饮食摄入量+运动消耗量

3.食物的列表页

进入列表页-->加载食物列表-->用户点击+ -->弹出底部面板

底部面板：展示食物详情-->用户填写数量-->是否提交

-->提交，保存饮食记录（数据量较大，需要用到关系型数据库）

-->不提交，取消

欢迎页面 

UI设计

下面首先实现欢迎页面的设计，ui设计如下

 @Extend(Text) function opacityWhiteText(opacity: number, fontSize: number = 10) {
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}//便于简化代码

 build() {
    Column({ space: 10 }) {
      // 1.中央Slogan
      Row() {
        Image($r('app.media.home_slogan')).width(260)
      }
      .layoutWeight(1)
      // 2.logo
      Image($r('app.media.home_logo')).width(150)
      // 3.文字描述
      Row() {
        Text('黑马健康支持').opacityWhiteText(0.8, 12)//白色0.8透明，字体12
        Text('IPv6')
          .opacityWhiteText(0.8)
          .border({ style: BorderStyle.Solid, width: 1, color: Color.White, radius: 15 })//边框
          .padding({ left: 5, right: 5 })//内边距  
        Text('网络').opacityWhiteText(0.8, 12)
      }

      Text(`'减更多'指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理`)
        .opacityWhiteText(0.6)
      Text('浙ICP备0000000号-36D')
        .opacityWhiteText(0.4)
        .margin({ bottom: 35 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.welcome_page_background'))
  }
}

 

逻辑业务设计

持续化保存：&&用户首选项&&

进入欢迎页面-->加载首选项-->是否同意

-->若同意，进入页面

- -->若不同意，弹出用户协议(自定义弹窗)-->是否同意

-->同意，保存首选项进入页面

-->不同意，退出app

自定义弹窗

弹窗功能，点击同意进入app并关闭弹窗，点击不同意退出app并关闭弹窗

@preview//令其可预览，便于组件的编写
@CustomDialog
export default struct UserPrivacyDialog {
  controller: CustomDialogController
  confirm: () => void//两个函数只定义，不必实现，用到时可再进行实现
  cancel: () => void
  build() {
    Column({space: CommonConstants.SPACE_10}){
      // 1.标题
      Text($r('app.string.user_privacy_title'))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      // 2.内容
      Text($r('app.string.user_privacy_content'))
      // 3.按钮
      Button($r('app.string.agree_label'))//同意按钮
        .width(150)
        .backgroundColor($r('app.color.primary_color'))
        .onClick(() => {
          this.confirm()
          this.controller.close()//关闭窗口
        })
      Button($r('app.string.refuse_label'))//不同意按钮
        .width(150)
        .backgroundColor($r('app.color.lightest_primary_color'))
        .fontColor($r('app.color.light_gray'))
        .onClick(() => {
          this.cancel()
          this.controller.close()//关闭窗口
        })

    }
    .width('100%')
    .padding(10)
  }
}

 

实现弹窗

初始化弹窗

controller: CustomDialogController = new CustomDialogController({
  builder: UserPrivacyDialog({
    confirm: () => this.onConfirm(),
    cancel: () => this.exitApp()
  })
})

点击同意执行的方法

onConfirm(){
  // 1.保存首选项
  PreferenceUtil.putPreferenceValue(PREF_KEY, true)//
  // 2.跳转到首页
  this.jumpToIndex()
}

点击不同意执行的方法

exitApp(){
  // 退出APP
  this.context.terminateSelf()
}

弹框ui功能基本实现，接下来要对弹框出现设置条件，由于弹框，一般必须在欢迎页面出现，最好在执行build之前完成判断，所以判断环节最好在aboutToAppear中实现

async aboutToAppear(){
  // 1.加载首选项
  let isAgree = await PreferenceUtil.getPreferenceValue(PREF_KEY, false)
  // 2.判断是否同意
  if(isAgree){
    // 2.1.同意，跳转首页
    this.jumpToIndex()
  }else{
    // 2.2.不同意，弹窗
    this.controller.open()
  }
}