首页Tabs+饮食记录

首先是头部搜索：

Row({space:CommonConstants.SPACE_6}){//搜索栏
      Search({placeholder:'搜索饮食或运动信息'})
        .textFont({size:18})
        .layoutWeight(1)
      Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:14}}){//角标
        Image($r('app.media.ic_public_email'))
          .width(24)
      }
    }
    .width(CommonConstants.THOUSANDTH_940)

实现效果：

饮食卡片记录：

StatsCard 用来显示记录页面：

export default struct StatsCard {//统计卡片

  /*@StorageProp('selectedDate') selectedDate:number = DateUtil.beginTimeOfDay(new Date())

  controller:CustomDialogController=new CustomDialogController({
    builder:DatePickDialog({selectedDate:new Date(this.selectedDate)})
  })
  */
  build() {
    Column() {
      //1.日期
        Text('2024-06-20')
          .fontColor($r('app.color.secondary_color'))
      /*
      Row(){
      Text(DateUtil.formatDate(this.selectedDate)) //格式化
        .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)//内边距
      .onClick(()=>this.controller.open())
      * */
      //2.统计信息
      Swiper(){
        //2.1热量统计
        CalorieStats()
        //2.2营养素统计
        NutrientStats()

      }
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.DEFAULT_18)
      .indicatorStyle({selectedColor:$r('app.color.primary_color')})//穿梭框样式

    }
    .width(CommonConstants.THOUSANDTH_940)
    .backgroundColor($r('app.color.stats_title_bgc'))
    .borderRadius(CommonConstants.DEFAULT_18)//弧度
  }

}

实现效果：

其中热量和营养素的统计也分别实现：

export default struct CalorieStats {//热量
  intake:number = 192//摄入
  expend:number = 150//消耗
  recommend:number = CommonConstants.RECOMMEND_CALORIE//推荐

  remainCalorie(){
    return this.recommend - this.intake + this.expend
  }

  build() {
    Row({space:CommonConstants.SPACE_6}){
     //1.饮食摄入
      this.StatsBuilder('饮食摄入',this.intake)
      //2.还可以吃
      Stack(){//在外部，层叠关系
        //2.1进度条
        Progress({
          value:this.intake,
          total:this.recommend,
          type:ProgressType.Ring//环形
        })
          .width(135)
          .style({strokeWidth:CommonConstants.DEFAULT_10})
          .color($r('app.color.primary_color'))
        //2.2统计数据
        this.StatsBuilder('还可以吃',this.remainCalorie(),`推荐${this.recommend}`)
      }
      //3.运动消耗
      this.StatsBuilder('运动消耗',this.expend)
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    .padding({top:30,bottom:35})
  }

  @Builder StatsBuilder(label:string,value:number,tips?:string){
    Column({space:CommonConstants.SPACE_6}) {
      Text(label)
        .fontColor($r('app.color.gray'))
        .fontWeight(CommonConstants.FONT_WEIGHT_600)
      Text(value.toFixed(0))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      if (tips){//判断tips是否有值
        Text(tips)
          .fontSize(12)
          .fontColor($r('app.color.light_gray'))
      }
    }
  }
}

export default struct NutrientStats {//营养素统计

  carbon:number=23//碳水
  protein:number=9//蛋白质
  fat:number=7//脂肪

  recommendCaron: number = CommonConstants.RECOMMEND_CARBON
  recommendProtein: number = CommonConstants.RECOMMEND_PROTEIN
  recommendFat: number = CommonConstants.RECOMMEND_FAT

  build() {
    Row({space:CommonConstants.SPACE_6}){

      this.StatsBuilder(
        '碳水化合物',
        this.carbon,
        this.recommendCaron,$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(90)
          .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'))
        .fontWeight(CommonConstants.FONT_WEIGHT_600)
    }
  }

显示页面的实现：

export default struct RecordIndex {

  @StorageProp('selectedDate')
  selectedDate:number = DateUtil.beginTimeOfDay(new Date())
  build() {
    Column(){
      //1.头部搜索栏
      SearchHeader()//引用组件
      //2.统计卡片
      StatsCard()
      //3.记录列表
      RecordIndex()
        .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.index_page_background'))
  }
}