鸿蒙开发系列教程(十四)--组件导航:Tabs 导航

Tabs 导航

Tabs组件的页面组成包含两个部分,分别是TabContent和TabBar。TabContent是内容页,TabBar是导航页签栏

每一个TabContent对应的内容需要有一个页签,可以通过TabContent的tabBar属性进行配置

设置多个内容时,需在Tabs内按照顺序放置。

复制代码
Tabs() {
  TabContent() {
    Text('首页的内容').fontSize(30)
  }
  .tabBar('首页')

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

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

  TabContent() {
    Text('我的内容').fontSize(30)
  }
  .tabBar("我的")
}

Tabs参数

底部导航:Tabs({ barPosition: BarPosition.End }) {}

顶部导航: Tabs({ barPosition: BarPosition.Start }){}

侧边导航:Tabs({ barPosition: BarPosition.Start }) {}

控制滑动**

切换的属性为scrollable,属性为 true false

Tabs({ barPosition: BarPosition.End }) {

...

}.scrollable(false)

导航栏滚动控制

固定导航栏:Tabs({ barPosition: BarPosition.End }) { 。。。}.barMode(BarMode.Fixed)

滚动导航栏:Tabs({ barPosition: BarPosition.End }) { 。。。}.barMode(BarMode.Scrollable)

自定义导航栏

复制代码
@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 ? '#1698CE' : '#6B6B6B')
  }
  .width('100%')
  .height(50)
  .justifyContent(FlexAlign.Center)
}

调用:

复制代码
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
  TabContent(){
    ...
  }.tabBar(this.TabBuilder('首页',0))

  TabContent(){
    ...
  }.tabBar(this.TabBuilder('发现',1))

  TabContent(){
    ...
  }.tabBar(this.TabBuilder('推荐',2))

  TabContent(){
    ...
  }
  .tabBar(this.TabBuilder('我的',3))
}

自定义导航栏-内容切换

在不使用自定义导航栏时,系统默认的Tabs会实现切换逻辑。在使用了自定义导航栏后,切换页签的逻辑需要手动实现。即用户点击对应页签时,屏幕需要显示相应的内容页。

切换指定页签需要使用TabsController,TabsController是Tabs组件的控制器,用于控制Tabs组件进行页签切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。

复制代码
//创建控制器实例

private  aa: TabsController = new TabsController()

//导航索引变量

@State currentIndex:number = 0;

//自定义导航

@Builder TabBuilder(title: string, targetIndex: number) {
  Column() {
    Text(title) .fontColor(。。)
  }
  ...
  .onClick(() => {
    this.currentIndex = targetIndex;
    **this.aa.changeIndex(this.currentIndex);**
  })
}

调用

Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {

TabContent(){

...

}.tabBar(this.TabBuilder('首页',0))

TabContent(){

...

}.tabBar(this.TabBuilder('发现',1))

TabContent(){

...

}.tabBar(this.TabBuilder('推荐',2))

TabContent(){

...

}

.tabBar(this.TabBuilder('我的',3))

}

以上内容参考"官方文档"

相关推荐
liuhaikang2 小时前
【鸿蒙HarmonyOS Next App实战开发】视频提取音频
华为·音视频·harmonyos
爱笑的眼睛112 小时前
HarmonyOS应用上架流程详解
华为·harmonyos
zhanshuo1 天前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo1 天前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish7981 天前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw1 天前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
小徐不徐说2 天前
每日一算:华为-批萨分配问题
数据结构·c++·算法·leetcode·华为·动态规划·后端开发
搜狐技术产品小编20232 天前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos
zhanshuo2 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo2 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui