鸿蒙开发实践项目--饮食记录卡片（2）

  上一篇实现了欢迎页面的ui以及逻辑业务，下面主要实现该项目的主要部分，首页部分的构建

  首页部分有三大项，页面顶部显示热量摄入情况，中间的饮食记录，在进行饮食记录时所用到的食物列表页

首先实现首页整体ui的设计

首页底部页面切换图标

Tabs组件可以实现页面内视图内容快速切换，包含TabBar和TabContent两个部分

自定义每一个Bar中的内部结构

@Builder TabBarBuilder(title: ResourceStr, image: ResourceStr, index: number) {//图片以及标题应设为变量
  Column({ space: CommonConstants.SPACE_8 }) {
    Image(image)
      .width(22)
      .fillColor(this.selectColor(index))//selectColor，自定义方法，给出下标选择颜色
    Text(title)
      .fontSize(14)
      .fontColor(this.selectColor(index))
  }
}

首页UI中的布局

build() {
  Tabs({ barPosition: BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint) }) {
    TabContent() {
      RecordIndex({isPageShow: this.isPageShow})
    }
    .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)//发生点击时，改变判断条件，被点击的bar图标变为高亮
  .vertical(new BreakpointType({
    sm: false,
    md: true,
    lg: true
  }).getValue(this.currentBreakpoint))
}

点击下方图标，页面进行切换，当前页面的图标显示高亮

头部搜索栏

头部搜索整体为一个水平布局，左边为搜索框，右边为一个邮箱图标，存在邮件时，会在图标的右上方显示数字，这里就需要用的组件Badge，将组件嵌入Badge中，会在组件的某个位置显示数字

build() {
  Row({space: CommonConstants.SPACE_6}){
    Search({placeholder: '搜索饮食或运动信息'})
      .textFont({size: 18})
      .layoutWeight(1)
    Badge({count: 1, position: BadgePosition.RightTop, style: {fontSize: 12}}){//显示数字1，出现位置为右上，显示字体为12
      Image($r('app.media.ic_public_email'))
        .width(24)
    }
  }
  .width(CommonConstants.THOUSANDTH_940)
}