＃放码来战．端云一体化开发＃HarmonyOS 5 【农民叔叔】12.【端侧工程】Tabs容器组件页签导航栏 原创

@Builder
  TabBuilder(title:string,index:number,selectedImg:Resource,normalImg:Resource){
    Column(){
      Image(this.currentIndex===index?selectedImg:normalImg)
        .width(25)
        .height(25)
      Text(title)
        .margin({top:4})
        .fontSize(10)
        .fontColor(this.currentIndex=== index?'#1698CE':'#6B6B6B')
    }
    .justifyContent( FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

TabContent() {
        // TODO:添加内容页
      }
      .tabBar(
        this.TabBuilder('首页', 0,
          $r('app.media.icon_home_selected'),
          $r('app.media.icon_home_normal')))
1.
2.
3.
4.
5.
6.
7.

import HomePage from './HomePage';
import MinePage from './MinePage';

@Entry
@Component
struct MainPage {
  @State currentIndex: number = 0; // 当前选中的tab索引，默认首页

  build() {
    Tabs({ barPosition: BarPosition.End, index: 0 }) {
      TabContent() {
        // TODO:添加内容页
      }
      .tabBar(
        this.TabBuilder('首页', 0,
          $r('app.media.icon_home_selected'),
          $r('app.media.icon_home_normal')))

      TabContent() {
        // 我的
        MinePage()
      }
      .tabBar(this.TabBuilder('我的', 1, $r('app.media.icon_mine_selected'), $r('app.media.icon_mine_normal')))
    }
    .vertical(false)
    .backgroundColor(Color.White)
    .barMode(BarMode.Fixed)
    .scrollable(false)
    .onChange((index: number) => {
      this.currentIndex = index;
    })
  }

  @Builder
  TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === index ? selectedImg : normalImg)
        .width(25)
        .height(25)
      Text(title)
        .margin({ top: 4 })
        .fontSize(10)
        .fontColor(this.currentIndex === index ? '#1698CE' : '#6B6B6B')
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.