鸿蒙案例-首页Tabs和顶部搜素栏的实现

首页Tabs的实现

Tabs 组件可以实现页面内视图内容快速切换，包含 TabBar 和 TabContent 两个部分。

实现过程

1.设置 TabBar 和 TabContent ，设置多少个TabBar 和 TabContent取决于你有多少个切换项

（我有三个切换项所以我只创建了三个）

    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.设置标题显示在底部

 Tabs({barPosition:BarPosition.End}){
}

3.自定义TabBar的样式

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

4.判断是否为选中的标题项设置颜色

selectColor(index:number){
    return this.currentIndex == index ? $r('app.color.primary_color'):$r('app.color.gray')  //判断当前角标与我的是否是一个，如果是则是主色调，若不是则是灰色
  }

代码实现

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

  @Builder TabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){ //自定义样式.  index为角标用于控制样式
    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}) { //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))
    }
    .width('100%')
    .height('100%')
    .onChange(index=>this.currentIndex=index) //记录切换角标
    .vertical(false) //标题为水平布局，true则为纵向布局
  }
}

页面效果

顶部搜素栏的实现

实现过程

1.设置头部搜素栏 

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

2.利用Search搜索框组件实现搜索框效果

  Row({space:CommonConstants.SPACE_6}){
      Search({placeholder:'搜素饮食或运动信息'}) 
        .textFont({size:18})
        .layoutWeight(1)

3.利用Badge信息标记容器组件实现邮箱计数效果

  Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:14}}){ 
        Image($r('app.media.ic_public_email'))
          .width(24)
      }

代码实现

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:14}}){ //Badge用于信息标记的容器组件
        Image($r('app.media.ic_public_email'))
          .width(24)
      }

    }
    .width(CommonConstants.THOUSANDTH_940)
  }
}

页面效果

总结

    Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏。

    切换指定页签需要使用TabsController，TabsController是Tabs组件的控制器，用于控制Tabs组件进行页签切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。不支持一个TabsController控制多个Tabs组件。

   搜索框组件Search，适用于浏览器的搜索内容输入框等应用场景。该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。Badge组件可以附加在单个组件上用于信息标记的容器组件。支持单个子组件。子组件类型：系统组件和自定义组件，支持渲染控制类型（if/else、ForEach和LazyForEach）。