14. 实现数据持久化和页面交互

14.1 卡片变化修改

 @Consume @Watch('handleRecordsChange')records:RecordVO[]//儿子使用父亲那边的一定要和父亲那边提供的变量名一致
  @State info:StatsInfo=new StatsInfo()//监控到变更时构建出来
  handleRecordsChange(){
    //处理变更
    this.info=RecordService.calculateStatsInfo(this.records)
  }
  bui

 //2.统计信息
      Swiper() {
        //1.热量统计
         CalorieStats({intake:this.info.intake,expend:this.info.expend})

        //2.营养素统计
        NutrientStats({carbon:this.info.carbon,protein:this.info.protein,fat:this.info.fat})

      }

修改

CalorieStats()：

@Prop intake:number
@Prop expend:number

NutrientStats( ）：

@Prop carbon:number
@Prop protein:number
@Prop fat:number

14.2 饮食记录表修改

 @Consume @Watch('handleRecordsChange')records:RecordVO[]//儿子使用父亲那边的一定要和父亲那边提供的变量名一致
  @State groups:GroupInfo<RecordType,RecordVO>[]=[]//监控到变更时构建出来
  handleRecordsChange(){
    //处理变更
    this.groups=RecordService.calculateGroupInfo(this.records)
  }//把饮食记录分组统计变成GroupInfo格式

14.3 跳转页面

记录首页点击早餐会进入食物详细页需要知道跳转到哪一个组 

.onClick(()=>{
              router.pushUrl({
                url: 'pages/ItemIndex',
                params: {type: group.type}
              })
            })

进入以后可以取出跳转时传的信息定义一个生命周期钩子饮食列表页父亲告诉  

@Prop isFood:boolean

ItemList({ showPanel: this.onPanelShow.bind(this), isFood: this.isFood })

 onPageShow(){
    // 1.获取跳转时的参数
    let params: any = router.getParams()
    // 2.获取点击的饮食记录类型
    this.type = params.type
    this.isFood = this.type.id !== RecordTypeEnum.WORKOUT
  }

14.4 持久化保存

面板点击提交以后要对数据持久化报存

.onClick(() => {
                // 1.持久化保存
                RecordService.insert(this.type.id, this.item.id, this.amount)
                  .then(() => {
                    // 2.关闭弹窗
                    this.showPanel = false
                  })
              })

14.5 遇到问题

14.5.1 添加以后没有数据

一开始进入是触发aboutToAppear()，进行一次查询当点击点击跳转到另一个页面然后返回时组件不会触发aboutToAppear()。希望页面每次加载是都进行查询RecordIndex是一个组件并不是页面

没有页面显示的钩子首页有让Index通知利用状态变量

Index.ets

 @State isPageShow:boolean=false
  onPageShow(){
    this.isPageShow = true
  }
  onPageHide(){
    this.isPageShow = false
  }

RecordIndex.ets

  @Prop @Watch('handlePageShow') isPageShow: boolean
  handlePageShow(){
    if(this.isPageShow){
      this.aboutToAppear()
    }
  }

14.5.2 卡片总的地方不显示没更新

@Builder创建的Builder函数默认情况下传的只是值而不是引用导致了当这些值发生变化时不会触发重新渲染，需要变成引用

 CalorieStats.ets

this.statsBuilder({label: '饮食摄入', value: this.intake})

 @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))//转成一个string类型
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
         if($$.tips)
         {
           Text($$.tips)
             .fontSize(12)
             .fontColor($r('app.color.light_gray'))
         }
    }
  }

NutrientStats.ets 

this.statsBuilder({
  label: '碳水化合物',
  value: this.carbon,
  recommend: this.recommendCarbon,
  color: $r('app.color.carbon_color')
})

  @Builder statsBuilder($$:{label:string,value:number,recommend:number,color:ResourceStr}){
    Column({space:CommonConstants.SPACE_6}){
      Stack() {
        //2.1进度条
        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)}`) //转成一个string类型
            .fontSize(20)
            .fontWeight(CommonConstants.FONT_WEIGHT_700)
        }
      }
      Text(`${$$.label}（克）`)
        .fontSize(12)
        .fontColor($r('app.color.light_gray'))
    }
  }

ItemCard.ets

Row({ space: CommonConstants.SPACE_8 }) {
  this.NutrientInfo({label: '热量(千卡)', value: this.item.calorie})
  if(this.item.id<10000) {
    this.NutrientInfo({label: '碳水(千卡)', value: this.item.carbon})
    this.NutrientInfo({label: '蛋白质(千卡)', value: this.item.protein})
    this.NutrientInfo({label: '脂肪(千卡)', value: this.item.fat})
  }
}

 @Builder NutrientInfo($$:{label:string,value:number}){
    Column({space:CommonConstants.SPACE_8})
    {
      Text($$.label)
        .fontSize(14)
        .fontColor($r('app.color.light_gray'))
      Text(($$.value*this.amount).toFixed(1))//一位小数
        .fontSize(18)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
    }
  }