鸿蒙实战案例——黑马健康（4）

---

前言

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

一、项目介绍

黑马健康App是一款功能全面的健康管理应用，黑马健康App通过提供个性化的饮食记录、健康评估等功能，帮助用户轻松管理健康，改善饮食和生活习惯。 还提供个性化的推荐服务，确保用户能够获得最适合自己的健康和运动建议。总的来说，黑马健康App是一款功能全面、注重个性化推荐的健康管理应用，旨在为用户提供一站式的健康和运动解决方案。

二、具体页面实现

1.饮食记录页面--纪录列表

1.整体页面分析

该部分的每一项排版布局和内容都相似，就使用List列表将每一项渲染出来

List({space:10}){
      ForEach([1,2,3,4,5],(item) =>{
        ListItem(){
          Column(){
            //1.分组的标题
             //2.组内纪录列表
                List(){
           ForEach([1,2],(item)=>{
             ListItem(){
               Row({space:6}){
           })

              }
                }

每一项分两部分一部分为分组的标题，

  Row({space:4}){
              Image($r('app.media.ic_breakfast'))
                .width(24)
              Text('早餐')
                .fontSize(18)
                .fontWeight(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'))
            }

第二部分为组内纪录列表，也是通过List将内容渲染出来

List(){
           ForEach([1,2],(item)=>{
             ListItem(){
               Row({space:6}){
                 Image($r('app.media.toast')).width(50)
                 Column({space:4}) {
                   Text('全麦吐司').fontWeight(500)
                   Text('1片').grayText()
                 }
                  Blank()
                 Text('91千卡')
                   .grayText()
               }

2.代码

RecordItem.ets

import router from '@ohos.router'
@Extend(Text) function  grayText(){
  .fontSize(14)
  .fontColor($r('app.color.light_gray'))
}

@Component
export default struct RecordList {
  build() {
    List({space:10}){
      ForEach([1,2,3,4,5],(item) =>{
        ListItem(){
          Column(){
            //1.分组的标题
            Row({space:4}){
              Image($r('app.media.ic_breakfast'))
                .width(24)
              Text('早餐')
                .fontSize(18)
                .fontWeight(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'))
            }
            .width('100%')
            //2.组内纪录列表
         List(){
           ForEach([1,2],(item)=>{
             ListItem(){
               Row({space:6}){
                 Image($r('app.media.toast')).width(50)
                 Column({space:4}) {
                   Text('全麦吐司').fontWeight(500)
                   Text('1片').grayText()
                 }
                  Blank()
                 Text('91千卡')
                   .grayText()
               }
               .width('100%')
               .padding(6)

             }.swipeAction({end:this.deleteButton.bind(this)})
              .onClick(()=>this.ToitemList())


           })
         }
         .width('100%')

          }
          .backgroundColor(Color.White)
          .width('100%')
          .borderRadius(18)
          .padding(12)
        }
        .width('100%')


      })

    }
    .width('94%')
    .margin({top:10})
    .height('100%')

    }
  @Builder deleteButton() {
    Image($r('app.media.ic_public_delete_filled'))
      .width(20)
      .fillColor(Color.Red)
      .margin(5)
  }
  ToitemList(){
    setTimeout(()=>{
      router.replaceUrl({
        url:'pages/ItemIndex'
      })
    },1000)
  }
}

3.运行结果截图

 2.食物列表页

1.整体页面分析

在饮食记录页面--纪录列表页面中点击右方的加号按钮就会跳转到食物列表页，显示出要添加食物的信息

该页面的整体布局也为Tabs组件，上方为一个头部导航栏组件

 @Builder header(){
    Row(){
      Image($r('app.media.ic_public_back'))
        .width(30)
        .onClick(()=>router.back())
      Blank()
      Text('早餐').fontSize(18).fontWeight(600)
        .height(32)
    }.width('94%')

下面就是将不同的事物信息通过List容器遍历出来

build() {
    Tabs(){
      TabContent(){
       this.TabContentBuilder(ItemModel.list(this.isFood))
      }
      .tabBar('全部')
      ForEach(
        ItemModel.listItemGroupByCategory(this.isFood),
        (group: GroupInfo<ItemCategory, RecordItem>) => {
          TabContent() {
            this.TabContentBuilder(group.items)
          }
          .tabBar(group.type.name)
        })

    }

2.代码

ItemList.ets

import { CommonConstants } from '../../common/constants/CommonConstants'
import ItemModel from '../../model/ItemModel'
import GroupInfo from '../../viewmodel/GroupInfo'
import ItemCategory from '../../viewmodel/ItemCategory'
import RecordItem from '../../viewmodel/RecordItem'
@Component
export default struct ItemList {

  showPanel:(item:RecordItem)=>void
  @State isFood:boolean =true
  build() {
    Tabs(){
      TabContent(){
       this.TabContentBuilder(ItemModel.list(this.isFood))
      }
      .tabBar('全部')
      ForEach(
        ItemModel.listItemGroupByCategory(this.isFood),
        (group: GroupInfo<ItemCategory, RecordItem>) => {
          TabContent() {
            this.TabContentBuilder(group.items)
          }
          .tabBar(group.type.name)
        })

    }
    .width('94%')
    .height('100%')
  }
  @Builder TabContentBuilder(items:RecordItem[]){
    List({space:10}){
      ForEach(items, (item: RecordItem) => {
        ListItem() {
          Row({ space: CommonConstants.SPACE_6 }) {
            Image(item.image).width(50)
            Column({ space: CommonConstants.SPACE_4 }) {
              Text(item.name).fontWeight(CommonConstants.FONT_WEIGHT_500)
              Text(`${item.calorie}千卡/${item.unit}`).fontSize(14).fontColor($r('app.color.light_gray'))
            }.alignItems(HorizontalAlign.Start)
            Blank()
            Image($r('app.media.ic_public_add_norm_filled'))
              .width(18)
              .fillColor($r('app.color.primary_color'))
          }
          .width('100%')
          .padding(6)

        }
        .onClick(() => this.showPanel(item))


      })
    }
    .width('100%')
    .height('100%')
  }
}

3.运行结果截图
 

---

总结

通过这两期视频的学习，我对List列表，Tabs组件的认识更加全面，以后的相关页面也可以通过相似的操作构建。