鸿蒙作业HealthApp第二期

鸿蒙作业HealthApp第二期

---

---

前言

这一期主要实现页面UI的实现和饮食记录UI中的顶部搜索栏的初步实现

---

一、首页UI设计

1.1首页UI结构分析

1.2首页UI初步实现

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 currentIndext : number = 0
  private breakpointSystem : BreakpointSystem= new BreakpointSystem()
  @StorageProp('currentBreakpoint')currentBreakpoint:string=BreakpointConstants.BREAKPOINT_SM
@Builder TabBarBuilder(title:ResourceStr,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.currentIndext===index?$r('app.color.primary_color'):$r('app.color.gray')
  }

  chooseBarPosition(){
    let p={
      sm:BarPosition.End,
      md:BarPosition.Start,
      lg:BarPosition.Start
    }
    return p[this.currentBreakpoint]
  }

  build() {
    Tabs({barPosition:this.chooseBarPosition()}){
      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.currentIndext=index)
    .vertical({
      sm:false,
      md:true,
      lg:true
    }[this.currentBreakpoint])
  }
}

二、饮食记录UI设计

2.1饮食记录UI-顶部搜索栏

2.1.1首先创建一个RecordIndex etc文件在建立一个ResearchHeader etc文件

代码及显示如下：

2.1.2进一步实现右上角的消息提示框

代码及显示如下：

RecordIndex etc文件代码如下（示例）：

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

}

消息提示框代码如下（示例）：

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:14}}){
        Image($r('app.media.ic_public_email'))
          .width(24)
      }
    }
    .width(CommonConstants.THOUSANDTH_940)

  }
}

总结

注意通过Badge 组件来显示一个带有徽章的图像，并设置徽章的数量、位置和样式。在徽章内部使用 Image 组件来显示图像，并设置图像的宽度。可以利用查询其API了解其用法。