首页 > 编程语言 >实战案例-饮食记录-统计卡片（源于黑马程序员）

实战案例-饮食记录-统计卡片（源于黑马程序员）

时间：2024-06-19 18:00:47浏览次数：13  
标签：卡片 color Text app CommonConstants number 程序员 日期 黑马

 StatsCard（统计卡片页面）：仅有日期卡片页面

import { CommonConstants } from '../../common/constants/CommonConstants'
import DateUtil from '../../common/utils/DateUtil'
import CalorieStats from './CalorieStats'
import DatePickDialog from'./DatePickDialog'
import NutrientStats from './NutrientStats'
@Component
export default struct StatsCard {//统计卡片页面
  //Prop:单向绑定；Link：双向绑定
  //DateUtil.beginTimeOfDay(new Date()):初始化，获取这一天的开始日期，并返回开始日期的毫秒值
  @StorageProp('selectedDate') selectedDate:number = DateUtil.beginTimeOfDay(new Date())

  controller:CustomDialogController=new CustomDialogController({
    //日期回显，并返回日期类型
    builder:DatePickDialog({selectedDate:new Date(this.selectedDate)})
  })
  build() {
    Column(){//从上至下布局
      //1.日期信息
      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.统计信息

    }
    .width(CommonConstants.THOUSANDTH_940)
    .backgroundColor($r('app.color.stats_title_bgc'))//日期卡片的背景色
    .borderRadius(CommonConstants.DEFAULT_18)//卡片边框弧度
  }
}

RecordIndex页面（饮食记录页面）：

//在页面顶部导入StatsCard
import StatsCard from './StatsCard'

       //2.统计卡片
      StatsCard()

DatePickDialog页面（日期选择弹窗）：

import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
export default struct DatePickDialog {//日期选择弹窗组件
  controller:CustomDialogController
  selectedDate:Date = new Date()
  build() {
    Column(){
      //1.日期选择器
      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)
        })
      //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：整个应用的内部存储（不需导入）
            //不存日期date对象：状态变量监控会出现错误（存毫秒值getTime()，可以与日期任意转换，其为number类型）
            AppStorage.SetOrCreate('selectedDate',this.selectedDate.getTime())
            //2.关闭窗口
            this.controller.close()
          })
      }
    }
  }
}

运行结果（日期选择器）：点击日期卡片的下三角会出现选择日期的弹窗

 DatePicker组件（属性图）：日期选择器组件，根据指定日期范围创建日期滑动选择器。（可在API中搜索此组件）

 StatsCard（统计卡片页面）：

import { CommonConstants } from '../../common/constants/CommonConstants'
import DateUtil from '../../common/utils/DateUtil'
import CalorieStats from './CalorieStats'
import DatePickDialog from'./DatePickDialog'
import NutrientStats from './NutrientStats'
@Component
export default struct StatsCard {//统计卡片页面
  //Prop:单向绑定；Link：双向绑定
  //DateUtil.beginTimeOfDay(new Date()):初始化，获取这一天的开始日期，并返回开始日期的毫秒值
  @StorageProp('selectedDate') selectedDate:number = DateUtil.beginTimeOfDay(new Date())

  controller:CustomDialogController=new CustomDialogController({
    //日期回显，并返回日期类型
    builder:DatePickDialog({selectedDate:new Date(this.selectedDate)})
  })
  build() {
    Column(){//从上至下布局
      //1.日期信息
      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()
        /*Text('Hello')
          .width('90%')
          .height(160)
          .backgroundColor(0xAFEEEE)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('World')
          .width('90%')
          .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')})
    }
    .width(CommonConstants.THOUSANDTH_940)
    .backgroundColor($r('app.color.stats_title_bgc'))//日期卡片的背景色
    .borderRadius(CommonConstants.DEFAULT_18)//卡片边框弧度
  }
}

CalorieStats页面（热量统计）：

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
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(120)//环的大小
          .style({strokeWidth:CommonConstants.DEFAULT_10})//环的粗细
          .color($r('app.color.primary_color'))//环的颜色
        //2.2 统计数据
        this.StatsBuilder('还可以吃',this.remainCalorie(),`推荐${this.recommend}`)
      }
      //3.运动消耗
      this.StatsBuilder('运动消耗',this.expend)
      /*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({space:CommonConstants.SPACE_6}){
        Text('还可以吃')
          .fontColor($r('app.color.gray'))
          .fontWeight(CommonConstants.FONT_WEIGHT_600)
        Text('1348')
          .fontSize(20)
          .fontWeight(CommonConstants.FONT_WEIGHT_700)
        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})//调整上下内边距

  }

  //提取公共部分（优化代码）并接受传递的参数label，value，tips（可不传）
  @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('推荐1692')
          .fontSize(12)
          .fontColor($r('app.color.light_gray'))
      }
    }
  }
}

运行结果（热量统计页面）：

NutrientStats页面（营养素统计）：

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct NutrientStats{//营养素统计
  carbon:number=23//碳水值
  protein:number=9//蛋白质值
  fat:number=7//脂肪值

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

  build() {
    Row({space:CommonConstants.SPACE_6}){
      //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:ResourceColor){
    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'))
    }
  }
}

运行结果 （营养素统计页面）：

标签：卡片,color,Text,app,CommonConstants,number,程序员,日期,黑马
From： https://blog.csdn.net/m0_74186415/article/details/139755094

相关文章

  • 如何成为强大的程序员？（转载）
    如何成为强大的程序员？（转载）AaronStannard是新创公司MarkedUp的CEO，他最近花费大量时间雇佣、评估很多不同的程序员，并和他们一起协作。在这个过程中他发现并总结了十种程序员无法意识到自己潜力的原因，意在让更多程序员发掘出自己的潜力，从而成为强大的程序员。Aaron提到，他......
  • 天才程序员周弈帆 | Stable Diffusion 解读（三）：原版实现源码解读(篇幅略长，建议收藏！)
    本文来源公众号“天才程序员周弈帆”，仅用于学术分享，侵权删，干货满满。原文链接：StableDiffusion解读（三）：原版实现源码解读天才程序员周弈帆|StableDiffusion解读（一）：回顾早期工作-CSDN博客天才程序员周弈帆|StableDiffusion解读（二）：论文精读-CSDN博客看完了StableDiffus......
  • CSS动画（个人资料卡片）
    1.整体效果https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa63Oz8IaRI51Mw7mY02LHmnpXicG4icA3ERN1MVszMdNafsgV3xaVHLhMA6avquSJux4CLV8uggtfbw/640?wx_fmt=gif&from=appmsg&wxfrom=13今天呈现的不仅是一个个人介绍界面，而是一次交互式的视觉体验。精心编排的HTML与CSS......
  • 程序员做电子书产品变现的复盘（6）
    经过一段时间的努力，我的开发者账号下已经成功上架了超过60个电子书APP。这些APP的用户群体相似，都是热爱阅读的读者。在一个国庆长假期间，我终于下定决心，将大多数流量表现不错的APP进行了一次集中的版本更新（这真是一项非常累人的事）。我悄悄地在这次更新中加入了一个互推模块，使......
  • 从11个视角看全球Rust程序员2/4：深度解读JetBrains最新报告
    讲动人的故事，写懂人的代码5Rust代码最常使用什么协议与其他代码交互？RESTAPI：2022年：51%2023年：51%看上去RESTAPI的使用比例挺稳定的，没啥变化。语言互操作性（LanguageInterop）：2022年：53%2023年：43%语言互操作性的比例在2023年下来了一些，掉了10个百分点。远......
  • 从11个视角看全球Rust程序员1/4：深度解读JetBrains最新报告
    讲动人的故事，写懂人的代码五个月前，编程界的大佬JetBrains发布了他们的全球开发者年度报告。小吾从这份报告中找出了下面11个关于全球程序员如何使用Rust的有趣的趋势，让你学习和使用Rust更轻松。1这两年有多少程序员在工作中使用了Rust?2全球程序员使用Rust有多久了？3......
  • 最好用的导流私域方式 | 小红书跳转卡片
    嗨，大家好！这里是方圆，今天特别兴奋地要和大家分享一项超级棒的导流技术——小红书跳转卡片！相信小红书的忠实用户都知道，想要把我们那庞大的粉丝群体引导到私域，进而提供更精准、更有价值的内容，是一件多么重要的事情。但小红书那套严格的违规检测机制，确实让不少人头疼不已。别担心，......
  • 专业程序员进阶之路：认识设计
    专业程序员进阶之路：认识设计设计是什么设计就是构思一套方案，将软件规格说明书的要求转变为可运行的软件的过程。设计将需求和编码连接在一起。设计有时候可能不是一项明确的活动，但是在项目过程中一直都存在，只是设计进行的程度或深或浅。大型项目可能有特定的正式设计阶段，由专......
  • “调包侠”时代已经过去：普通程序员应如何应对新时代的挑战？
    ......
  • 程序员修炼之道：从小工到专家阅读笔记02
    做程序要及时亡羊补牢修复，这意味着在编程过程中，我们需要时刻关注代码的质量，一旦发现潜在的问题或错误，立即进行修复。遵循编码规范和风格指南，编写易于维护和阅读的代码。这样可以降低出错的可能性，并在出现问题时更容易进行修复。在发现问题时，及时与团队成员沟通，分享自己的发现和解......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99