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

官方文档:选项卡 (Tabs)

目录标题

底部导航

cpp 复制代码
@Entry
@Component
struct Bujv_tabs {
  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("我的")
      }
    }
    .width('100%')
  }
}

顶部导航

cpp 复制代码
Tabs({ barPosition: BarPosition.Start })

侧边导航

cpp 复制代码
Tabs({ barPosition: BarPosition.Start }) {

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

限制导航栏的滑动切换

cpp 复制代码
.scrollable(false)

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

cpp 复制代码
.barMode(BarMode.Fixed) // 固定导航栏
.barMode(BarMode.Scrollable) // 可滚动导航栏

自定义导航栏

cpp 复制代码
@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仅实现滑动内容页和点击页签时内容页的切换逻辑,页签的切换逻辑需要自行实现。

cpp 复制代码
@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%')
  }
}

TabsController是Tabs组件的控制器,用于控制Tabs组件进行内容页切换。

cpp 复制代码
@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%')
  }
}
相关推荐
循环过三天8 分钟前
3-1 PID算法改进(积分部分)
笔记·stm32·单片机·学习·算法·pid
HMS Core31 分钟前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡32 分钟前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
伍哥的传说35 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
之歆35 分钟前
Python-封装和解构-set及操作-字典及操作-解析式生成器-内建函数迭代器-学习笔记
笔记·python·学习
幽络源小助理41 分钟前
SpringBoot基于JavaWeb的城乡居民基本医疗信息管理系统
java·spring boot·学习
虾球xz2 小时前
CppCon 2018 学习:EFFECTIVE REPLACEMENT OF DYNAMIC POLYMORPHISM WITH std::variant
开发语言·c++·学习
Chef_Chen2 小时前
从0开始学习R语言--Day38--辛普森多样性指数
学习
Allen_LVyingbo2 小时前
Python常用医疗AI库以及案例解析(2025年版、上)
开发语言·人工智能·python·学习·健康医疗
DKPT2 小时前
Java组合模式实现方式与测试方法
java·笔记·学习·设计模式·组合模式