Tabs Demo

一、项目结构解说

项目结构图片.png

• BaseTabs.ets 文件里面包括 BaseTabs页面 和 BaseTabItem数据模型

  
  
  BaseTabs解说.png

• 本demo是从Index页面跳转至BaseTabs

  
  
  效果展示.png

1. 创建Home、Category、Message和Mine四个自定义组件

• Home

@Component
export struct Home {
  build() {
    Column() {
      Text("Home")
    }.width("100%").height("100%").backgroundColor(Color.Red)
  }
}

• Category

@Component
export struct Category {
  build() {
    Column() {
      Text("Category")
    }.width("100%").height("100%").backgroundColor(Color.Orange)
  }
}

• Message

@Component
export struct Message {
  build() {
    Column() {
      Text("Message")
    }.width("100%").height("100%").backgroundColor(Color.Yellow)
  }
}

• Mine

@Component
export struct Mine {
  build() {
    Column() {
      Text("Mine")
    }.width("100%").height("100%").backgroundColor(Color.Green)
  }
}

2. 创建BaseTabItem对象

export class BaseTabItem {
  itemTitle?: string
  targetIndex?: number
  selectImageName?: string
  normalImageName?: string
}

3. 创建BaseTabs文件

a. 创建BaseTabs同时创建 tabItems, tabsController 和 currentIndex 变量

export struct BaseTabs {
  // 数据源
  tabItems?: Array<BaseTabItem> = []
  private tabsController: TabsController = new TabsController()
  // 当前Tabs的索引值
  currentIndex: number = 0

  build() {
    Row() {
      Column() {
    }
  }
}

b. 在create或者aboutToAppear方法中初始化tabItems

// 需要几个TabContent就创建几个BaseTabItem模型
aboutToAppear() {
    let baseItem = new BaseTabItem()
    baseItem.itemTitle = "首页"
    baseItem.targetIndex = 0
    baseItem.selectImageName = "images/tabs/home_s.png"
    baseItem.normalImageName = "images/tabs/home.png"

    let baseItem1 = new BaseTabItem()
    baseItem1.itemTitle = "分类"
    baseItem1.targetIndex = 1
    baseItem1.selectImageName = "images/tabs/category_s.png"
    baseItem1.normalImageName = "images/tabs/category.png"

    let baseItem2 = new BaseTabItem()
    baseItem2.itemTitle = "消息"
    baseItem2.targetIndex = 2
    baseItem2.selectImageName = "images/tabs/message_s.png"
    baseItem2.normalImageName = "images/tabs/message.png"

    let baseItem3 = new BaseTabItem()
    baseItem3.itemTitle = "我的"
    baseItem3.targetIndex = 3
    baseItem3.selectImageName = "images/tabs/mine_s.png"
    baseItem3.normalImageName = "images/tabs/mine.png"

    this.tabItems = [baseItem, baseItem1, baseItem2, baseItem3]
  }

c. 通过@Builder 创建自定义的Tabbar

@Builder TabItemBuilder(tabBarItem: BaseTabItem) {
    Column() {
      Blank()
      Image(this.currentIndex == tabBarItem.targetIndex ? tabBarItem.selectImageName : tabBarItem.normalImageName)
        .size({ width: 25, height: 25 })
      Text(tabBarItem.itemTitle).fontColor(this.currentIndex == tabBarItem.targetIndex ? Color.Orange : Color.Black)
      Blank()
    }.height('100%').width('100%').onClick(() => {
      this.currentIndex = tabBarItem.targetIndex
      this.tabsController.changeIndex(this.currentIndex)
    })
  }

d. 在build()的Column中配置Tabs

build() {
    Row() {
      Column() {
        Tabs({ index: this.currentIndex, barPosition: BarPosition.End, controller: this.tabsController }) {
          ForEach(this.tabItems, (item, itemIndex) => {
            TabContent() {
              if (itemIndex == 0) {
                Home()
              } else if (itemIndex == 1) {
                Category()
              } else if (itemIndex == 2) {
                Message()
              } else {
                Mine()
              }
            }.tabBar(this.TabItemBuilder(item))
          })
        }.onChange((index) => {
          this.currentIndex = index
        }).backgroundColor(Color.White).animationDuration(0).scrollable(false)
      }
    }
  }

3. BaseTabs所有代码

import { Home } from './home/Home'
import { Category } from './category/Category'
import { Message } from './message/Message'
import { Mine } from './mine/Mine'

@Entry
@Component
export struct BaseTabs {
  tabItems?: Array<BaseTabItem> = []
  private tabsController: TabsController = new TabsController()
  currentIndex: number = 0

  @Builder TabItemBuilder(tabBarItem: BaseTabItem) {
    Column() {
      Blank()
      Image(this.currentIndex == tabBarItem.targetIndex ? tabBarItem.selectImageName : tabBarItem.normalImageName)
        .size({ width: 25, height: 25 })
      Text(tabBarItem.itemTitle).fontColor(this.currentIndex == tabBarItem.targetIndex ? Color.Orange : Color.Black)
      Blank()
    }.height('100%').width('100%').onClick(() => {
      this.currentIndex = tabBarItem.targetIndex
      this.tabsController.changeIndex(this.currentIndex)
    })
  }

  aboutToAppear() {
    let baseItem = new BaseTabItem()
    baseItem.itemTitle = "首页"
    baseItem.targetIndex = 0
    baseItem.selectImageName = "images/tabs/home_s.png"
    baseItem.normalImageName = "images/tabs/home.png"

    let baseItem1 = new BaseTabItem()
    baseItem1.itemTitle = "分类"
    baseItem1.targetIndex = 1
    baseItem1.selectImageName = "images/tabs/category_s.png"
    baseItem1.normalImageName = "images/tabs/category.png"

    let baseItem2 = new BaseTabItem()
    baseItem2.itemTitle = "消息"
    baseItem2.targetIndex = 2
    baseItem2.selectImageName = "images/tabs/message_s.png"
    baseItem2.normalImageName = "images/tabs/message.png"

    let baseItem3 = new BaseTabItem()
    baseItem3.itemTitle = "我的"
    baseItem3.targetIndex = 3
    baseItem3.selectImageName = "images/tabs/mine_s.png"
    baseItem3.normalImageName = "images/tabs/mine.png"

    this.tabItems = [baseItem, baseItem1, baseItem2, baseItem3]
  }
  build() {
    Row() {
      Column() {
        Tabs({ index: this.currentIndex, barPosition: BarPosition.End, controller: this.tabsController }) {
          ForEach(this.tabItems, (item, itemIndex) => {
            TabContent() {
              if (itemIndex == 0) {
                Home()
              } else if (itemIndex == 1) {
                Category()
              } else if (itemIndex == 2) {
                Message()
              } else {
                Mine()
              }
            }.tabBar(this.TabItemBuilder(item))
          })
        }.onChange((index) => {
          this.currentIndex = index
        }).backgroundColor(Color.White).animationDuration(0).scrollable(false)
      }
    }
  }
}

export class BaseTabItem {
  itemTitle?: string
  targetIndex?: number
  selectImageName?: string
  normalImageName?: string
}