鸿蒙实战案例-饮食记录-统计卡片

最新推荐文章于 2024-09-14 18:21:07 发布

2201_76010544

最新推荐文章于 2024-09-14 18:21:07 发布

阅读量427

点赞数 4

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/2201_76010544/article/details/139883784

版权

前言

在用户交互界面中日期和滑动界面是最为常见的，也是最容易与用户进行交互的，今天就让我们学习在鸿蒙中如何编写代码和运行预期效果。本篇文章我们来详细讲述如何制作鸿蒙实战案例-饮食记录-统计卡片，本文会讲述日期选择器和滑动弹窗的使用方法和运行代码，这也是统计卡片运行的重要代码。

一、系统框架和分析

在这里插入图片描述

二、代码实现

1.界面实现：

1.日期界面实现：

日期界面实现：
日期界面一个从上到下的布局，用Column（）容器进行编，column（）中包括两个部分，是日期和统计，日期中日期使用row（）进行编写。在读取时间时，使用StorageProp读取和初始化。

弹窗界面实现：
弹窗界面有两部分，是日期和按钮。日期部分使用日期选择器 DatePicker（）完成，需要定义selecteddate作为初始化值。按钮部分需要将日期保存到全局存储，使用AppStorage.SetOrCreate将日期保存。

DatePicker（）示例代码

 DatePicker({
        start: new Date('2020-01-01'),
        end: new Date(),
        selected: this.selectedDate
      })
        .onChange((value: DatePickerResult) => {
          this.selectedDate.setFullYear(value.year, value.month, value.day)
        })

AppStorage.SetOrCreate示例代码：

 AppStorage.SetOrCreate('selectedDate', this.selectedDate.getTime())

2.统计信息界面实现

统计界面实现：
这个部分需要通过Swiper(）组件进行编写，内容需要新建组件进行编写，根据需求，需要定义两个组件，分别是热量和营养组件。使用 @Builder进行化简，定义变量，其中第二个有三行，可以加一个判断，以此来判断数据是否输出。穿输时，需要定义变量，来用于使用。进度条，使用Stack()（重叠关系）进行文字和进度条的叠加， Progress组件为进度条，需要设置当前，最大，和形状，属性设置宽带，粗细。

Swiper(）示例代码：

   Swiper(){
        //热量
        reliangtongji2()
        //营养
        yingyangtongji2()

      }
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.DEFAULT_18)  //圆角
      .indicatorStyle({selectedColor:$r('app.color.primary_color')})//滑动框的样式

Stack()示例代码：

     Stack(){//重叠关系
        //进度条
        Progress({
          value:this.intake,//当前
          total:this.recommend,//最大
          type:ProgressType.Ring//环形进度条
        })
          .width(120)
          .style({strokeWidth:CommonConstants.DEFAULT_10})
          .color($r('app.color.primary_color'))
        //统计数据
        this.StatsBuilder({label: '还可以吃', value: this.remainCalorie(),tips: `推荐热量${this.recommend}`})
      }

2.总代码

xinxi2.ste

import { CommonConstants } from '../../common/constants/CommonConstants'
import DateUtil from '../../common/utils/DateUtil'
import reliangtongji2 from './reliangtongji2'
import tanchuang2 from './tanchuang2'
import yingyangtongji2 from './yingyangtongji2'


@Component
export default  struct xinxi2 {


  //读取时间
  @StorageProp('selectedDate') selectedDate: number = DateUtil.beginTimeOfDay(new Date())
  //时间初始化
  controller: CustomDialogController = new CustomDialogController({
    builder: tanchuang2 ({selectedDate: new Date(this.selectedDate)})
  })




  build(){
    Column(){

      //日期信息
      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())
      //统计

      Swiper(){
        //热量
        reliangtongji2()
        //营养
        yingyangtongji2()

      }
      .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)  //圆角
  }

}

tanchuang2.ets

import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
export default struct tanchuang2 {
  controller: CustomDialogController
  selectedDate: Date = new Date()
  build() {
    Column({space: CommonConstants.SPACE_12}){
      //日期选择
      DatePicker({
        start: new Date('2020-01-01'),
        end: new Date(),
        selected: this.selectedDate
      })
        .onChange((value: DatePickerResult) => {
          this.selectedDate.setFullYear(value.year, value.month, value.day)
        })

      //按钮
      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(() => {
            //保存(转成毫秒)
            AppStorage.SetOrCreate('selectedDate', this.selectedDate.getTime())
            //关闭
            this.controller.close()
          })
      }

    }
    .padding(CommonConstants.SPACE_12)
  }
}

reliangtongji2.ets

import { CommonConstants } from '../../common/constants/CommonConstants'
@Entry
@Component

export default  struct reliangtongji2 {
  //饮食摄入变量
  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}){

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

      //还可以吃
      Stack(){//重叠关系
        //进度条
        Progress({
          value:this.intake,//当前
          total:this.recommend,//最大
          type:ProgressType.Ring//环形进度条
        })
          .width(120)
          .style({strokeWidth:CommonConstants.DEFAULT_10})
          .color($r('app.color.primary_color'))
        //统计数据
        this.StatsBuilder({label: '还可以吃', value: this.remainCalorie(),tips: `推荐热量${this.recommend}`})
      }


      //运动消耗
      this.StatsBuilder({label: '运动消耗', value: 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))//小数点后0位
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
      if($$.tips){
        Text($$.tips)
          .fontSize(12)
          .fontColor($r('app.color.light_gray'))
      }
    }
  }

}

yingyangtongji2.ets

import { CommonConstants } from '../../common/constants/CommonConstants'
@Entry
@Component

export default  struct yingyangtongji2 {

  //碳水
  carbon: number=56
  //蛋白质
   protein: number=34
  //脂肪
   fat: number=42
  //推荐值
  recommendCarbon: number = CommonConstants.RECOMMEND_CARBON
  recommendProtein: number = CommonConstants.RECOMMEND_PROTEIN
  recommendFat: number = CommonConstants.RECOMMEND_FAT

  build(){

    Row({space:CommonConstants.SPACE_6}){

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

      //红环
      this.StatsBuilder({
        label: '蛋白质',
        value: this.protein,
        recommend: this.recommendProtein,
        color: $r('app.color.protein_color')
      })

      //黄环
      this.StatsBuilder({
        label: '脂肪',
        value: this.fat,
        recommend: this.recommendFat,
        color: $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'))
    }
  }
}