harmonyos 黑马课程学习记录2-健康生活项目

项目概览：

主页面：

代码实现：

1：主页面整体代码

import { ColumnType } from '../common/bean/ColumnInfo'
import { CommonConstants } from '../common/constants/CommonConstants'
import RecordIndex from '../view/record/RecordIndex'
@Extend(Text) function  opacityWhiteText(opacity:number,fontSide:number=10){
  .fontSize(fontSide)
  .opacity(opacity).fontColor(Color.White)
}

@Entry
@Component
struct Index {
  //切换变量脚标
  @State currentIndex:number = 0


  //自定义样式,对相应的按钮和图片进行编号，方便操作
  @Builder TabBarBuilder(tittle:Resource,image:Resource,index:number){
Column({space:CommonConstants.SPACE_8}){
Image(image)
  .width(20)
  .fillColor(this.selectColor(index))//适用于图片
  Text(tittle)
    .fontSize(15)
    .fontColor(this.selectColor(index))
}
  }
//对颜色切换进行封装，前面是有y，后边是n
selectColor(index:number){
  return this.currentIndex === index?$r('app.color.primary_color') : $r('app.color.gray')
}
  build() {
    //Tabs组件可以让页面内视图快速切换，包含tabBar（标题）和tabContent（内容）两部分
    Tabs({barPosition:BarPosition.End}){//bar的位置
      TabContent(){
        RecordIndex()
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))

      TabContent(){
        Text('发现页面')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_discover'),$r('app.media.discover'),1))

      TabContent(){
        Text('我的主页')
      }
      .tabBar(this.TabBarBuilder($r('app.string.tab_user'),$r('app.media.ic_user_portrait'),2))

    }
.width('100%')
    .height('100%')
    //脚标赋值
    .onChange(index  => this.currentIndex = index)
  }
}

2:”记录“页面代码

import RecordList from './RecordList'
import SearchHeader from './SearchHeader'
import statsCard from './StatsCard'
@Preview
@Component
export default  struct RecordIndex{
  build(){
   Column(){
     //头部搜索栏
     SearchHeader()
     //统计卡片
     statsCard()
     //记录列表
     RecordList()
       .layoutWeight(1)
   }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.index_page_background'))
  }
}

3：头部搜索栏

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default  struct SearchHeader {
  build() {
    //横向布局
    Row({space:CommonConstants.SPACE_10}){
      //头部搜索框，带搜索图标的固定方法
      Search({placeholder:'搜索饮食或运动信息'})
        .textFont({size:16})
        //占据的剩余空间的比例
        .layoutWeight(1)

      //邮箱上的数字显示，容器性组件，count（显示的数字）,
      Badge({count:8,position:BadgePosition.RightTop,style:{fontSize:10}}){
        Image($r('app.media.ic_public_email'))
          .width(25)
      }
    }
    //宽度占比
    .width(CommonConstants.THOUSANDTH_940)
  }
}

4：统计卡片

import { CommonConstants } from '../../common/constants/CommonConstants'
import DateUtil from '../../common/utils/DateUtil'
import CalorieStates from './CalorieStates'
import DatePicDialog from './DatePicDialog'
import NutrientStates from './NutrientStates'
@Preview
@Component
export default  struct statsCard {
  //读取日期Prop单向，link双向
  //获取当前日期
  @StorageProp('selectedDate') selectedDate:number = DateUtil.beginTimeOfDay(new Date())
  controller:CustomDialogController = new CustomDialogController({
    //传进去日期
    builder: DatePicDialog({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_10)
      .onClick(()=>{
        this.controller.open()
      })
      //统计信息
      //可滑动组件，滑块视图容器，提供子组件滑动轮播显示的能力。
      Swiper(){
        //热量组件
        CalorieStates()
        //营养素组件
        NutrientStates()

      }
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.DEFAULT_16)
      //穿梭框选项
.indicatorStyle({selectedColor:$r('app.color.primary_color')})

    }
    .width(CommonConstants.THOUSANDTH_940)
    .backgroundColor($r('app.color.stats_title_bgc'))
    //圆角
  .borderRadius(CommonConstants.DEFAULT_16)
  }
}

4.1：热量组件

import { CommonConstants } from '../../common/constants/CommonConstants'

@Component
export default struct CalorieStates {
  intake: number =192 //摄入
  expend: number = 150 //消耗
  recommend: number = CommonConstants.RECOMMEND_CALORIE //推荐

  //封装还可以吃的热量
  remainCalorie() {
    return this.recommend - this.intake + this.expend
  }

  build() {

    Row({ space: CommonConstants.SPACE_8 }) {
      //饮食摄入
      this.StatsBuilder('饮食摄入', this.intake)

      //还可以吃
      //进度条，层叠关系，Stack容器
      Stack(){
        //进度条
        Progress({
          value : this.intake,
          total:this.recommend,
          type:ProgressType.Ring//环形进度条
        })
          .width(130)
          .style({strokeWidth:CommonConstants.DEFAULT_8})//环形的粗细
          .color($r('app.color.primary_color'))
        //统计数据
        this.StatsBuilder('还可以吃', this.remainCalorie(), `推荐摄入${this.recommend}`)
      }
      //运动消耗
      this.StatsBuilder('运动消耗', this.expend)

    }
    .width('100%')
    //均匀分配空间
    .justifyContent(FlexAlign.SpaceEvenly)
    .padding({ top: 30, bottom: 40 })
  }
  //封装数据
  //从上到下，三项数据,第三项不确定，加个判断;？：while
  @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'))

      }
    }
  }
}

4.2：营养素组件

import { CommonConstants } from '../../common/constants/CommonConstants'

@Component
export default struct NutrientStates {
  //原始数据和推荐数据
  carbon: number = 22
  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 }) {
      //碳水
      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: 40 })
  }

  //封装数据
  //从上到下，三项数据,第三项不确定，加个判断;？：while
  @Builder StatsBuilder(label: string, value: number, recommend: number, color: Resource) {
    Column({ space: CommonConstants.SPACE_6 }) {
      //环
      Stack() {
        Progress({
          value: value,
          total: recommend,
          type: ProgressType.Ring //环形进度条
        })
          .width(100)
          .style({ strokeWidth: CommonConstants.DEFAULT_8 }) //环形的粗细
          .color(color)
        Column() {
          //环形里面的数据
          Text('摄入推荐')
            .fontSize(14)
            .fontColor($r('app.color.light_gray'))

          //数字转整形
          Text(`${value.toFixed(0)}/${recommend.toFixed(0)}`)
            .fontSize(20)
            .fontWeight(CommonConstants.FONT_WEIGHT_700)

        }
      }

      //环形底部字体
      Text(`${label}(克)`)
        .fontSize(15)
        .fontColor($r('app.color.light_gray'))

    }
  }
}

*注：引用的颜色，图标等文件均来自黑马资料