ArkTS系列—自定义tabs

概述

Tabs页签

页签由两个部分构成：内容区TabContent（内容部分）和TabBar（页签部分）

常用属性

barPosition：设置页签位置，Start（顶部导航），End（底部导航）

barWidth：页签宽度

barHeight：页签高度

scrollable：是否可以滑动

代码样例

说明

自定义tab的实现一共有两点需要注意：

1. 状态的获取

如何获取到用户当前到底在点击哪个页签呢？我们为每个页签设置一个数字，并利用onChange函数为@State声明的currentIndex标志变量赋值。

2. 状态的切换

对于用户点击到某个页签时，应该设置对应的状态变化加以区分，所以此处采用@Builder来自定义对应的函数，当用户点击对应的页签时，将icon和字体的颜色改变，从而达到更好的交互效果。

代码

主页

import Code from "../views/Code";
import View from "../views/View";
import Api from "../views/Api";
import Point from "../views/Point";
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State currentIndex: number = 0;

  // 装饰器@Builder用于自定义函数
  @Builder tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
          View()
      }
      .tabBar(this.tabBuilder('概览', 0, $r('app.media.views'), $r('app.media.view')))

      TabContent() {
        Point()
      }
      .tabBar(this.tabBuilder('开发指南', 1, $r('app.media.points'), $r('app.media.point')))

      TabContent() {
        Code()
      }
      .tabBar(this.tabBuilder('示例代码', 2, $r('app.media.codes'), $r('app.media.code')))

      TabContent() {
        Api()
      }
      .tabBar(this.tabBuilder('API参考', 3, $r('app.media.apis'), $r('app.media.api')))

    }
    .animationDuration(0)
    .backgroundColor('#F1F3F5')
    .onChange((index: number) => {
      this.currentIndex = index

    })
  }

}

相关组件

@Component
export default struct Api{
  build() {
    Column() {
      Text('API参考')
    }
    .width('100%')
    .height('100%')
  }
}