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

前言

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

一、项目介绍

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

二、具体页面实现

1.首页Tabs

1.整体页面分析

整个首页是使用一个Tabs组件进行构建，Tabs组件可以实现页面内试图内容快速切换，包含TabBar和Tabcontent两个部分。

该app共有三个页面，分别为饮食记录页面，发现页面和我的页面，所以需要在Tabs组件中设置三个Tabcontent与TabBar(主要介绍饮食记录页面)

Tabs({barPosition:BarPosition.End}){
  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))

  }

这里将饮食记录页面的Tabcontent内容设置成了一个自定义组件Recordindex()，在后续会做详细介绍

2.代码

import Recordindex from '../view/record/Recordindex'

@Entry
@Component
struct Index {

@State currentIndex:number=0
  @Builder TabBarBUilder(title: ResourceStr,image:ResourceStr,index:number){  //自定义tabbar

    Column({space:8}){
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index))
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }

  }
 selectColor(index:number){
   return this.currentIndex === index ? $r('app.color.primary_color') : $r('app.color.gray')
 }
  build(){
  Tabs({barPosition:BarPosition.End}){
  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)
  }

}

3.运行结果截图

2.饮食记录页面--顶部搜索栏

1.整体页面分析

饮食记录页面是一个单独的自定义组件，其页面总体分为三个部分，头部搜索栏 Searchheader() 统计卡片 StatsCard() ，纪录列表 RecordList()

本次介绍第一部分头部搜索栏。该部分是用了Search搜索栏组件和一个被Badge组件包裹起来的image组件，Badge组件的作用就是在邮件图片右上角显示红色邮件数量提示。

2.代码

Searchheader.ets

@Component
export default struct Searchheader {
  build() {
    Row({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(20)
   }
    }
    .width('94%')

  }
}

3.运行结果截图

---

总结

通过本次视频的学习，学会了Tabbar组件，Search组件，Badge组件的含义与使用方法，对整体的饮食记录页面进行了大体的布局。