期末实战——黑马健康2

前言

综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新性的移动应用软件。

一、项目介绍

黑马健康是一款功能全面的健康管理应用，它通过提供个性化的饮食记录、健康评估等功能，帮助用户轻松管理健康，改善饮食和生活习惯。无论是需要减肥塑形，还是关注日常营养摄入，黑马健康都能为用户提供定制化的服务，让健康管理变得简单而有效。

二、应用运行

1.饮食记录-顶部搜索栏

（1）页面整体分析

主要编写搜索栏

（2）代码如下（示例）

RecordIndex部分

import RecordList from './RecordList'
import SearchHeader from './SearchHeader'
import StatsCard from './StatsCard'
@Component
export default struct RecordIndex {
  build() {
    Column(){
      //1.头部搜索栏
      SearchHeader()//定义单独组件写
      //2.统计卡片
      StatsCard()
      //3.记录列表
      RecordList()
        .layoutWeight(1)//除上面 剩下的内容
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.index_page_background'))
  }
}

SearchHeader部分

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct SearchHeader {
  build() {
    Row({space:CommonConstants.SPACE_6}){
      Search({placeholder:'搜索饮食或运动信息'})
        .textFont({size:18})
        .layoutWeight(1)//剩下所有
      //容器型组件 邮箱上方有小数字 Badge角标 位于右上
      Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:12}}){
        Image($r('app.media.ic_public_email'))
          .width(22)
      }
    }
    .width(CommonConstants.THOUSANDTH_940)
  }
}

（3）运行效果截图

2.饮食记录-统计卡片

（1）页面整体分析

（2）代码如下（示例）

import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
export default  struct DatePickDialog {
  controller:CustomDialogController//对话框 必须
  selectedDate:Date=new Date()//初始化

  build() {
    Column({space:CommonConstants.SPACE_12}){
      //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)
          console.info('select current date is: ' + JSON.stringify(value))
        })

      //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'))//主色调 绿色
        //需要将日期保存 只是保存了selectedDate的值，这个值在其他地方也用到 eg：卡片显示；查询记录信息；添加新增记录...
          .onClick(()=>{
            //1.保存日期到全局存储
            //整个应用的内部存储 任何地方都可以使用                                    //转成毫秒值再存
              AppStorage.SetOrCreate('selectedDate',this.selectedDate.getTime())//不存Date对象 因为日期Date对象将来在做状态变量监控的时候会有问题 sta...对日期做监控时会出错

            //2.关闭窗口
            this.controller.close()
        })
      }
    }
    .padding(CommonConstants.SPACE_12)
  }
}

（3）运行效果截图

3.饮食记录-记录列表

（1）页面整体分析

（2）代码如下（示例）

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

@Extend(Text) function grayText(){//1.分组的标题 中 Text单独样式
  .fontSize(14)
  .fontColor($r('app.color.light_gray'))

}

@Component
export default struct RecordList {
  build() {
    List({space:CommonConstants.SPACE_10}){//上下有间隔
      ForEach([1,2,3,4,5],(item)=>{
        ListItem(){
          Column() {
            //1.分组的标题
            Row({ space: CommonConstants.SPACE_4 }) {
              Image($r('app.media.ic_breakfast')).width(24)
              Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
              Text('建议423-592千卡').grayText()
              Blank() //空白
              Text('190').fontSize(14).fontColor($r('app.color.light_primary_color'))
              Text('千卡').grayText()
              Image($r('app.media.ic_public_add_norm_filled'))
                .width(20)
                .fillColor($r('app.color.primary_color'))
            }
            .width('100%')

            //2.组内记录列表
            List() {
              ForEach([1, 2], (item) => {
                ListItem(){
                  Row({space:CommonConstants.SPACE_4}){
                    Image($r('app.media.toast')).width(50)
                    Column({space:CommonConstants.SPACE_4}){
                      Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
                      Text('1片').grayText()
                    }
                    Blank()
                    Text('91千克').grayText()
                  }
                  .width('100%')
                  .padding(CommonConstants.SPACE_6)
                }.swipeAction({end:this.delectButton.bind(this)})//左滑显示删除按钮


              })
            }
          }
          .width('100%')
          .backgroundColor(Color.White)
          .borderRadius(CommonConstants.DEFAULT_18)//边框弧度
          .padding(CommonConstants.SPACE_12)//边距 内容不贴边
        }
      })
    }
   .width(CommonConstants.THOUSANDTH_940)
    .margin({top:10})
    .height('100%')
  }
  @Builder delectButton(){
    Image($r('app.media.ic_public_delete_filled'))
      .width(20)
      .fillColor(Color.Red)
      .margin(5)
  }
}

（3）运行效果截图

总结

知识补充

日期选择器组件—DatePicker

DatePicker:
用于根据指定日期范围创建日期滑动选择器
根据指定范围的Date创建可以选择日期的滑动选择器。。

亮点

1.Text文本单独样式

@Extend(Text) function grayText(){//1.分组的标题中 Text单独样式
  .fontSize(14)
  .fontColor($r('app.color.light_gray'))

}

2.ForEach循环

ForEach([1,2,3,4,5],(item)=>{
  ListItem(){
    Column() {
      //1.分组的标题
      Row({ space: CommonConstants.SPACE_4 }) {
        Image($r('app.media.ic_breakfast')).width(24)
        Text('早餐').fontSize(18).fontWeight(CommonConstants.FONT_WEIGHT_700)
        Text('建议423-592千卡').grayText()
        Blank() //空白
        Text('190').fontSize(14).fontColor($r('app.color.light_primary_color'))
        Text('千卡').grayText()
        Image($r('app.media.ic_public_add_norm_filled'))
          .width(20)
          .fillColor($r('app.color.primary_color'))
      }
      .width('100%')

      //2.组内记录列表
      List() {
        ForEach([1, 2], (item) => {
          ListItem(){
            Row({space:CommonConstants.SPACE_4}){
              Image($r('app.media.toast')).width(50)
              Column({space:CommonConstants.SPACE_4}){
                Text('全麦吐司').fontWeight(CommonConstants.FONT_WEIGHT_500)
                Text('1片').grayText()
              }
              Blank()
              Text('91千克').grayText()
            }
            .width('100%')
            .padding(CommonConstants.SPACE_6)
          }.swipeAction({end:this.delectButton.bind(this)})


        })
      }
    }