学习笔记（十）：ArkUi-选项卡 (Tabs)

Tabs组件可以在一个页面内快速实现视图内容的切换。

Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。

TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。

 

基本结构：

如下，定义三个tab

// tabs使用示例
@Entry
@Component
struct TabExample1 {
  @State message: string = 'Hello World'

  build() {
    Tabs(){
      // 首页tab
      TabContent(){
        Column(){
          Text('首页UI')
            .height('40%')
        }.height('100%')
      }
      .tabBar('首页')
      // 发现tab
      TabContent(){
        Column(){
          Text('发现UI')
            .height('40%')
        }.height('100%')
      }
      .tabBar('发现')
      // 更多tab
      TabContent(){
        Column(){
          Text('更多UI')
            .height('40%')
        }.height('100%')
      }
      .tabBar('更多')
    }
  }
}

 

 

 

1、barPosition:

导航栏位置使用Tabs的barPosition参数进行设置。

默认情况下，导航栏位于顶部，此时，barPosition为BarPosition.Start。

设置为底部导航时，需要将barPosition设置为BarPosition.End。

Tabs({barPosition:BarPosition.End}){
}

 

 

2、vertical

设置是否侧边导航栏，默认false

 

3、scrollable

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

如支持底部导航+顶部导航组合的情况下，底部导航栏的滑动效果与顶部导航出现冲突，此时需要限制底部导航的滑动，避免引起不好的用户体验。

举例，底部三个tab为 ‘首页’，‘发现’，‘更多’，其中‘发现’tab的Ui又分n多个tab,此时需要实现底部三个tab固定，'发现'模版tab支持滑动

// tabs使用示例
@Entry
@Component
struct TabExample1 {
  @State message: string = 'Hello World'

  build() {
    Tabs({barPosition:BarPosition.End}){
      // 首页tab
      TabContent(){
        Column(){
          Text('首页UI')
            .height('40%')
        }.height('100%')
      }
      .tabBar('首页')
      // 发现tab
      TabContent(){
        Tabs({barPosition:BarPosition.Start}){
          TabContent(){
          }.tabBar('熊猫')
          TabContent(){
          }.tabBar('河马')
          TabContent(){
          }.tabBar('海豚')
        }
      }
      .tabBar('发现')
      // 更多tab
      TabContent(){
        Column(){
          Text('更多UI')
            .height('40%')
        }.height('100%')
      }
      .tabBar('更多')
    }
    .scrollable(false) // 限制外层tabs滑动
  }
}

 

4、barMode

用于控制导航栏是否可以滚动，默认值为BarMode.Fixed 固定导航栏， 可选值BarMode.Scrollable 滚动导航栏

TabContent(){
        Tabs({barPosition:BarPosition.Start}){
          TabContent(){
          }.tabBar('熊猫')
          TabContent(){
          }.tabBar('河马')
          TabContent(){
          }.tabBar('海豚')
        }
        .barMode(BarMode.Scrollable)
      }

 

 

实现自定义导航栏

实际项目中，对tabs都有一定的样式修改，则系统默认显示文本的样式不适用，需要自定义

则需要实现一个自定义函数组件，设置给tabBar

// tabs使用示例
@Entry
@Component
struct TabExample1 {
  @State currentIndex: number = 0;// 当前tab位置
  /**
   * 自定义函数组件
   * @param title  tab内容
   * @param targetIndex  点击的tab坐标
　 * 若点击的位置和当前选中的位置一直，则红色字体，否则绿色字体
   */
  @Builder customTab(title:string,targetIndex:number){
    Column(){
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#ff0000' : '#00ff00')
    }
    .width('100%')
    .height(40)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Tabs({barPosition:BarPosition.End}){
      // 首页tab
      TabContent(){
        Column(){
          Text('首页UI')
            .height('40%')
        }.height('100%')
      }
      .tabBar(this.customTab('首页',0))
      // 发现tab
      TabContent(){
        Column(){
          Text('发现UI')
            .height('40%')
        }.height('100%')
      }
      .tabBar(this.customTab('发现',1))
      // 更多tab
      TabContent(){
        Column(){
          Text('更多UI')
            .height('40%')
        }.height('100%')
      }
      .tabBar(this.customTab('更多',2))
    }
    .animationDuration(0)
    .onChange((index:number)=>{
　　　 // 点击事件，改变当前点击的位置
      this.currentIndex = index
    })
  }
}

 

 

切换到指定tab页

1、动态设置currentIndex值

Button('切换到第发现tab')
        .onClick(()=>{
          this.currentIndex = 1
        })

 

2、使用TabsController

mTabController: TabsController = new TabsController()


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

Button('使用controller切换到第发现tab')
        .onClick(()=>{
          this.mTabController.changeIndex(1)
        })

 

完整代码:

// tabs使用示例
@Entry
@Component
struct TabExample1 {
  @State currentIndex: number = 0;// 当前tab位置
  mTabController: TabsController = new TabsController()
  /**
   * 自定义函数组件
   * @param title  tab内容
   * @param targetIndex  点击的tab坐标
   */
  @Builder customTab(title:string,targetIndex:number){
    Column(){
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#ff0000' : '#00ff00')
    }
    .width('100%')
    .height(40)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column(){
      Tabs({barPosition:BarPosition.End
      ,index: this.currentIndex
          ,controller:this.mTabController}){
        // 首页tab
        TabContent(){
          Column(){
            Text('首页UI')
              .height('40%')
          }.height('100%')
        }
        .tabBar(this.customTab('首页',0))
        // 发现tab
        TabContent(){
          Column(){
            Text('发现UI')
              .height('40%')
          }.height('100%')
        }
        .tabBar(this.customTab('发现',1))
        // 更多tab
        TabContent(){
          Column(){
            Text('更多UI')
              .height('40%')
          }.height('100%')
        }
        .tabBar(this.customTab('更多',2))
      }
      .height('70%')
      .animationDuration(0)
      .onChange((index:number)=>{
        this.currentIndex = index
        console.log('点击位置'+this.currentIndex)
      })
      Button('切换到第发现tab')
        .onClick(()=>{
          this.currentIndex = 1
        })
      Button('使用controller切换到第发现tab')
        .onClick(()=>{
          this.mTabController.changeIndex(1)
        })
    }
  }
}