饮食记录顶部搜索栏

好的，我们上一篇文章已经完成了首页的底部导航栏的部分，那么本篇文章呢要带领大家完成饮食记录页面的顶部搜索栏，实际上这部分的工作量是及其至少，相信聪明的你很快就可以去读下一篇文章了

一、布局分析

如果你读过上篇文章那么你就能记得饮食记录的顶部搜索框其实就是两部分构成

搜索栏加邮件图片，那么邮件图片的右上角还会有部分同学最讨厌的红点来显示邮件数量

二、正式开发

说是正式开发，实际也没什么开发的内容，这部分甚至可以直接跳过，不过作者在这为了刚好一篇文章来对应黑马程序员的一个视频也就稍微的水一下了

1.首页组件

首先我们在view下新建一个record（记录）的文件夹，并在这个文件夹下新建RecordIndex（记录首页）的ets文件来作为组件，上篇讲过，Tabs组件中目前的内容就只有一个Text的文本来显示内容，那么后续我们正式开发就把这三个部分都写成组件的形式调用即可

下面先写好首页的大体格式

@Component
export default struct RecordIndex {

  build() {
    Column(){
      // 1.头部搜索栏
      SearchHeader()
      // 2.统计卡片
      StatsCard()
      // 3.记录列表
      RecordList()
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.index_page_background'))
  }
}

2.搜索栏组件

再新建一个叫SearchHeader（顶部搜索栏）的一个组件，并把内容补全

我们这里的搜索栏不是一个简单的文本输入栏，而是一个带着一个小图标的搜索框，实际上鸿蒙已经为我们提供好了一个叫Search的专属的搜索栏，我们可以通过将鼠标悬停到Search上可以查看它的书写格式

根据我们的布局分析可以直接完成这个组件

@Component
export default struct SearchHeader {
  build() {
    Row({space: CommonConstants.SPACE_6}){
      Search({placeholder: '搜索饮食或运动信息'})
        .textFont({size: 18})
        .layoutWeight(1)
    }
    .width(CommonConstants.THOUSANDTH_940)
  }
}

3.消息通知数量

小红点呢也有一个组件可以直接实现，叫做Badge，它是一个容器型组件，你想给谁加红点你就直接把谁CV进去就好，但是具体的数字需要我们传参，我们还可以通过position来控制红点的位置，简直不要太人性化。。。我们甚至还可以通过style来改变它的样式

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

三、最终效果

OK，我们下篇文章接着讲，我们这里附上黑马程序员饮食记录顶部搜索栏的视频链接，文章配合视频更好理解哦。