开发鸿蒙项目黑马健康APP的系列随笔

一、工作主要介绍

今天主要是对应用首页的数据统计界面进行设计，并对整个应用首页的进行一次整体的测试评估。

二、运行效果及主要设计思路的介绍

下面先展示最终的运行效果图:

由上面的运行效果不难看出，这里是采用了两个卡片堆叠在一起的方式，同时页面可以实现左右滑动分别用来向用户展示能量的推荐摄入值和已摄入值。主体框架上的布局还是行容器嵌套列容器，没有什么太大变化。

三、在设计过程中遇到的一些问题

（1）如何实现页面的叠加便于用户左右滑动查看的效果

关于这个问题，这里采用的是swiper组件，这个组件的添加和使用就可以很轻松的实现用户在浏览应用的过程中左右滑动浏览的效果，同时在编辑过程中还采用了stack重叠块用来详细显示标题、数据和进度条提升了用户的浏览体验，是相关数据变得一目了然。

（2）如何实现进度条的编辑

关于进度条的问题，这里采用的是progress进度条来显示相关数据，同时考虑到实际情况，这里我们分别对相关的数值进行了设置，同时对有些需要计算得出的数据设置了专门的计算函数来实现相关功能，进一步简化了代码，在细节方面还涉及到一些数值类型转换的问题，这里就不详细阐述了。

最终实践代码

第一个页面：

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct CalorieStats {
  intake:number=192
  expend:number=150
  recommend:number=CommonConstants.RECOMMEND_CALORIE
  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.recommend-this.intake+this.expend),`推荐${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){
        Text(tips)
          .fontSize(12)
          .fontColor($r('app.color.light_gray'))
      }
    }
  }
}

第二个页面：

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')
      )

      //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%')
    .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'))
    }
  }
}

五、总结

 通过此次实验我又学习到一个名叫swiper的新的UI组件，这个组件可以帮助我们实现相应的页面滑动效果，尤其是实现在局部容器中的页面滑动效果。同时我还了解到了stack重叠块，用来显示不同的页面数据，同时应用首页的预览效果很好，编辑开发工作到现在为止进展顺利。