鸿蒙tabbar ArkTS

鸿蒙tabbar ArkTS

做了仿照现在应用的做了一个tabbar。

官方文档地址
参考文档

tabbar

其中有个比较重要的点是,对image资源的引用问题。

资源相关说明

图片是resources目录下的base目录下的。

media目录下的图片的资源不能添加文件夹,只能是文件,而且文件的命名规则是只能包含字母大小写和下划线。

另外{资源引用的方式](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-types-0000001477981241-V3)

要求资源定义的内容必须在编码阶段确定,中间不能更改,因此不能增加if之类的判断,只能把整个资源引用当做参数传递进去。

实现代码如下:

javascript 复制代码
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State selectedIndex: number = 0

  @Builder TabBuider(index: number, name: string, selectedImage: Resource, normalImage: Resource) {
    Column() {
      if ( this.selectedIndex == index) {
        Image(selectedImage)
          .objectFit(ImageFit.Contain)
          .width(24)
          .height(24)
          .margin({bottom: '4lpx'})
      } else {
        Image(normalImage)
          .objectFit(ImageFit.Contain)
          .width(24)
          .height(24)
          .margin({bottom: '4lpx'})
      }

      Text(name)
        .fontSize(16)
    }
    .border({
      width: {top: '2lpx'},
      color: '#efefef',
      style: BorderStyle.Solid
    })
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Tabs({barPosition: BarPosition.End}) {
      TabContent() {
        Text(this.message)
      }
      .tabBar(this.TabBuider(0, "首页", $r('app.media.tabbar_home_selected'), $r('app.media.tabbar_home')))

      TabContent() {
        Text(this.message)
      }
      .tabBar(this.TabBuider(1, "数据", $r('app.media.tabbar_data_selected'), $r('app.media.tabbar_data')))

      TabContent() {
        Text(this.message)
      }
      .tabBar(this.TabBuider(2, "我的", $r('app.media.tabbar_mine_selected'), $r('app.media.tabbar_mine')))
    }.onChange(index=>{
      this.selectedIndex = index
    })
  }
}
相关推荐
SuperHeroWu78 小时前
【HarmonyOS】元服务入门详解 (一)
华为·harmonyos·鸿蒙·元服务·卡片·免安装
Georgewu9 小时前
【HarmonyOS】ArkUI-X 跨平台框架入门详解(一)
harmonyos
SuperHeroWu79 小时前
【HarmonyOS】元服务概念详解
华为·harmonyos·鸿蒙·概念·元服务·详解
Georgewu9 小时前
【HarmonyOS】ArkUI-X一套代码跑多端的跨平台方案概念详解
harmonyos
ins_lizhiming13 小时前
【人工智能】华为昇腾NPU-Vllm Ascend部署及镜像制作
人工智能·pytorch·华为·语言模型·自然语言处理
zhanshuo13 小时前
HarmonyOS NEXT 智能场景识别实战:让设备主动思考的关键技术揭秘
harmonyos
zhanshuo17 小时前
HarmonyOS分布式能力全解析:手机一放下,音箱自动响起!
harmonyos
zhanshuo17 小时前
基于HarmonyOS的智能灯光控制系统设计:从定时触发到动作联动全流程实战
harmonyos
weixin_5412999418 小时前
鸿蒙应用开发: 鸿蒙项目中使用私有 npm 插件的完整流程
华为·npm·harmonyos·鸿蒙
Georgewu19 小时前
【HarmonyOS】元服务概念详解
harmonyos