鸿蒙个人项目-饮食记录-顶部搜索栏

---

前言

在当今数字化的时代，信息的快速检索和获取变得至关重要。对于应用程序而言，提供一个高效、便捷且用户友好的搜索功能是提升用户体验的关键因素之一。在本次的鸿蒙个人项目中，顶部搜索栏作为核心功能之一，旨在为用户打造一种无缝、流畅的信息搜索体验。无论是在寻找特定的食谱、食材信息，还是查询与饮食相关的健康建议，这个顶部搜索栏都将成为用户的得力助手。

---

一、创建RecordIndex组件

定义一个名为 build 的方法，用于构建页面布局。方法内部使用 Column 组件进行垂直排列。首先是一个自定义的 SearchHeader 组件，可能用于实现头部搜索功能。接着是显示文本“统计卡片”和“记录列表”的部分。整个 Column 组件的宽度和高度均占满整个页面（100%），并且背景颜色设置为通过 $r('app.color.index_page_background') 引用的颜色值。在一个饮食记录应用中，SearchHeader 可能用于搜索特定的饮食记录，“统计卡片”可以展示总体的饮食数据统计，“记录列表”则列出详细的饮食记录。这段代码清晰地构建了一个页面的基本框架和布局，为后续的页面功能和内容展示提供了基础结构。

用户在打开页面时，将首先看到头部的搜索栏，方便快速查找所需信息。随后是关于统计的展示和详细的记录列表，为用户提供了清晰直观的信息呈现。

代码如下：

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

二、创建SearchHeader组件

这段代码展示了一个精心设计的水平布局 Row 。通过合理的设置，实现了搜索功能与徽章提示的有效整合。在布局方面，利用 CommonConstants.SPACE_6 设定了组件之间的间距，使界面元素分布更加合理美观。搜索组件 Search 具有明确的占位提示文本，并通过设置字体大小为 18 ，提供了清晰易读的输入引导。其 layoutWeight 为 1 ，确保了在布局中的占比均衡。徽章组件 Badge 的配置丰富且细致。设置了计数为 1 ，位置在右上角顶部，内部字体大小为 12 ，并包含了一个宽度为 24 的图像。这种详细的配置使得徽章能够准确且吸引人地传达相关信息。整体宽度被设定为 CommonConstants.THOUSANDTH_940 ，这有助于在不同屏幕尺寸上保持布局的协调性和适应性。这段代码体现了对用户界面细节的关注和对功能实现的精准把控，有助于提升用户在搜索和获取提示信息时的体验，同时也展示了良好的代码结构和设计模式，方便后续的维护和扩展。

代码如下：

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

三、总体实现截图

代码如下：

import SearchHeader from './SearchHeader'

@Component
export default struct RecordIndex {


  build() {
    Column(){
      // 1.头部搜索栏
      SearchHeader()
      // 2.统计卡片
      Text('统计卡片')
      // 3.记录列表
     Text('记录列表')
    }
    .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: 12}}){
        Image($r('app.media.ic_public_email'))
          .width(24)
      }
    }
    .width(CommonConstants.THOUSANDTH_940)
  }
}

---

总结

总的来说，这两段代码展示了如何在鸿蒙应用中通过巧妙的布局和组件使用，构建出功能丰富、布局合理的页面，为用户带来便捷和舒适的交互体验。无论是搜索功能的实现，还是信息的展示与提示，都体现了对用户需求的深入理解和精心设计。这个顶部搜索栏项目不仅是技术的实现，更是对用户需求的深入理解和关怀的体现。相信它将为用户在饮食记录应用中带来全新的、更加便捷的使用体验，帮助用户更好地管理自己的饮食健康。