HarmonyOS第一课06：Tabs组件的使用

文章索引

基础布局

Tabs() {
  TabContent() {
    Text('首页的内容').fontSize(30)
  }
  .tabBar('首页')

  TabContent() {
    Text('推荐的内容').fontSize(30)
  }
  .tabBar('推荐')

  TabContent() {
    Text('发现的内容').fontSize(30)
  }
  .tabBar('发现')
  
  TabContent() {
    Text('我的内容').fontSize(30)
  }
  .tabBar("我的")
}

Tabs() {

TabContent() {

Text('首页的内容').fontSize(30)

}

.tabBar('首页')

TabContent() {

Text('推荐的内容').fontSize(30)

}

.tabBar('推荐')

TabContent() {

Text('发现的内容').fontSize(30)

}

.tabBar('发现')

TabContent() {

Text('我的内容').fontSize(30)

}

.tabBar("我的")

}

底部导航

Tabs({ barPosition: BarPosition.End }) {
  // TabContent的内容：首页、发现、推荐、我的
  ...
}

Tabs({ barPosition: BarPosition.End }) {

// TabContent的内容：首页、发现、推荐、我的

...

}

顶部导航

Tabs({ barPosition: BarPosition.Start }) {
  // TabContent的内容:关注、视频、游戏、数码、科技、体育、影视
  ...
}

Tabs({ barPosition: BarPosition.Start }) {

// TabContent的内容:关注、视频、游戏、数码、科技、体育、影视

...

}

侧边导航

Tabs({ barPosition: BarPosition.Start }) {
  // TabContent的内容:首页、发现、推荐、我的
  ...
}
.vertical(true)
.barWidth(100)
.barHeight(200)

Tabs({ barPosition: BarPosition.Start }) {

// TabContent的内容:首页、发现、推荐、我的

...

}

.vertical(true)

.barWidth(100)

.barHeight(200)

vertical为false时，tabbar的宽度默认为撑满屏幕的宽度，需要设置barWidth为合适值。
vertical为true时，tabbar的高度默认为实际内容的高度，需要设置barHeight为合适值。

限制导航栏的滑动切换

控制滑动切换的属性为scrollable，默认值为true，表示可以滑动，若要限制滑动切换页签则需要设置为false。

Tabs({ barPosition: BarPosition.End }) {
  TabContent(){
    Column(){
      Tabs(){
        // 顶部导航栏内容
        ...
      }
    }
    .backgroundColor('#ff08a8f1')
    .width('100%')
  }
  .tabBar('首页')

  // 其他TabContent内容：发现、推荐、我的
  ...
}
.scrollable(false)

Tabs({ barPosition: BarPosition.End }) {

TabContent(){

Column(){

Tabs(){

// 顶部导航栏内容

...

}

.backgroundColor('#ff08a8f1')

.width('100%')

}

.tabBar('首页')

// 其他TabContent内容：发现、推荐、我的

...

}

.scrollable(false)

固定导航栏

Tabs的barMode属性用于控制导航栏是否可以滚动，默认值为BarMode.Fixed。

Tabs({ barPosition: BarPosition.End }) {
  // TabContent的内容：首页、发现、推荐、我的
  ...
}
.barMode(BarMode.Fixed)

Tabs({ barPosition: BarPosition.End }) {

// TabContent的内容：首页、发现、推荐、我的

...

}

.barMode(BarMode.Fixed)

滚动导航栏

Tabs({ barPosition: BarPosition.Start }) {
  // TabContent的内容：关注、视频、游戏、数码、科技、体育、影视、人文、艺术、自然、军事
  ...
}
.barMode(BarMode.Scrollable)

Tabs({ barPosition: BarPosition.Start }) {

// TabContent的内容：关注、视频、游戏、数码、科技、体育、影视、人文、艺术、自然、军事

...

}

.barMode(BarMode.Scrollable)

自定义导航栏

// 声明tabBuilder的自定义函数组件
@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)
}

// 声明tabBuilder的自定义函数组件

@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)

}

在TabContent对应tabBar属性中传入自定义函数组件，并传递相应的参数。

TabContent() {
  Column(){
    Text('我的内容')  
  }
  .width('100%')
  .height('100%')
  .backgroundColor('#007DFF')
}
.tabBar(this.tabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))

TabContent() {

Column(){

Text('我的内容')

}

.width('100%')

.height('100%')

.backgroundColor('#007DFF')

}

.tabBar(this.tabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))

切换至指定页签

使用Tabs提供的onChange事件方法，监听索引index的变化，并将当前活跃的index值传递给currentIndex，实现页签的切换。

@Entry
@Component
struct Index {
  @State currentIndex: number = 2

  @Builder
  tabBuilder(title: string, targetIndex: number) {
    Column(){
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
  }

  build() {
    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: number) => {
      this.currentIndex = index
    })
  }
}

@Entry

@Component

struct Index {

@State currentIndex: number = 2

@Builder

tabBuilder(title: string, targetIndex: number) {

Column(){

Text(title)

.fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')

}

build() {

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: number) => {

this.currentIndex = index

})

}

使用TabsController

@Entry
@Component
struct Index {
  @State currentIndex: number = 2
  private controller: TabsController = new TabsController()

  @Builder
  tabBuilder(title: string, targetIndex: number) {
    Column() {
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
  }

  build() {
    Column() {

      Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Text('首页内容')
        }
        .tabBar(this.tabBuilder('首页', 0))

        TabContent() {
          Text('推荐内容')
        }
        .tabBar(this.tabBuilder('推荐', 1))

        TabContent() {
          Text('发现内容')
        }
        .tabBar(this.tabBuilder('发现', 2))

        TabContent() {
          Text('我的内容')
        }
        .tabBar(this.tabBuilder('我的', 3))
      }
      .height(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })

      Button('动态修改index')
        .onClick(() => {
          this.currentIndex = (this.currentIndex + 1) % 4
        })
      Button('changeIndex')
        .onClick(() => {
          let index = (this.currentIndex + 1) % 4
          this.controller.changeIndex(index)
        })

    }
  }
}

@Entry

@Component

struct Index {

@State currentIndex: number = 2

private controller: TabsController = new TabsController()

@Builder

tabBuilder(title: string, targetIndex: number) {

Column() {

Text(title)

.fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')

}

build() {

Column() {

Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {

TabContent() {

Text('首页内容')

}

.tabBar(this.tabBuilder('首页', 0))

TabContent() {

Text('推荐内容')

}

.tabBar(this.tabBuilder('推荐', 1))

TabContent() {

Text('发现内容')

}

.tabBar(this.tabBuilder('发现', 2))

TabContent() {

Text('我的内容')

}

.tabBar(this.tabBuilder('我的', 3))

}

.height(400)

.onChange((index: number) => {

this.currentIndex = index

})

Button('动态修改index')

.onClick(() => {

this.currentIndex = (this.currentIndex + 1) % 4

})

Button('changeIndex')

.onClick(() => {

let index = (this.currentIndex + 1) % 4

this.controller.changeIndex(index)

})

}

通过Tabs组件的onContentWillChange接口，设置自定义拦截回调函数。拦截回调函数在下一个页面即将展示时被调用，如果回调返回true，新页面可以展示；如果回调返回false，新页面不会展示，仍显示原来页面。

Tabs({ barPosition: BarPosition.End, controller: this.controller, index: this.currentIndex }) {...}
.onContentWillChange((currentIndex, comingIndex) => {
  if (comingIndex == 2) {
    return false
  }
  return true
})

Tabs({ barPosition: BarPosition.End, controller: this.controller, index: this.currentIndex }) {...}

.onContentWillChange((currentIndex, comingIndex) => {

if (comingIndex == 2) {

return false

}

return true

})

官网地址

https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101717497640610394