HarmonyOS-基礎之Tabs元件

1、Tabs的基本使用

@Entry
@Component
struct Index {
  private controller: TabsController = new TabsController();

  // 宣告週期函式
  aboutToAppear(){
    // 頁面載入 1s後 跳轉到商城
    setTimeout(() => {
      this.controller.changeIndex(1)
    },1000)
  }

  build() {
    // tabs元件
    Column() {
      /**
       * barPosition: BarPosition.End  設定tabBar的位置
       * controller: 控制器
       */
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Text('首頁')
        }.tabBar('首頁')

        TabContent() {
          Text('商城')
        }.tabBar({ icon: $r('app.media.icon') })

        TabContent() {
          Row({ space: 5 }) {
            Text('我的')
            Button('去首頁').onClick((event: ClickEvent) => {
              // 跳轉到指定索引TabContent
              this.controller.changeIndex(0)
            })
          }
        }.tabBar('我的')
      }
      // 設定是否排列
      // .vertical(true)
    }.width('100%')
    .padding(20)
  }
}

2、自定義Tabs

const tabCustomArr = [
  {
    id: 1,
    name: '首頁',
    icon: $r('app.media.avatar'),
    color: Color.Grey,
    activeColor: Color.Orange
  },
  {
    id: 2,
    name: '分類',
    icon: $r('app.media.icon'),
    color: Color.Grey,
    activeColor: Color.Green
  },
  {
    id: 3,
    name: '商城',
    icon: $r('app.media.pig'),
    color: Color.Grey,
    activeColor: Color.Red
  },
  {
    id: 4,
    name: '我的',
    icon: $r('app.media.avatar'),
    color: Color.Grey,
    activeColor: Color.Blue
  }
]

@Entry
@Component
struct CustomTabs {
  @State currentIndex: number = 0

  @Builder tabBuilder(index: number) {
    Column() {
      Image(tabCustomArr[index].icon).width(30).height(30)
      Text(tabCustomArr[index].name)
        .fontColor(this.isActive(index) ? tabCustomArr[index].activeColor : tabCustomArr[index].color)
    }
  }

  private isActive(index: number): boolean {
    return index === this.currentIndex
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Text('首頁')
        }.tabBar(this.tabBuilder(0))

        TabContent() {
          Text('分類')
        }.tabBar(this.tabBuilder(1))

        TabContent() {
          Text('商城')
        }.tabBar(this.tabBuilder(2))

        TabContent() {
          Text('我的')
        }.tabBar(this.tabBuilder(3))
      }.onChange((index) => {
        console.log(index + "")
        this.currentIndex = index
      })
    }.width('100%')
    .padding(20)
  }
}