饮食记录——顶部搜索栏

饮食记录——顶部搜索栏

在上次记录中，我们将首页使用Tabs组件实现了页面内容的快速切换，将页面分为了饮食记录、发现页面、我的主页三部分。本次记录我们开始完成饮食记录页面内容的顶部搜索栏组件。

1.创建饮食记录组件

为了保证主页代码的简洁性，我们将饮食记录页面内容封装策划成组件。

如下图为饮食记录页面布局图：

对应代码：

import SearchHeader from './SearchHeader'
@Component
export default  struct RecordIndex {
  build() {
    Column(){
      //1.头部搜索栏
      SearchHeader()

      //2.统计卡片
      

      //3.记录列表



    }.width('100%')
    .height('100%')
    .backgroundColor($r('app.color.index_page_background'))
  }
}

2.将头部搜索栏封装成组件

为了简洁，将头部搜索栏区域也设置为组件。可以看出头部搜索栏是一个行式布局。包括了带搜索图标的搜索栏，和带有图片角标的邮件图片组成。

带搜索图标的搜索栏

接口

Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController })

参数:

参数名	参数类型	必填	参数描述
value	string	否	设置当前显示的搜索文本内容。
placeholder	string	否	设置无输入时的提示文本。
icon	string	否	设置搜索图标路径，默认使用系统搜索图标，图标支持的图源格式: svg、jpg和png。
controller	SearchController	否	设置Search组件控制器。

带有图片角标的邮件图片

带有图片角标的邮件图片使用了角标组件实现

接口

Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle})

创建数字标记组件。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数名	参数类型	必填	默认值	参数描述
count	number	是	-	设置提醒消息数。**说明：**小于等于0时不显示信息标记。
position	BadgePosition	否	BadgePosition.RightTop	设置提示点显示位置。
maxCount	number	否	99	最大消息数，超过最大消息时仅显示maxCount+。
style	BadgeStyle	是	-	Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

在项目中头部搜索栏的实现过程

import { CommonConstants } from '../../common/constants/CommonConstants'
@Component
export default struct SearchHeader {
  build() {
    Row({space:CommonConstants.SPACE_6}){
      Search({placeholder:'搜索饮食或提示信息'})   //1.搜索栏
        .textFont({size:18})
        .layoutWeight(1)
      Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:12}}){   //图片角标
        Image($r('app.media.ic_public_email'))   //2.邮件图片
          .width(24)
      }

    }.width(CommonConstants.THOUSANDTH_940)
  }
}

实现效果