【HarmonyOS 鸿蒙 黑马程序员 学习笔记 83.1】

选项卡 Tabs

通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
子组件
不支持自定义组件作为子组件， 仅可包含子组件TabContent， 以及渲染控制类型if/else和ForEach, 并且if/else和ForEach下也仅支持TabContent, 不支持自定义组件。
官方API说明 点击查看

基础用法 常用属性

Tabs({barPosition:BarPosition.End}){  //  调整位置 开始 或 结尾
      TabContent(){Text(`内容1`)}.tabBar('选项1').backgroundColor('#ccc')
      TabContent(){Text(`内容2`)}.tabBar('选项2').backgroundColor('#bbb')
      TabContent(){Text(`内容3`)}.tabBar('选项3').backgroundColor('#aaa')
    }.vertical(true)  //  是否水平显示  配合调整位置  上下左右都能到达
    .scrollable(true) //  是否可以滑动跳转选项卡
    .animationDuration(3000) //  切换动画时间  毫秒

自定义 TabBar

先建立绑定组件

@Builder tb1 (title : string, img : ResourceStr){
    Column(){
      Image(img).width(40)
      Text(title)
    }
  }

再调用

.tabBar(this.tb1(`选项1`,$r('app.media.1_2')))

高亮设置

先监听再设置

监听动作

.onChange((i:number)=>{}) //  监听滑动和点击
.onTabBarClick((i:number)=>{})  //  只监听点击事件

设置高亮

本质就是设置不同的渲染
所以要进行条件渲染

1. 建立动态渲染变量
2. 三元条件表达式

完整简易演示代码如下

@Entry
@Component
struct Index {
  @State jd1: string = ''
  @Builder tb1 (tbt2 : number, title : string, img : ResourceStr){
    Column(){
      Image(img).width(40)
      Text(title).fontSize(40)
      //  三元条件表达式 简洁的 IF
    }.backgroundColor(this.tbt1 == tbt2 ? '#aa0' : '#fff')  //  对比变量和自身编号(索引),进行渲染
  }
  @State tbt1 :number = 0  //  如果建立常规变量,则不会进行动态渲染

  build() {
    Tabs({barPosition:BarPosition.End}){  //  调整位置 开始 或 结尾
      TabContent(){Text(`内容1`)}
      .tabBar(this.tb1(0,`选项1`,$r('app.media.1_2')))
      .backgroundColor('#ccc')
      TabContent(){Text(`内容2`)}
      .tabBar(this.tb1(1,`选项2`,$r('app.media.2_2')))
      .backgroundColor('#bbb')
      TabContent(){Text(`内容3`)}
      .tabBar(this.tb1(2,`选项3`,$r('app.media.3_2')))
      .backgroundColor('#aaa')
    }.vertical(true)  //  是否水平显示  配合调整位置  上下左右都能到达
    .scrollable(true) //  是否可以滑动跳转选项卡
    .animationDuration(500) //  切换动画时间  毫秒
    .onChange((Index:number)=>{this.tbt1 = Index}) //  监听滑动和点击  把当前状态赋值给变量
    //.onTabBarClick((i:number)=>{})  //  只监听点击事件
  }
}