开发鸿蒙系统项目黑马健康APP首页Tabs和饮食记录顶部搜索

 一、工作的主要介绍

今天的任务主要是完成首页开发中的Tabs和饮食记录顶部搜索；首先主要用到了Tabs组件，包含TabBar和TabContent两部分；接着就是饮食记录顶部的搜索，就是用UI组件和Search组件。

二、运行效果及主要设计思路的介绍

1.首页Tabs的运行截图

2.首页Tabs的思路

首先根据页面的布局，来确定使用什么组件，然后根据标题的位置和内容的位置来使用TabsBar和TabContent来进行布局。

3.饮食记录顶部搜索的思路

使用@Component装饰器声明SearchHeader为一个组件，在Row布局中，使用Search组件来创建搜索框，设置了占位符文本。layoutWeight(1)确保搜索框在水平布局中占据尽可能多的空间。通过将组件设计为可复用的，可以在应用的不同部分或其他应用中轻松地插入和使用SearchHeader组件。

4.饮食记录顶部搜索运行截图

三、在设计的过程中遇到的问题

1.为什么点击那个标题知道点击的是那个标题

定义了个状态变量来记录currentIndex当前切到谁了，然后获取状态变量的值，添加点击事件，把index的值赋给currentIndex然后就改变了渲染。

2.TabBar中标题的位置

一般默认为顶部，通过barPosition属性可以设置TabBar的位置，这里使用了BarPosition.End将TabBar放置在末端。

四、最终实验代码

1.Tabs的代码

@Builder TabBarBuilder(title:Resource,image:Resource,index:number){
  Column({space: CommonConstants.SPACE_8}){
    Image(image)
      .width(22)

    Text(title)
      .fontSize(14)

Tabs({barPosition:BarPosition.End}){
 TabContent(){
   Text('饮食记录页面')
 }
  .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))
}

2.饮食记录顶部搜索的代码

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

    }
  }
}

五、总结

1.自定义组件的创建与布局

SearchHeader是一个自定义组件，它使用Row布局来组织搜索框和徽章（Badge）组件。Row组件通过space属性来设置子组件之间的间距，这里使用了CommonConstants.SPACE_6常量来定义间距大小。

2.标签页（Tab）组件的创建与管理

Tabs组件用于创建标签页，通过barPosition属性可以设置TabBar的位置，这里使用了BarPosition.End将TabBar放置在末端。