移动开发项目——黑马健康（二）

一、首页Tabs

  首页界面是用户与应用程序互动的主要起点。这个界面不仅要能够清晰、直观地展示应用程序的核心功能和内容，还要提供流畅的用户体验和便捷的导航方式。总结来说，首页的设计需要简洁美观，让用户可以轻松使用。

  Tabs组件可以实现页面内视图内容快速切换，包含TabBar和Tabcontent两个部分。

Index.ets

import BreakpointType from '../common/bean/BreakpointType'
import BreakpointConstants from '../common/constants/BreakpointConstants'
import { CommonConstants } from '../common/constants/CommonConstants'
import BreakpointSystem from '../common/utils/BreakpointSystem'
import RecordIndex from '../view/record/RecordIndex'
@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private  breakpointSystem:BreakpointSystem=new BreakpointSystem()
  @StorageProp('currentBreakpoint') currentBreakpoint:string=BreakpointConstants.BREAKPOINT_SM

  @Builder TabBarBuilder(title:Resource,image:ResourceStr,index:number){
    Column({space:CommonConstants.SPACE_8}){
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index))
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }
  }

  aboutToAppear(){
    this.breakpointSystem.register()
  }

  aboutToDisappear(){
    this.breakpointSystem.unregister()
  }

  selectColor(index:number){
      return this.currentIndex===index?$r('app.color.primary_color'):$r('app.color.gray')
  }



  build() {
    Tabs({barPosition:BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint)}) {
      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)
    .vertical(new BreakpointType({
      sm:false,
      md:true,
      lg:true
    }).getValue(this.currentBreakpoint))
  }
}

二、饮食记录——顶部搜索栏

  搜索栏本质上是文本输入框，后面加了个小图标，即Search加Image。搜索栏允许用户直接输入关键词来查找特定的内容或功能，从而快速定位到他们感兴趣的信息。这种直接的导航方式比浏览多个页面或菜单更加高效，节省了用户的时间和精力。

SearchHeader.ets

import { CommonConstants } from '../../common/constants/CommonConstants'
@Entry
@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)
  }
}

三、饮食记录——统计卡片

  统计卡片方便用户更直观地看到当天饮食摄入及消耗，用户可以选择时间，可以查看之前的记录，也可以补充记录当天的详情。卡片分为两部分，除了推荐摄入卡路里，用户还可以直观地看到碳水、蛋白质和脂肪的摄入，可以帮助用户更好的安排饮食。

StatsCard.ets

import BreakpointType from '../../common/bean/BreakpointType'
import BreakpointConstants from '../../common/constants/BreakpointConstants'
import { CommonConstants } from '../../common/constants/CommonConstants'
import DateUtil from '../../common/utils/DateUtil'
import DatePickDialog from'../record/DatePickDialog'
import CalorieStats from './CaloriesStats'
import NutrientStats from './NutrientStats'
@Entry
@Component
export default struct StatsCard{
  @StorageProp('selectedDate') selectedDate:number=DateUtil.beginTimeOfDay(new Date())
  @StorageProp('currentBreakpoint') currentBreakpoint:string=BreakpointConstants.BREAKPOINT_SM

  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')})
      .displayCount(new BreakpointType({
        sm:1,
        md:1,
        lg:2
      }).getValue(this.currentBreakpoint))
    }
    .width(CommonConstants.THOUSANDTH_940)
    .backgroundColor($r('app.color.stats_title_bgc'))
    .borderRadius(CommonConstants.DEFAULT_18)
  }
}