鸿蒙next组件 tabs的使用

知识点： barPosition:BarPosition.End 在底部，BarPosition.Start在顶部， 左右侧导航需要配合tabs的vertical(true)使用

import { TabBarItem, tabBarItemList } from '../viewmodel/Contsant'

@Entry
@ComponentV2
export struct Demo {
  @Local currentIndex: number = 0;
  tabBarItemList: TabBarItem[] = tabBarItemList;
  private controller: TabsController = new TabsController();
  build() {
    Column() {
        //1
      Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Text('这是内容1')
        }.tabBar(this.tabBuilder(0))

        TabContent() {
          Text('这是内容2')
        }.tabBar(this.tabBuilder(1))

        TabContent() {
          Text('这是内容3')
        }.tabBar(this.tabBuilder(2))
      }.onChange((selectIndex) => {
        this.currentIndex = selectIndex
      }).scrollable(false).animationDuration(0).height('100%')
        // .vertical(true)
    }
  }


  @Builder
  tabBuilder(index: number) {
    Column() {
      Image(this.tabBarItemList[index].icon)
        .fillColor(this.currentIndex == index ? Color.Orange : Color.Black)
        .size({ width: 20, height: 20 })
      Text(this.tabBarItemList[index].title)
        .padding(2)
        .fontColor(this.currentIndex === index ? Color.Orange : Color.Black)
    }.margin({top:8})
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

Contsant.ets

export class TabBarItem {
  index: number = 0;
  title: string = '';
  icon: Resource = $r('app.media.app_icon'); //选中的图片
  // icon_selected: Resource = $r('app.media.icon_home') //选中的图片
  // icon_normal: Resource = $r("app.media.ic_unsel_index")  //默认图片
}

export const tabBarItemList: TabBarItem[] = [
  {
    index: 0,
    title: 'tab',
    icon: $r('app.media.app_icon'),
  },
  {
    index: 1,
    title: 'tab',
    icon: $r("app.media.app_icon"),
  },

  {
    index: 2,
    title: 'tab',
    icon: $r('app.media.app_icon'),
  },
  {
    index: 3,
    title: 'tab',
    icon: $r('app.media.app_icon'),
  },
  {
    index: 4,
    title: 'tab',
    icon: $r('app.media.app_icon'),
  },
]