鸿蒙学习 - tab 的使用

鸿蒙学习 - tab 的使用

@Entry
@Component
struct Index {

  @State currentIndex: number = 0
  private tabController: TabsController = new TabsController()

   // 自定义bar样式的插槽
  @Builder
  barItem(text: string, index: number) {
    Column({space:3}){
      Image($r('app.media.icon')).width(25).height(25)
        .renderMode(index === this.currentIndex ? ImageRenderMode.Original : ImageRenderMode.Template)
      Text(text).fontSize(20).width('100%').textAlign(TextAlign.Center)
    }.onClick(() => {
      this.currentIndex = index
     this.tabController.changeIndex(index)
    })
  }

  build() {
    Tabs({controller: this.tabController}){
     TabContent(){
       Text("shouye").fontSize(50)
     } .tabBar(this.barItem("首页", 0))
      TabContent(){
        MePage()
      } .tabBar(this.barItem("我的", 1))
    }.barPosition(BarPosition.End)
    .onChange((index) => {
      this.currentIndex = index
    })
  }
}

@Component
struct MePage {
  build() {
    Column(){
      Text("我的页面").fontSize(80).fontColor(Color.Red)
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
  }
}