HarmonyOS ArkTS [ Tabs ]

HarmonyOS 是一款面向全场景智慧生活方式的分布式操作系统。在传统的单设备系统能力的基础上，HarmonyOS 提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持手机、平板、PC、智慧屏、智能穿戴、智能音箱、车机、耳机、AR/VR眼镜等多种终端设备。

工具

模拟器 [ 问题很多 '.' ]

预览器

本地模拟器

远程模拟器

坑:

采用模拟器很多人遇到打不开 或者 停留在手机启动页面 此时run是会报错的 需要等到模拟器完全启动打开 呈现手机界面时候

参数：

参数名	参数类型	必填	参数描述
barPosition	BarPosition	否	设置Tabs的页签位置。默认值：BarPosition.Start
index	number	否	设置当前显示页签的索引。默认值：0**说明：**设置为小于0的值时按默认值显示。可选值为[0, TabContent子节点数量-1]。设置不同值时，默认生效切换动效，可以设置animationDuration为0关闭动画。
controller	TabsController	否	设置Tabs控制器。

BarPosition枚举说明

名称	描述
Start	vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。
End	vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
vertical	boolean	设置为false是为横向Tabs，设置为true时为纵向Tabs。默认值：false
scrollable	boolean	设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。默认值：true
barMode	BarMode	TabBar布局模式，具体描述见BarMode枚举说明。默认值：BarMode.Fixed
barWidth	number	Length8+	TabBar的宽度值。默认值：未设置带样式的TabBar且vertical属性为false时，默认值为Tabs的宽度。未设置带样式的TabBar且vertical属性为true时，默认值为56vp。设置SubTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。设置SubTabbarStyle样式且vertical属性为true时，默认值为56vp。设置BottomTabbarStyle样式且vertical属性为true时，默认值为96vp。设置BottomTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。**说明：**设置为小于0或大于Tabs宽度值时，按默认值显示。
barHeight	number	Length8+	TabBar的高度值。默认值：未设置带样式的TabBar且vertical属性为false时，默认值为56vp。未设置带样式的TabBar且vertical属性为true时，默认值为Tabs的高度。设置SubTabbarStyle样式且vertical属性为false时，默认值为56vp。设置SubTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。设置BottomTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。设置BottomTabbarStyle样式且vertical属性为false时，默认值为56vp。**说明：**设置为小于0或大于Tabs高度值时，按默认值显示。
animationDuration	number	点击TabBar页签切换TabContent的动画时长。不设置时，点击TabBar页签切换TabContent无动画。默认值：300**说明：**该参数不支持百分比设置；设置为小于0时，按默认值300ms显示。

BarMode枚举说明

名称	描述
Scrollable	每一个TabBar均使用实际布局宽度，超过总长度（横向Tabs的barWidth，纵向Tabs的barHeight）后可滑动。
Fixed	所有TabBar平均分配barWidth宽度（纵向时平均分配barHeight高度）。

事件

除支持通用事件外，还支持以下事件：

名称	功能描述
onChange(event: (index: number) => void)	Tab页签切换后触发的事件。- index：当前显示的index索引，索引从0开始计算。触发该事件的条件：1、TabContent支持滑动时，组件触发滑动时触发。2、通过控制器API接口调用。3、通过状态变量构造的属性值进行修改。4、通过页签处点击触发。

TabsController

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

导入对象

controller: TabsController = new TabsController()

changeIndex

changeIndex(value: number): void

控制Tabs切换到指定页签。

参数：

参数名	参数类型	必填	参数描述
value	number	是	页签在Tabs里的索引值，索引值从0开始。**说明：**设置小于0或大于最大数量的值时，该事件失效。

import Home from './Home'
import Mine from './Mine'
@Entry
@Component
struct Index {
  @State currentTabIndex: number = 0;
  private controller: TabsController = new TabsController()

  @Builder CustomTabBar(title: string, index: number, selectImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentTabIndex === index ? selectImg : normalImg)
        .objectFit(ImageFit.Contain)
        .width(30)
      Text(title).fontColor(this.currentTabIndex === index ? '#1698ce' : '#8a8a8a')
    }
    .onClick(() => {
      this.currentTabIndex = index
      this.controller.changeIndex(index)
    })
  }

  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
      TabContent() {
        Home()
      }.tabBar(this.CustomTabBar('首页', 0, $r("app.media.homes"), $r('app.media.home')))

      TabContent() {
        Mine()
      }.tabBar(this.CustomTabBar('我的', 1, $r('app.media.mines'), $r("app.media.mine")))
    }
    .vertical(false)
    .barMode(BarMode.Fixed)
    .barWidth('100%')
    .barHeight(56)
    .onChange((index:number)=>{
      this.currentTabIndex = index
    })
  }
}