基于鸿蒙操作———制作健康App(实现记录卡片)

君莫笑几人回

已于 2024-06-27 12:14:32 修改

阅读量543

点赞数 15

文章标签：鸿蒙 html jquery

于 2024-06-14 11:35:33 首次发布

本文链接：https://blog.csdn.net/qq_65992643/article/details/139676138

版权

前言

实现记录卡片是根据Swiper组件实现卡牌左右滑动状态，创建实现模块，然后通过调用不同的业务类以及工具类实现相应的效果

效果展示

项目代码实现

界面一实现

代码

// 菜单项
 //2.统计信息
      Swiper(){

        // 2，1 热量统计
        CalorieStats()
        // 2.2营养素统计
        NutrientStats()
      }
      .width('100%')
      .backgroundColor(Color.White)
      //圆角
      .borderRadius(CommonConstants.DEFAULT_18)
      // 穿梭框样式
      .indicatorStyle({selectedColor:$r('app.color.primary_color')})


// 实现类2.1热量统计类
 import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct CalorieStats {
  intake:number = 172
  // 消耗量
  expend:number = 130
  // 推荐量
  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,
          // 创建进度条的类型  ring是环形，line是线性
          type:ProgressType.Ring
        })
          .width(120)
          // 里面属性调整环的粗细
          .style({strokeWidth:CommonConstants.DEFAULT_10})
          .color($r('app.color.primary_color'))
        // 2.2统计数据


        //直接进行调用还可食用函数
        this.StatsBuilder('还可食用',this.remainCalorie(),`推荐摄入${this.recommend}`)
      }


      this.StatsBuilder('运动消耗',this.expend)
    }
    .width('100%')
    // 使得三个text均匀分布
    .justifyContent(FlexAlign.SpaceEvenly)
    .padding({top:30,bottom:35})
  }

  // 做列的抽取成新的函数,tips后面的?:指的是可以不传,文字说明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){
        Text(tips)
          .fontSize(12)
          .fontColor($r('app.color.light_gray'))
      }
    }
  }


}

小结

（1）代码主要是通过采用swiper来定义菜单项的项目，实现滑动切换的效果；

（2）在实现类中通过定义“摄入量”，“消耗量”而后计算出“推荐量”（单独通过代码块划分出来成为独立的函数便于调用）；

（3）因为在主函数体中三种类型格式都是基本一样的，所以采用了创建@Builder修饰符的方式，对相应的内容进行了抽取成新的函数；

（4）抽取的函数参数解释：文字说明label，数字value：代表的是数据流对象，tips补充说明可有可无，加判断；

（5）在进行预览后发现三个文字之间紧挨在一起没有进行平铺，通过column中的.justifyContent(FlexAlign.SpaceEvenly)与.padding({top:30,bottom:35})属性来进行添加

界面二实现

代码

 //2.菜单项
      Swiper(){

        // 2，1 热量统计
        CalorieStats()
        // 2.2营养素统计
        NutrientStats()
      }
      .width('100%')
      .backgroundColor(Color.White)
      //圆角
      .borderRadius(CommonConstants.DEFAULT_18)
      // 穿梭框样式
      .indicatorStyle({selectedColor:$r('app.color.primary_color')})


// 创建界面二的实体类
import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct NutrientStats {

  // 碳水化合物
  carbon:number = 23
  // 蛋白质
  protein:number = 10
  // 脂肪
  fat:number = 8

  // 创建推荐值,通过上面的消耗量以及摄取量来得出最后的推荐量
   // 推荐的碳水
  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'))
      // 2.推荐摄入蛋白质
      this.StatsBuilder(
        '蛋白质',
        this.protein,
        this.recommendProtein,
        $r('app.color.protein_color'))
      // 3.推荐摄入脂肪
      this.StatsBuilder(
        '脂肪',
        this.fat,
        this.recommendFat,
        $r('app.color.fat_color'))
    }
    .width('100%')
    // 使得三个text均匀分布
    .justifyContent(FlexAlign.SpaceEvenly)
    .padding({top:30,bottom:35})
  }

  // 做列的抽取成新的函数,tips后面的?:指的是可以不传,文字说明label，数字value：代表的是数据流对象，tips补充说明可有可无，加判断
  @Builder StatsBuilder(label:string,value:number,recommend:number,color:Resource){
    Column({space:CommonConstants.SPACE_6}){
      Stack(){
        // 2.1进度条
        Progress({
          value:value,
          total:recommend,
          // 创建进度条的类型  ring是环形，line是线性
          type:ProgressType.Ring
        })
          .width(95)
            // 里面属性调整环的粗细
          .style({strokeWidth:CommonConstants.DEFAULT_6})
          .color(color)
        // 可以直接在column内设置间距
        Column({space:CommonConstants.SPACE_6}){
          Text('摄入推荐')
            .fontSize(12)
            .fontColor($r('app.color.gray'))
          Text( `${value.toFixed(0)}/${recommend.toFixed(0)}`)
            .fontSize(20)
            .fontWeight(CommonConstants.FONT_WEIGHT_700)
        }
        .justifyContent(FlexAlign.Center)
      }
      // 设置环外文字元素
      Text(`${ label }(克)`)
        .fontSize(12)
        .fontColor($r('app.color.light_gray'))

    }
  }


}

小结

代码主要是通过采用swiper来定义菜单项的项目，实现滑动切换的效果，与上面界面一创建的基本是相似的类型使用。

知识归纳

1.了解使用Swiper组件的用法，以及.indicatorStyle属性对穿梭框颜色的控制；

2..borderRadius属性可以直接定义圆角的参数无需在border{()}内进行定义；

3.了解使用进度条的创建，通过“Stack(){Progress({type:ProgressType.Ring}}”中的type参数来定义进度条的形状ring是环形，linear是线形。