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

项目概览：

项目代码：

1.1：图片及显示参数

import { CommonConstants } from '../../common/constants/CommonConstants'
@Preview
@Component
export default struct ItemCard {
  //状态变量， prop不能初始化，跟随变化
  @Prop amount:number

  build() {
    Column({space:CommonConstants.SPACE_8}) {
      //图片
      Image($r('app.media.toast')).width(150)

      //名称
      Row() {
        Text('全麦土司').fontWeight(CommonConstants.FONT_WEIGHT_700)
      }
      .backgroundColor($r('app.color.lightest_primary_color'))
      .padding({top:5,bottom:5,left:12,right:12})

      //下划线，透明度0.6
      Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)

      //营养素
Row({space:CommonConstants.SPACE_8}){
  this.NutrientInfo('热量（千卡）',91.0)
  this.NutrientInfo('碳水（克）',15.5)
  this.NutrientInfo('热量（克）',4.4)
  this.NutrientInfo('热量（克）',1.3)
}
      Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)

      //片数
Row(){
  Column({space:CommonConstants.SPACE_4}){
    Text(this.amount.toFixed(1)).fontSize(50)
      .fontColor($r('app.color.primary_color'))
      .fontWeight(CommonConstants.FONT_WEIGHT_600)

    Divider().color($r('app.color.primary_color'))
  }
  .width(150)
  Text('片')
    .fontColor($r('app.color.gray'))
    .fontColor(CommonConstants.FONT_WEIGHT_600)
}
    }
  }

  @Builder NutrientInfo(label:string,value:number){
    Column({space:CommonConstants.SPACE_8}){
      Text(label).fontSize(15).fontColor($r('app.color.primary_color'))
      //小数点后几位为括号里面的数
      Text((value*this.amount).toFixed(1)).fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_500)
    }
  }

}

1.2：数字键盘 

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default  struct NumberKeyBord {
  numbers:string[] = ['1','2','3','4','5','6','7','8','9','0','.']

  //传递amount值，使用link双向绑定
  @Link amount:number
@Link value:string
  //键盘样式
  @Styles keyBordStyle(){
    .backgroundColor(Color.White)
    .height(50)
    .borderRadius(9)
  }
  build() {
    //容器型组件，构建网格
    Grid(){
      //内容
ForEach(this.numbers,num=>{
  GridItem(){
    Text(num).fontSize(20).fontWeight(CommonConstants.FONT_WEIGHT_900)
  }
  .keyBordStyle()
  //触发
  .onClick(()=>{
    this.clickNumber(num)
  })
})
      GridItem(){
        Text('删除').fontSize(20).fontWeight(CommonConstants.FONT_WEIGHT_900)
      }
      .keyBordStyle()
      //触发
      .onClick(()=>{
        this.clickDelete()
      })
    }

    .width('100%')
    .height(300)
    .backgroundColor($r('app.color.index_page_background'))
    //行数布局
    .columnsTemplate('1fr 1fr 1fr')
    //列间距
    .columnsGap(10)
    //行间距
    .rowsGap(10)
    //内间距
    .padding(10)
    .margin({top:15})
  }

  clickNumber(num:string){
    //拼接用户输入内容
    let val = this.value+num
    //判断格式
    let firstInfo  = val.indexOf('.')
    let lastInfo  = val.lastIndexOf('.')
    if(firstInfo!==lastInfo||(lastInfo!=-1&&lastInfo<val.length-2)){
      //非法
      return
    }
    //字符串转为数值
    let amount = this.parseFloat(val)
    //保存到amount value//上限判断
    if(amount>=999.9){
      this.amount = 999.9
      this.value = '999.9'
    }else {
      this.amount = amount
      this.value = val
    }
  }
  clickDelete(){
    if(this.value.length<=0){
      //如果都删没了
      this.value=''
      this.amount = 0
      return
    }
    //substring遍历，遍历到的数保存，没有遍历到的都删了
    this.value = this.value.substring(0,this.value.length-1)
    //
    this.amount = this.parseFloat(this.value)
  }
  //字符串转化为number
  parseFloat(str:string){
    if(!str){
      return 0
    }
    //以.结尾
    if(str.endsWith('.')){
      //求掉.
      str = str.substring(0,str.length-1)
    }
    return parseFloat(str)
  }
}