期末项目黑马健康2

黑马健康项目

黑马健康是一款流行的运动健身软件，旨在帮助用户保持健康和锻炼，致力于提供健身教学、跑步、骑行、交友及健身饮食指导一站式运动解决方案。健身、跑步、骑行，运动品类更丰富，个性化推荐更加精细

---

一、项目名称：黑马健康运动

黑马健康是一款流行的运动健身软件，旨在帮助用户保持健康和锻炼，致力于提供健身教学、跑步、骑行、交友及健身饮食指导一站式运动解决方案。健身、跑步、骑行，运动品类更丰富，个性化推荐更加精细。

---

二、应用运行过程2

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

饮食记录view/record/RecordIndex
顶部搜索栏，在record新建组件SearchHeader
横向布局，有一个带搜索图标的输入框Search（{placeholder： ‘搜索饮食或运动信息’}）

代码如下：

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

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({count: 1, position: BadgePosition.RightTop, style: {fontSize: 12}}){
        Image($r('app.media.ic_public_email'))
          .width(24)
      }
    }
    .width(CommonConstants.THOUSANDTH_940)
  }
}

2.饮食记录—统计卡片

弹窗日期选择器DatePicker(option ?: {start ?: Date,end ?: Date,selected ?: Date})
start开始日期，end结束日期，selected设置选中项的日期
属性：lunar（参数类型boolean）日期是否显示农历
事件：onChange（callback(value: DatePickerResult) => void）选择日期触发该事件

代码如下：

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)
        })
      // 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'))
          .onClick(() => {
            // 1.保存日期到全局存储
            AppStorage.SetOrCreate('selectedDate', this.selectedDate.getTime())
            // 2.关闭窗口
            this.controller.close()
          })
      }
    }
    .padding(CommonConstants.SPACE_12)
  }
}

3.饮食记录—记录列表

统计卡片（新建组件StatsCard）：列式布局，时间选择窗口，饮食统计卡片信息（2）
日期信息：行式布局；弹窗（新建组件DatePickDialog）=》 1.日期选择器DatePicker
2.按钮（取消，确定）确定日期保存到全局存储，（新API）AppStorage.setCreate.getTime //获取毫秒值
在StatsCard里进行应用

代码如下：

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


@Extend(Text) function  grayText(){
  .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千卡')
              Blank()
              Text('190').fontSize(14).fontColor($r('app.color.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(){
                    Image($r('app.media.toast')).width(50)
                    Column({space:CommonConstants.SPACE_6}){
                      Text('吐司面包').fontWeight(CommonConstants.FONT_WEIGHT_500)
                      Text('1片').grayText()
                    }
                    Blank()
                    Text('91千卡').garyText()
                  }
                  .width('100%')
                  .padding(CommonConstants.SPACE_6)
                }.swipeAction({end:this.deleteButton.bind(this)})
              })
            }
            .width('100%')
          }
          .width('100%')
          .backgroundColor(Color.White)
          .borderRadius(CommonConstants.DEFAULT_18)
          .padding(CommonConstants.SPACE_12)
        }
      })
    }
    .width(CommonConstants.THOUSANDTH_940)
    .height('100%')
    .margin({top:10})
  }

  @Builder deleteButton(){
    Image($r('app.media.ic_public_delete_filled'))
      .width(20)
      .fillColor(Color.Red)
      .margin(5)
  }
}

总结

1.顶部搜索栏

分析框架

一个带搜索图标的输入框Search用法
const Search: SearchInterface
(option ?: {
value: string;
placeholder ?;: string; //提示字符
icon ?: SearchController; //图标
}) => SearchAttribute

邮箱上有数字显示有多少个邮件，新组件Badge(容器型组件)

2.统计卡片

代码如下：

import { CommonConstants } from '../../common/constants/CommonConstants'
import CalorieStats from './CalorieStats'
import NutrientStats from './NutrientStats'
import DatePickDialog from './DatePickDialog'
import DateUtil from '../../common/utils/DateUtil'
@Component
export default struct StatsCard {

  @StorageProp('selectedDate') selectedDate:number=DateUtil.beginTimeOfDay(new Date())

  controller:CustomDialogController=new CustomDialogController({
    builder:DatePickDialog({selectedDate:new Date(this.selectedDate)})
  })

  build() {
    Column() {
      // 1.日期信息
      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_8)
      .onClick(() => this.controller.open())

      // 2.统计信息
      Swiper() {
        // 2.1.热量统计
        CalorieStats()
        // 2.2.营养素统计
        NutrientStats()
      }
      .width('100%')
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.DEFAULT_18)
      .indicatorStyle({ selectedColor: $r('app.color.primary_color') })
    }
    .width(CommonConstants.THOUSANDTH_940)
    .backgroundColor($r('app.color.stats_title_bgc'))
    .borderRadius(CommonConstants.DEFAULT_18)
  }
}