【鸿蒙学习笔记】构建布局・选项卡 (Tabs)

官方文档：选项卡 (Tabs)

底部导航

@Entry
@Component
struct Bujv_tabs {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }.tabBar('首页')

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

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

        TabContent() {
          Text('我的内容').fontSize(30)
        }.tabBar("我的")
      }
      .barMode(BarMode.Fixed)
    }
    .width('100%')
  }
}

顶部导航

Tabs({ barPosition: BarPosition.Start })

侧边导航

Tabs({ barPosition: BarPosition.Start }) {

}
.vertical(true)
.barWidth(100)
.barHeight('100%')

限制导航栏的滑动切换

.scrollable(false)

固定导航栏・可滚动导航栏

.barMode(BarMode.Fixed) // 固定导航栏
.barMode(BarMode.Scrollable) // 可滚动导航栏

自定义导航栏

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

  @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 ? Color.Red : Color.Black)
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start }) {
        TabContent() {
          Column() {
            Text('我的内容')
          }.width('100%').height('100%').backgroundColor(Color.Pink)
        }
        .tabBar(this.tabBuilder('我的', 0, $r('app.media.fuel'), $r('app.media.foods')))
      }
    }
    .width('100%')
  }
}

切换至指定页签

在使用了自定义导航栏后，默认的Tabs仅实现滑动内容页和点击页签时内容页的切换逻辑，页签切换逻辑需要自行实现。

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

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

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }.tabBar(this.tabBuilder('首页', 0))

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

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

        TabContent() {
          Text('我的内容').fontSize(30)
        }.tabBar(this.tabBuilder("我的", 3))
      }
      .animationDuration(2)
      .backgroundColor('#F1F3F5')
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }
    .width('100%')
  }
}

@Entry
@Component
struct Bujv_tabs {
  @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('首页的内容').fontSize(30)
        }.tabBar(this.tabBuilder('首页', 0))

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

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

        TabContent() {
          Text('我的内容').fontSize(30)
        }.tabBar(this.tabBuilder("我的", 3))
      }
      .animationDuration(2)
      .backgroundColor('#F1F3F5')
      .height(600)
      .onChange((index: number) => {
        this.currentIndex = index
      })


      Button('动态修改index').width('50%').margin({ top: 20 })
        .onClick(() => {
          this.currentIndex = (this.currentIndex + 1) % 4
        })

      Button('changeIndex').width('50%').margin({ top: 20 })
        .onClick(() => {
          let index = (this.currentIndex + 1) % 4
          this.controller.changeIndex(index)
        })
    }
    .width('100%')
  }
}