鸿蒙HarmonyOS开辟：tabs结合tabContent实现底部tabBar导航栏页面布局 ...

一、组件介绍

Tabs组件的页面构成包罗两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航范例，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。

1、Tabs

通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
   仅可包罗子组件TabContent。

1. Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})

复制代码

参数

参数名参数范例必填参数形貌barPositionBarPosition否设置Tabs的页签位置。
默认值：BarPosition.Startindexnumber否设置当前表现页签的索引。
默认值：0
阐明：
设置为小于0的值时按默认值表现。
可选值为[0, TabContent子节点数量-1]。
设置不同值时，默认见效切换动效，可以设置animationDuration为0关闭动画。controllerTabsController否设置Tabs控制器。 属性

名称参数范例形貌verticalboolean设置为false是为横向Tabs，设置为true时为纵向Tabs。
默认值：falsescrollableboolean设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。
默认值：truebarModeBarModeTabBar布局模式，详细形貌见BarMode枚举阐明。
默认值：BarMode.FixedbarWidthnumberTabBar的宽度值。barHeightnumberTabBar的高度值。animationDurationnumber点击TabBar页签切换TabContent的动画时长。不设置时，点击TabBar页签切换TabContent无动画。
默认值：300
阐明：
该参数不支持百分比设置；设置为小于0时，按默认值300ms表现。 变乱

1. onChange(event: (index: number) => void)

复制代码

Tab页签切换后触发的变乱。

• index：当前表现的index索引，索引从0开始计算。
  

触发该变乱的条件：

• 1、TabContent支持滑动时，组件触发滑动时触发。
  
• 2、通过控制器API接口调用。
  
• 3、通过状态变量构造的属性值进行修改。
  
• 4、通过页签处点击触发。
  

TabsController

Tabs组件的控制器，用于控制Tabs组件进行页签切换。不支持一个TabsController控制多个Tabs组件。

1. controller: TabsController = new TabsController()
2. changeIndex(value: number): void

复制代码

参数：
参数名参数范例必填参数形貌valuenumber是页签在Tabs里的索引值，索引值从0开始。
阐明：
设置小于0或大于最大数量的值时，该变乱失效。 2、子组件

1. TabContent()

复制代码

属性

名称参数范例形貌tabBarstringResource 阐明

• TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
  
• TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
  
• vertical属性为false值，交换上述2个限制。
  
• TabContent组件不支持内容过长时页面的滑动，如需页面滑动，可嵌套List使用。
  

二、底子示例

1、底子顶部导航

1. @Entry@Componentstruct TabsPage2 {  build() {    Column() {      Tabs() {        TabContent()
2. {          Text('首页的内容').fontSize(30)        }        .tabBar('首页')        TabContent()
3. {          Text('保举的内容').fontSize(30)        }        .tabBar('保举')        TabContent()
4. {          Text('发现的内容').fontSize(30)        }        .tabBar('发现')        TabContent()
5. {          Text('我的内容').fontSize(30)        }        .tabBar("我的")      }    }    .width('100%')    .height('100%')  }}

复制代码

2、效果

3、可以滚动导航栏

滚动导航栏可以用于顶部导航栏或者侧边导航栏的设置，内容分类较多，屏幕宽度无法容纳所有分类页签的情况下，必要使用可滚动的导航栏，支持用户点击和滑动来加载隐藏的页签内容。
滚动导航栏必要设置Tabs组件的barMode属性，默认情况下其值为Fixed，表示为固定导航栏，设置为Scrollable即可设置为可滚动导航栏。

1. @Entry@Componentstruct TabsPage2 {  @State tabsList: Array<string> = ['关注', '视频', '游戏', '数码', '科技', '体育', '影视', '人文', '艺术', '天然', '军事'];  build() {    Column() {      Tabs() {        ForEach(this.tabsList, (item) => {          TabContent()
2. {            Text(item).fontSize(30)          }          .tabBar(item)        })      }.barMode(BarMode.Scrollable)    }    .width('100%')    .height('100%')  }}

复制代码

2、效果

三、扩展示例

自界说导航栏

对于底部导航栏，一样平常作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，必要自界说导航页签的样式。
系统默认情况下接纳了下划线标志当前活跃的页签，而自界说导航栏必要自行实现相应的样式，用于区分当前活跃页签和未活跃页签。设置自界说导航栏必要使用tabBar的参数，以其支持的CustomBuilder的方式传入自界说的函数组件样式。比方这里声明TabBuilder的自界说函数组件，传入参数包罗页签文字title，对应位置index，以及选中状态和未选中状态的图片资源。通过当前活跃的currentIndex和页签对应的targetIndex匹配与否，决定UI表现的样式。

• 在TabContent对应tabBar属性中传入自界说函数组件，并通报相应的参数。
  
• 在不使用自界说导航栏时，系统默认的Tabs会实现切换逻辑。在使用了自界说导航栏后，切换页签的逻辑必要手动实现。即用户点击对应页签时，屏幕必要表现相应的内容页 。
  
• 切换指定页签必要使用TabsController，TabsController是Tabs组件的控制器，用于控制Tabs组件进行页签切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。
  
• 使用自界说导航栏时，在tabBar属性中传入对应的@Builder，并传入相应的参数。
  

1、代码

tabsPage.ets

1. import {Cate} from "./tabs/cate"import {Cart} from "./tabs/cart"import {Msg} from "./tabs/msg"import {User} from "./tabs/user"@Entry@Componentstruct TabsPage {  @State currentIndex: number = 0  private tabsController: TabsController = new TabsController()  @Builder TabBuilder(title:string,targetIndex:number,normalImg:Resource,selectedImg:Resource){    Column(){      Image(this.currentIndex==targetIndex?selectedImg:normalImg)        .width(28)        .height(28)      Text(title)        .fontSize(14)        .margin({top:4})        .fontColor(this.currentIndex==targetIndex?'#45C461':'#999999')    }    .backgroundColor("#ffffff")    .width('100%')    .height(60)    .justifyContent(FlexAlign.Center)    .onClick(()=>{      this.currentIndex=targetIndex      this.tabsController.changeIndex(this.currentIndex)    })  }  build() {    Column() {      Tabs({barPosition:BarPosition.End,controller:this.tabsController,index:0}){        TabContent()
2. {          Cate()        }.tabBar(this.TabBuilder('分类',0,$r("app.media.tabs_1_off"),$r("app.media.tabs_1_on")))        TabContent()
3. {          Cart()        }.tabBar(this.TabBuilder('购物车',1,$r("app.media.tabs_2_off"),$r("app.media.tabs_2_on")))        TabContent()
4. {          Msg()        }.tabBar(this.TabBuilder('消息',2,$r("app.media.tabs_3_off"),$r("app.media.tabs_3_on")))        TabContent()
5. {          User()        }.tabBar(this.TabBuilder('我的',3,$r("app.media.tabs_4_off"),$r("app.media.tabs_4_on")))      }      .scrollable(false)//去掉左右滑动的效果      .animationDuration(0)//去掉左右滑动的动画    }    .backgroundColor("#eeeeee")    .width('100%')    .height('100%')  }}

复制代码

tabs/cart.ets

1. @Component
3. export struct Cart {
4.   build(){
5.     Text("购物车")
6.   }
7. }

复制代码

其他页面内容都一样，自行编写。
2、效果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。