本章实现项目《黑马健康APP》的首页中部分记录界面的实现，我把它分为三部分实现。首页UI设计包括顶部搜索栏，中部是饮食记录统计区域，下面是记录列表区域。卡片点击弹窗显示日期，展示对应的饮食记录；统计区域卡片左右轮换，第一部分展示总的热量统计，滑动则展示营养素的统计；再往下记录列表区域为List列表，列表中逐一的渲染文本和图片的内容。

一.运行效果

二.知识储备

（一）Search组件 

    目标：Search文本输入框是搜索框组件，适用于浏览器的搜索内容输入框等应用场景。利用placeholder设置无输入时的提示文本。实现界面布局要求。

（二）DatePicker组件 

    目标：日期选择器组件，用于根据指定日期范围创建日期滑动选择器。start指定选择器的起始日期，end指定选择器的结束日期。onChange(callback: (value: DatePickerResult) => void)选择日期时触发该事件。本日期选择器存毫秒值不存日期，日期date对象将来做状态变量用prop或者link监控有问题有错误。AppStorage.SetOrCreate保存日期到全局变量存储。

（三）Swiper组件 

    目标：滑块视图容器，提供子组件滑动轮播显示的能力，熟练应用SwiperController，Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。

（四）List列表

    目标：使用ListItem定义列表项的布局和样式，包括如何使用模板来显示列表项的数据，

学会如何在运行时添加、删除或更新列表项。

三.实现步骤

 （一）饮食记录页的结构解构：

 （二）实现饮食记录页界面布局：新建view目录下record文件下新建饮食记录页RecordIndex，其内部完成整个饮食记录的开发 ：头部搜索栏、统计卡片，记录列表三部分都用定义单独的组件去写。

 （三）编写顶部搜索栏SearchHeader内容：

  • SearchHeader中Badge显示信封e-mail的数字，个点击点亮类似也可以定义状态变量控制。
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: 10}}){
        Image($r('app.media.ic_public_email'))
          .width(24)
      }
    }
    .width(CommonConstants.THOUSANDTH_940)
  }
}

（四）编写卡片区域StatsCard内容：1.新建DatePickDialog组件实现日期弹窗器，在 StatsCard中实时监控；2.使用 Swiper组件完成显示热量的统计信息块和营养素的信息块，新建热量统计块CalorieStats；新建营养素块NutrientStats。

  • 卡片区域一部分为Text文本，又可以弹窗显示选择日期；区域二统计的部分一个是显示热量的统计信息，另一个还会出现弹窗营养素的信息。
  • 日期选择窗DatePicker组件实现，穿梭切换的两个卡片实现借助Swiper组件实现。

记录界面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()
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.index_page_background'))

  }
}

卡片区域它包括滑动轮播的两个切换面，StatsCard代码：

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())

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

StatsCard中热量统计块CalorieStats代码：

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct CalorieStats {
  intake:number=192
  expend:number=150
  recommend:number=CommonConstants.RECOMMEND_CALORIE
  build() {
    Row({space:CommonConstants.SPACE_6}){
      //1.饮食摄入
      this.StatsBuilder('饮食摄入',this.intake)

      //2.还可以吃
      Stack(){
        //2.1进度条
        Progress({
          value:this.intake,
          total:this.recommend,
          type:ProgressType.Ring
        })
          .width(120)
          .style({strokeWidth:CommonConstants.DEFAULT_10})
          .color($r('app.color.primary_color'))
        //2.2统计数据
        this.StatsBuilder('还可以吃',(this.recommend-this.intake+this.expend),`推荐${this.recommend}`)
      }

      //3.运动消耗
      this.StatsBuilder('运动消耗',this.expend)

    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    .padding({top:30,bottom:35})
  }
  @Builder StatsBuilder(label:string,value:number,tips?:string){
    Column({space:CommonConstants.SPACE_6}){
      Text(label)
        .fontColor($r('app.color.gray'))
        .fontWeight(CommonConstants.FONT_WEIGHT_600)
      Text(value.toFixed(0))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
     if(tips){
       Text(tips)
         .fontSize(12)
         .fontColor($r('app.color.light_gray'))
     }
    }
  }
}

StatsCard中营养素块NutrientStats代码：

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct NutrientStats {
  carbon:number=23
  protein:number=9
  fat:number=7

  recommendCarbon:number=CommonConstants.RECOMMEND_CARBON
  recommendProtein:number=CommonConstants.RECOMMEND_PROTEIN
  recommendFat:number=CommonConstants.RECOMMEND_FAT


  build() {
    Row({space:CommonConstants.SPACE_6}){
      //1.碳水化合物
      this.StatsBuilder(
        '碳水化合物',
        this.carbon,
        this. recommendCarbon,$r('app.color.carbon_color')
      )

      //2.蛋白质
      this.StatsBuilder(
        '蛋白质',
        this.protein,
        this. recommendProtein,$r('app.color.protein_color')
      )

      //3.脂肪
      this.StatsBuilder(
        '脂肪',
        this.fat,
        this. recommendFat,$r('app.color.fat_color')
      )

    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    .padding({top:30,bottom:35})
  }
  @Builder StatsBuilder(label:string,value:number,recommend:number,color:ResourceStr){
    Column({space:CommonConstants.SPACE_6}){
      Stack() {
        Progress({
          value: value,
          total: recommend,
          type: ProgressType.Ring
        })
          .width(95)
          .style({ strokeWidth: CommonConstants.DEFAULT_6 })
          .color(color)
        Column({space:CommonConstants.SPACE_6}) {
          Text('摄入推荐')
            .fontSize(12)
            .fontColor($r('app.color.gray'))
          Text(`${value.toFixed(0)}/${recommend.toFixed(0)}`)
            .fontSize(18)
            .fontWeight(CommonConstants.FONT_WEIGHT_600)
        }
      }
      Text(`${label}(克)`)
        .fontSize(12)
        .fontColor($r('app.color.light_gray'))
    }
  }
}

（四）编写列表区域RecordList内容：展示列表信息，并实现List区域增删改信息功能。

记录界面RecordList代码：

import router from '@ohos.router'
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({space:CommonConstants.SPACE_8}){
            //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.primary_color'))
              Text('千卡').grayText()
              Image($r('app.media.ic_public_add_norm_filled'))
                .width(20)
                .fillColor($r('app.color.primary_color'))
                .onClick(()=>{
                  router.pushUrl({
                    url:'pages/ItemIndex'
                  })
                })
            }
            .width('100%')

            //2.组内记录列表
            List(){
              ForEach([1,2],(item)=>{
                ListItem(){
                  Row({space:CommonConstants.SPACE_6}){
                    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.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)

  }
}

四.总结

     本次开发学习了日期选择器AppStorage保存日期到全局变量存储这一重要的知识点对我开发过程有重要作用；另外子组件Swipe滑动轮播显示的能力，Swipe的其他自动播放的功能有着广泛和实用性的作用，学习掌握提高了我的开发能力。

# 鸿蒙 # harmonyos
Logo
乐奇 Rokid 开放社区

更多推荐

3 步跑通 MediaPipe Hands 手势追踪：从摄像头到 21 个关键点

写一个"挥手切歌、抬手锁屏"的功能，最难的往往不是 UI，而是把手稳定地从画面里找出来：手指会挡住手掌、手会快速抖动，摄像头拍到的画面还没有明显特征。MediaPipe Hands 就是专门解决这个问题的：输入视频流或图片，输出每只手 21 个 3D 关键点的坐标，本地实时完成，图片本身不用出设备。## 它是什么，硬指标有哪些MediaPipe Hands 是 MediaPipe 框架里的

avatar 乐奇 Rokid 开放社区

shadPS4 安装教程：5 分钟从零跑通你的 PS4 模拟器

shadPS4 是一款用 C++ 编写的 PS4 模拟器，能把 PlayStation 4 的游戏跑在你的 PC 上。它覆盖 Windows、Linux 与 macOS，适合想在电脑上玩 PS4 游戏、又愿意敲几条命令的新手。## 快速上手：5 分钟让 PS4 模拟器先跑起来下面 4 条命令按顺序执行，约 5 分钟就能看到窗口弹出。请先装好编译依赖，各平台清单在下一节。克隆源码，`--

avatar 乐奇 Rokid 开放社区

AI眼镜普及前夜，端侧算力与续航的平衡仍是最大变量

2025年被称为AI眼镜元年。IDC统计，当年第二季度全球智能眼镜出货255.5万台，同比增长54.9%，其中中国市场出货66.4万台，同比增长145.5%。Omdia的全年口径更高：2025年全球AI眼镜出货约870万台，同比增长322%。群智咨询预计，2026年全球出货量将达1610万台，再增长约72%。出货曲线向上，体验短板没有同步补齐。多数不带显示的AI眼镜，单次续航在数小时到十小时之间，

avatar 乐奇 Rokid 开放社区