鸿蒙实战案例-首页Tabs及饮食记录-顶部搜索栏

---

前言

在现代应用程序中，多标签页（Tab Bar）是一种常见的导航模式，允许用户轻松切换不同的功能模块。接下来我将展示一个使用 TypeScript 和一些 UI 组件构建的多标签页，涉及到标签的切换、UI 布局的设计以及状态管理。

---

 一、设计

首页UI设计

二、创建TabBar

首先，我创建了一个名为Index的入口组件，它包含一个TabBar。TabBar是一个底部导航栏，可以包含多个TabContent，每个TabContent对应一个页面。我定义了一个TabBarBuilder构建函数，它接受三个参数：标题、图片资源和索引。这个构建函数会返回一个包含图片和文本的列布局。图片和文本的颜色由selectColor函数决定，如果当前索引与传入的索引相同，则颜色为app.color.primary_color，否则为app.color.gray。然后，在build函数中创建一个Tabs组件，它包含三个TabContent，分别对应"记录"、"发现"和"我的主页"三个页面。每个TabContent都有一个对应的tabBar，由TabBarBuilder生成。

代码如下：

import { CommonConstants } from '../common/constants/CommonConstants'
import RecordIndex from '../view/record/RecordIndex'
@Entry
@Component
struct Index {
  @State currentIndex: number = 0

  @Builder TabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){
    Column({space:CommonConstants.SPACE_8}){
      Image(image)
        .width(22)
        .fillColor(this.selectColor(index))
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }
  }
  selectColor(index:number){
      return this.currentIndex === index ? $r('app.color.primary_color'):$r('app.color.gray')
  }

  build() {
    Tabs({barPosition:BarPosition.End}) {
      TabContent(){
        RecordIndex()
      }
      .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))

    }
    .width('100%')
    .height('100%')
    .onChange(index => this.currentIndex = index)
  }
}

三、创建搜索栏和统计卡片

接下来，创建一个名为RecordIndex的组件，它包含一个搜索栏和一个统计卡片。我首先创建一个SearchHeader组件，它是一个行布局，包含一个搜索框和一个图标。搜索框的宽度为1，即占满整个行布局。图标的位置位于搜索框的右上方。然后，添加了一个表示统计卡片的文本和一个表示记录列表的文本。这两个文本只是占位符，实际的开发中，我们需要替换为真正的统计卡片和记录列表。

代码如下：

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

四、创建搜索栏

最后，创建一个名为SearchHeader的组件，它包含一个搜索框和一个图标。首先创建一个行布局，包含一个搜索框和一个图标。搜索框的宽度为1，即占满整个行布局。图标的位置位于搜索框的右上方。

代码如下：

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

---

总结

代码中定义了多个结构体（struct），这些结构体类似于组件，每个结构体都有一个 build() 方法来描述其呈现的内容和样式。Index 结构体作为入口点，展示了一个标签页（Tabs）布局，其中包含多个标签页（TabContent）。每个标签页由 TabBarBuilder 构建，根据当前索引显示不同的颜色和图标。图像、文本等元素被配置为根据 currentIndex 的值来动态地显示不同的样式，通过 selectColor() 方法来确定当前选中标签的颜色。Index 结构体内部调用了 RecordIndex 和 Text 组件来展示不同的页面内容。RecordIndex 结构体内部则调用了 SearchHeader 和其他文本组件来构建搜索栏、统计卡片和记录列表。利用了组件化、状态管理等技术，来创建一个多标签页的交互式用户界面。