鸿蒙实战案例（2）——黑马健康应用首页Tabs的实现

2301_80336707

已于 2024-06-26 08:45:33 修改

阅读量102

点赞数 2

文章标签：鸿蒙 harmonyos

于 2024-06-26 07:48:17 首次发布

本文链接：https://blog.csdn.net/2301_80336707/article/details/139975047

版权

一、预实现图片

二、代码实现

import RecordList from './RecordList'
import SearchHerder from './SearchHeader'
import StatsCard from './StatsCard'
@Component
export default struct RecordIndex{
  build(){
    Column(){
      //1.头部搜素
      SearchHerder()
      //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 SearchHerder{
  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)

  }
}

import BreakpointType from '../../common/bean/BreanpointType'
import BreakpointConstants from '../../common/constants/BreakpointConstants'
import { CommonConstants } from '../../common/constants/CommonConstants'
import DateUtil from '../../common/utils/DateUtil'
import CalorieStats from './CalorieStats'
import DatePickDialog from './DatePickDialog'
import NutrientStats from './NutrientStats'
@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_12)
      .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)
  }
}

运行截图：