饮食记录顶部搜索栏

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

一、布局分析

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

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

二、正式开发

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

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（顶部搜索栏）的一个组