首页UI设计-----Tabs组件

首页UI设计-----首页Tabs组件

1.作用：

首页Tabs组件实现了页面内视图内容的快速切换，包含TabBar和TabContent两个部分。如下图所示：

2.特殊设置

Tabs组件可以设置tabBar的位置，即其在页面哪一部分。同时也可以设置其是水平的（多用于手机），还是垂直的（多用于平板）。

3.定义用户自定义的tabBar及使用

用户可以使用@Builder定义自己的tabBar组件，通过传递参数来获取tabBar中的信息，但是此时无法区分选中的tabBar和未选中tabBar。

4.设置所选中tabBar的样式与未选中的不同样式

• 在定义用户自定义的tabBar及使用的基础上，定义了一个常量CurrentIndex来存储当前选中的tabBar下标,当页面的index改变时，将此时的index组件赋值给CurrentIndex.
• 在用户自定义的tabBar组件中设置图片和文字的颜色为动态，即加入判断，和CurrentIndex相等的页面的图片和文字，为一单独颜色，其余为另一颜色。

5.在本项目中的应用：

import { CommonConstants } from '../common/constants/CommonConstants'
@Entry
@Component
struct Index {
@State currentIndex:number=0;  //当前页面下标
//自定义tabBar样式
  @Builder TabBarBuilder(title:Resource,image:Resource,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){
    return this.currentIndex===index ? $r('app.color.primary_color'):$r('app.color.light_gray')
  }

  build() {
    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) //使currentIndex记录到当前页面角标
  }
}

实现的效果：