关于ArkTs的tabs选项卡

基本布局

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

经常用的模式有三种：
底部导航

顶部导航

侧边导航

底部导航

底部导航是应用中最常见的一种导航方式。底部导航一般作为应用的主导航形式存在，其作用是将用户关心的内容按照功能进行分类，迎合用户使用习惯，方便在不同模块间的内容切换。

导航栏位置使用Tabs的barPosition参数进行设置。默认情况下，导航栏位于顶部，此时，barPosition为BarPosition.Start。设置为底部导航时，需要将barPosition设置为BarPosition.End。

具体的代码实际如下：

Tabs({index:this.currentIndex,barPosition:BarPosition.End}){
  TabContent(){
    HomePage()
  }.tabBar(this.TabComponent(mainViewModel.tabList[0]))
  TabContent(){
    CategoryPage()
  }.tabBar(this.TabComponent(mainViewModel.tabList[1]))
  TabContent(){
    ShopCarPage()
  }.tabBar(this.TabComponent(mainViewModel.tabList[2]))
  TabContent(){
    MinePage()
  }.tabBar(this.TabComponent(mainViewModel.tabList[3]))
}
.barWidth('100%')

这串代码的效果图为：

自定义导航栏

对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式

通过@Builder来设计自定义导航栏的项目，其中的各种参数可定义在一个新的项目中

内部的参数不一定要赋予初始值，也可以设定为空，之后使用前完成数值填充：

import ToolBarEntity from './ToolBarEntity'

export class MainViewModel {
  tabList: ToolBarEntity[] = [{
    index: 0,
    text: $r('app.string.nav_home'),
    icon_normal: $r('app.media.ic_home_normal'),
    icon_selected: $r('app.media.ic_home_focus')
  },
    {
      index: 1,
      text: $r('app.string.nav_new'),
      icon_normal: $r('app.media.ic_product_normal'),
      icon_selected: $r('app.media.ic_product_focus')
    },
    {
      index: 2,
      text: $r('app.string.nav_shopping_cart'),
      icon_normal: $r('app.media.ic_cart_normal'),
      icon_selected: $r('app.media.ic_cart_focus')
    },
    {
      index: 3,
      text: $r('app.string.nav_mine'),
      icon_normal: $r('app.media.ic_personal_normal'),
      icon_selected: $r('app.media.ic_personal_focus')
    }]
}
let mainViewModel = new MainViewModel()
export default mainViewModel as MainViewModel

通过导入之前定义的参数，完成一个列表，之后通过列表完成自定义导航栏，具体如下：

之后就能在TabContent里添加导航效果了。

注：也可以通过这个完成添加页面到tabs中的效果，不过被添加的页面要注意删除@Entry，并且在main_pages中将原页面的router链接给删除，这样才能使用添加页面