【鸿蒙学习笔记】构建布局・选项卡 (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%')
  }
}
相关推荐
岑梓铭22 分钟前
计算机网络第九章——数据链路层《局域网》
网络·笔记·计算机网络·考研·408
HMS Core29 分钟前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
华为·harmonyos
njsgcs37 分钟前
cad_recognition 笔记
笔记
运营黑客1 小时前
Grok 4,来了。
人工智能·学习·ai·aigc
LIN-JUN-WEI2 小时前
[ESP32]VSCODE+ESP-IDF环境搭建及blink例程尝试(win10 win11均配置成功)
c语言·开发语言·ide·vscode·单片机·学习·编辑器
塞尔维亚大汉3 小时前
鸿蒙内核源码分析(文件句柄篇) | 你为什么叫句柄?
源码·harmonyos
别说我什么都不会3 小时前
【OpenHarmony】鸿蒙开发之FlexSearch
harmonyos
HXR_plume3 小时前
【计算机网络】王道考研笔记整理(1)计算机网络体系结构
网络·笔记·计算机网络
笑鸿的学习笔记3 小时前
qt-C++语法笔记之Stretch与Spacer的关系分析
c++·笔记·qt
艾莉丝努力练剑4 小时前
【C语言】学习过程教训与经验杂谈:思想准备、知识回顾(三)
c语言·开发语言·数据结构·学习·算法