鸿蒙HarmonyOS应用开发：UI组件库-tabslayout

 简介

tabslayout 是一个UI组件库,主要用于导航的tabItem,可配置图片,文字,等基础属性,方便开发及扩展

安装

• ohpm install @cornflower/tabslayout

• 或者在模块的oh-package.json5中添加

  "dependencies": {
      "@cornflower/tabslayout": "1.0.2"
  }
  

支持参数

参数	类型	描述
name	string	tab名称
normalIcon	string Resource	默认tab图标
selectIcon	string Resource	选中tab图标
iconWidth	number	icon宽度 默认30vp
iconHeight	number	icon高度 默认30vp
normalColor	ResourceColor	默认文字颜色
selectColor	ResourceColor	选中文字颜色
normalTextSize	number string Resource	默认文字大小 默认16vp
selectTextSize	number string Resource	默认文字大小 默认16vp
showBadge	@Prop boolean	是否显示右上角消息 默认不显示
badgeTextSize	number string	右上角消息尺寸 默认6vp
badgeLargeSize	number string	右上角带文字消息尺寸 默认18vp
badgeColor	ResourceColor	右上角消息颜色 默认红色
badgeTextColor	ResourceColor	右上角消息文字颜色 默认白色
badgeTextSize	number string	右上角消息文字大小 默认10vp
message	string	右上角消息提示信息
tabHeight	Length	tab高度默认56vp
currentIndex	number	默认index
selectIndex	@Prop number	选中的index

使用

导入引用

import { TabComponent } from '@cornflower/tabslayout'

builder方式图标+文字

@Builder AddBuilder() {
  TabComponent({
    name: "首页",
    currentIndex: 0,
    selectIndex: this.currentIndex,
    normalIcon: $r("app.media.icon"),
    selectIcon: $r("app.media.icon"),
    showBadge: false,
    message:''
  }).width("100%").height(56)
}

builder纯文字

@Builder AddBuilder() {
  TabComponent({
    name: "首页",
    currentIndex: 0,
    selectIndex: this.currentIndex,
    showBadge: false,
    message:''
  }).width("100%").height(56)
}

例子

仿写抖音底部导航

@Preview
@Component
export struct DyTabContainer {
  @State selectIndex: number = 0
  @State showBadge: boolean = false
  private controller: TabsController = new TabsController()

  @Builder AddBuilder() {
    TabComponent({
      name: "",
      currentIndex: 2,
      selectIndex: this.selectIndex,
      normalIcon: $r("app.media.icon"),
      selectIcon: $r("app.media.icon"),
      normalColor: "#696969",
      selectColor: '#505050',
      showBadge: false,
      message:''
    }).width("100%").height(56)
  }

  aboutToAppear() {
    this.showBadge = true
  }

  @Builder TabBuilder(item: ItemTab) {
    TabComponent({
      name: item.name,
      currentIndex: item.index,
      selectIndex: this.selectIndex,
      showBadge: item.index === 3 ? this.showBadge : false,
      normalColor: "#696969",
      selectColor: '#505050',
      message:''
    }).width("100%").height(56)
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        ForEach(DEFAULT_TABS, (item: ItemTab, index: number) => {
          if (index == 2) {
            TabContent() {
              Column() {
                Text(item.name).fontSize(32)
              }.width('100%')
            }.tabBar(this.AddBuilder())
          } else {
            TabContent() {
              Column() {
                Text(item.name).fontSize(32)
              }.width('100%')
            }.tabBar(this.TabBuilder(item))
          }


        })
      }
      .vertical(false)
      .onChange((index: number) => {
        this.selectIndex = index
        if (index == 3) {
          this.showBadge = false
        }
      })
      .width('100%')
    }.width('100%').height('100%').backgroundColor('#000000')
  }
}

仿写微信底部导航

@Preview
@Component
export struct WxTabContainer {
  @State selectIndex: number = 0
  @State showFindBadge: boolean = false
  @State badgeMessage: string = ''
  private controller: TabsController = new TabsController()

  aboutToAppear() {
    this.showFindBadge = true
    this.badgeMessage = '11'
  }

  @Builder TabBuilder(item: ItemTab) {
    TabComponent({
      name: item.name,
      currentIndex: item.index,
      selectIndex: this.selectIndex,
      showBadge: item.index === 2 ? this.showFindBadge : false,
      normalColor: "#000000",
      selectColor: '#0CC160',
      iconWidth:26,
      iconHeight:26,
      normalIcon: item.icon,
      selectIcon: item.selectIcon,
      message: item.index === 2 ? this.badgeMessage : ''
    }).width("100%")
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        ForEach(DEFAULT_WX_TABS, (item: ItemTab, index: number) => {
          TabContent() {
            Column() {
              Text(item.name).fontSize(32)
            }.width('100%')
          }.tabBar(this.TabBuilder(item))

        })
      }
      .vertical(false).barHeight(60)
      .onChange((index: number) => {
        this.selectIndex = index
        if (index === 2) {
          this.showFindBadge = false
        }
      })
      .width('100%')
    }.width('100%').height('100%').backgroundColor('#ffffff')
  }
}

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。 

为了确保高效学习，建议规划清晰的学习路线

GitCode - 全球开发者的开源社区,开源代码托管平台希望这一份鸿蒙学习文档能够给大家带来帮助~

 鸿蒙（HarmonyOS NEXT）最新学习路线

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.学习视频+学习PDF文档

HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

纯血版鸿蒙全套学习文档（面试、文档、全套视频等）           

​​​​鸿蒙APP开发必备

总结

【纯血版鸿蒙全套学习文档】

总的来说，华为鸿蒙不再兼容安卓，对程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。