（4）饮食记录

 1.首页UI设计

//设置饮食页面布局
import SearchHeader from './SearchHeader'
// @Preview
@Component
export default struct RecordIndex {
  build() {
    Column(){
      // 1.头部搜索栏
      SearchHeader()
      // 2.统计卡片
      Text('统计卡片')
      // 3.记录列表
      Text('记录列表')
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.index_page_background'))//设置背景色
  }
}

顶部搜索栏

@Component
export default struct SearchHeader{//做一个导出
  build() {
    Row(){
      Search({placeholder:'搜索饮食或运动信息'})//搜素提示
        .textFont({size:18})//字体样式修改
      Image($r('app.media.ic_public_email'))
        .width(20)
    }
  }
}

 

加上邮件

邮件的角标

Badge({ count: 1, position: BadgePosition.RightTop, style: { fontSize: 12 } }){
      Image($r('app.media.ic_public_email'))
        .width(24)
    }

2.饮食记录-统计卡片

（1）设置布局

1.设置日期

 Row() {
        Text('2024/01/25')
          .fontColor($r('app.color.secondary_color'))
        Image($r('app.media.ic_public_spinner'))
          .width(20)
          .fillColor($r('app.color.secondary_color'))
      }
      .padding(CommonConstants.SPACE_8) //内边距

2.设置时间 

import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
export default struct DatePickDialog {
  controller: CustomDialogController
  selectedDate: Date = new Date()//初始化值
  build() {
    Column({space: CommonConstants.SPACE_12}){//间距
      // 1.日期选择器
      DatePicker({
        start: new Date('2020-01-01'),//指定选择器的起始时间
        end: new Date(),//结束时间
        selected: this.selectedDate//设置选择项的日期
      })//选择日期是触发该事件
        .onChange((value: DatePickerResult) => {//事件
          //选中日期的年，选中日期的月（0~11），日
          this.selectedDate.setFullYear(value.year, value.month, value.day)
        })
      // 2.按钮
      Row({space:CommonConstants.SPACE_12}){
        Button('取消')
          .width(120)//宽度
          .backgroundColor($r('app.color.light_gray'))//亲灰色
          .onClick(() => this.controller.close())//关闭窗口
        Button('确定')
          .width(120)
          .backgroundColor($r('app.color.primary_color'))//主色调，绿色
          .onClick(() => {//点击
            // 1.保存日期到全局存储，在任何地方都能看到
            AppStorage.SetOrCreate('selectedDate', this.selectedDate.getTime())//不存日期，存毫秒
            // 2.关闭窗口
            this.controller.close()
          })
      }
    }
    .padding(CommonConstants.SPACE_12)
  }
}

3.统计信息

// 2.统计信息
      Swiper() { //新组件，可滑动
        Text('hello')
          .width('98%')
          .height(160)
          // .backgroundColor(0xAFEEEE)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('world')
          .width('98%')
          .height(160)
          .backgroundColor(0xAFEEEE)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.DEFAULT_18)//圆角
      .indicatorStyle({selectedColor:$r('app.color.primary_color')})//被选中后的颜色
    }

4.热量统计

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct CalorieStats {
  build() {
    Row() {
      Column({ space: CommonConstants.SPACE_6 }) {
        Text('饮食摄入')
          .fontColor($r('app.color.gray'))
          .fontWeight(CommonConstants.FONT_WEIGHT_600)
        Text('190')
          .fontSize(20)
          .fontWeight(CommonConstants.FONT_WEIGHT_700)
      }
      Column() {
        Text('还可以吃')
          .fontColor($r('app.color.gray'))
          .fontWeight(CommonConstants.FONT_WEIGHT_600)
        Text('1384')
          .fontSize(20)
          .fontWeight(CommonConstants.FONT_WEIGHT_600)
        Text('推荐1692')
          .fontSize(12)
          .fontColor($r('app.color.light_gray'))
      }
      Column({ space: CommonConstants.SPACE_6 }) {
        Text('运动消耗')
          .fontColor($r('app.color.gray'))
          .fontWeight(CommonConstants.FONT_WEIGHT_600)
        Text('231')
          .fontSize(20)
          .fontWeight(CommonConstants.FONT_WEIGHT_700)
      }
      }
      .width('100%')
    //调整布局
    .justifyContent(FlexAlign.SpaceEvenly)//布局模式，均匀分配
    .padding({top: 30, bottom: 35})//上边距30.，下边距35
    }
  }

优化代码后： 

intake:number=192//摄入
  expend: number=150//消耗
  recommend: number = CommonConstants.RECOMMEND_CALORIE//推荐值，推荐热量
  //封装成函数
  remainCalorie(){
    return this.recommend - this.intake + this.expend
  }

  build() {
    Row() {
      // 1.饮食摄入
      this.StatsBuilder('饮食摄入',this.intake)
      // 2.还可以吃
      this.StatsBuilder('还可以吃',this.remainCalorie(),`推荐${this.recommend}`)
      // 3.运动消耗
      this.StatsBuilder( '运动消耗',this.expend)

5.加上进度条圆环

Stack() {
          // 2.1.进度条
          Progress({
            value: this.intake,//进度当前，已经吃了多少
            total: this.recommend,//推进你的
            type: ProgressType.Ring//样式，环形
          })
            .width(120)//宽度
            .style({ strokeWidth: CommonConstants.DEFAULT_10 })//粗铣，
            .color($r('app.color.primary_color'))//颜色，用主色调
          //2.2统计数据
          this.StatsBuilder('还可以吃', this.remainCalorie(), `推荐${this.recommend}`)
        }

6.营养素统计

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct CalorieStats {
  carbon: number =26
  protein: number =9
  fat: number=7

  recommendCarbon: number = CommonConstants.RECOMMEND_CARBON //推荐碳水
  recommendProtein: number = CommonConstants.RECOMMEND_PROTEIN //蛋白质
  recommendFat: number = CommonConstants.RECOMMEND_FAT //脂肪

  build() {
    Row() {
      // 1.饮食摄入
      this.StatsBuilder(
        '碳水化合物',
        this.carbon,
        this.recommendCarbon,
        $r('app.color.carbon_color')
      )
      this.StatsBuilder(
        '蛋白质',
        this.protein,
        this.recommendProtein,
        $r('app.color.protein_color')
      )
      this.StatsBuilder(
        '脂肪',
         this.fat,
         this.recommendFat,
        $r('app.color.fat_color')
      )
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    .padding({ top: 30, bottom: 35 })
  }

  //抽取函数，接收参数（文字说明，数字，补充说明）
  @Builder StatsBuilder(label: string, value: number,recommend: number, color: ResourceStr){
    Column({space: CommonConstants.SPACE_6}){
      Stack() { //环
        Progress({
          value: value,
          total: recommend, //推荐值
          type: ProgressType.Ring
        })
          .width(95)
          .style({ strokeWidth: CommonConstants.DEFAULT_6 }) //粗细
          .color(color)
        Column({space:CommonConstants.SPACE_6}) { //间距
          Text('摄入推荐')
            .fontSize(12)
            .fontColor($r('app.color.gray'))
          Text(`${value.toFixed(0)}/${recommend.toFixed(0)}`)
            .fontSize(18)
            .fontWeight(CommonConstants.FONT_WEIGHT_600)
        }
      }
      Text(`${label}（克）`)
        .fontSize(12)
        .fontColor($r('app.color.light_gray'))
      }
  }
}

3.饮食记录-记录列表 

1.分组的标题

@Extend(Text) function grayText(){
  .fontSize(14)
  .fontColor($r('app.color.light_gray'))
}
@Component
export default struct RecordList {
  build(){
    List(){
      ForEach([1,2,3,4,5],(item)=>{//假数组
      ListItem(){
        Column(){//卡片
          //1.分组的标题
          Row({space: CommonConstants.SPACE_4}){//间距
            Image($r('app.media.ic_breakfast')).width(24)
            Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
            Text('建议423-592千卡').grayText()//抽取
            Blank()
            Text('190').fontSize(14).fontColor($r('app.color.primary_color'))
            Text('千卡').grayText()
            Image($r('app.media.ic_public_add_norm_filled'))
              .width(20)
              .fillColor($r('app.color.primary_color'))
          }.width('100%')
          //2.组内记录列表
        }
        .width('100')
        .backgroundColor(Color.White)
        .borderRadius(CommonConstants.DEFAULT_18)
        .padding(CommonConstants.SPACE_12)//内边距
      }
      })
    }
    .width(CommonConstants.THOUSANDTH_940)
  }
}

2.组内记录列表

import { CommonConstants } from '../../common/constants/CommonConstants'
//抽取样式
@Extend(Text) function grayText(){
  .fontSize(14)
  .fontColor($r('app.color.light_gray'))
}
@Component
export default struct RecordList {
  build(){
    List(){
      ForEach([1,2,3,4,5],(item)=> { //假数组
        ListItem() {
          Column() { //卡片
            //1.分组的标题
            Row({ space: CommonConstants.SPACE_4 }) { //间距
              Image($r('app.media.ic_breakfast')).width(24)
              Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
              Text('建议423-592千卡').grayText() //抽取
              Blank()
              Text('190').fontSize(14).fontColor($r('app.color.primary_color'))
              Text('千卡').grayText()
              Image($r('app.media.ic_public_add_norm_filled'))
                .width(20)
                .fillColor($r('app.color.primary_color'))
            }.width('100%')
            //2.组内记录列表
            List() {
              ForEach([1,2],(item)=> {
                ListItem(){
                  Row({ space: CommonConstants.SPACE_6 }) {
                    Image($r('app.media.toast')).width(50)
                    Column({ space: CommonConstants.SPACE_4 }) {
                      Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
                      Text(`1片`).grayText()
                    }
                    Blank()
                    Text('91千卡').grayText()
                  }
                  .width('100%')
                  .padding(CommonConstants.SPACE_6)
                }.swipeAction({end: this.deleteButton.bind(this)})//使用它
              })
            }
            .width('100%')
          }
        .width('100%')
        .backgroundColor(Color.White)
        .borderRadius(CommonConstants.DEFAULT_18)
        .padding(CommonConstants.SPACE_12)//内边距
      }
      })
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')//内部的高度
    .margin({top: 10})
  }
  //删除按钮
  @Builder deleteButton(){
    Image($r('app.media.ic_public_delete_filled'))
      .width(20)
      .fillColor(Color.Red)
      .margin(5)//间距
  }
}

总结：全图展示：