OpenHarmony/HarmonyOS微信的Tab按钮

OpenHarmony/HarmonyOS微信的Tab按钮

我们今天就来仿一个微信的Tab按钮

以下是今天的内容。

作者：坚果
团队：坚果派
公众号：“大前端之旅”
润开鸿技术专家，华为HDE，InfoQ签约作者，OpenHarmony布道师，擅长HarmonyOS应用开发、熟悉服务卡片开发，在“战码先锋”活动中作为大队长，累计培养三个小队长，带领100+队员完成Pr的提交合入。
欢迎通过主页或者私信联系我，加入坚果派，一起学习OpenHarmony/HarmonyOS应用开发。

效果

源码

@Entry
@Component
struct MainPage {
  @State fontColor: Color = Color.Grey
  @State selectedFontColor: Color = Color.Orange
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder TabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })

    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column(){
            Text("微信").fontSize(50)
          }.width('100%').height('100%').justifyContent(FlexAlign.Center)
        }.tabBar(this.TabBuilder(0, '微信'))

        TabContent() {
          Column(){
            Text("xjg13690").fontSize(50)
          }.width('100%').height('100%').justifyContent(FlexAlign.Center)
        }.tabBar(this.TabBuilder(1, '通讯录'))

        TabContent() {
          Column(){
            Text("发现").fontSize(50)
          }.width('100%').height('100%').justifyContent(FlexAlign.Center)
        }.tabBar(this.TabBuilder(2, '发现'))

        TabContent() {
          Column(){
            Text("坚果").fontSize(50)
          }.width('100%').height('100%').justifyContent(FlexAlign.Center)
        }.tabBar(this.TabBuilder(3, '我'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)


      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}

完毕