【HarmonyOSNext】Tabs使用封装

 背景

在写Tabs时，会使用很多个TabContent来实现不同页面的展示内容，但是如果TabContent数量很多时，会导致Tabs代码量大而且很臃肿，因此想着尝试去封装Tabs的使用，可以让界面整洁和对内容界面的解耦。

主要依托于wrapBuilder：封装全局@Builder的方法使用。需要注意从API 11 才开始支持使用

代码结构

Index.ets

登录后复制

import { TabbarItem, TabbarItemList } from '../Models/TabbarItem';

@Entry
@Component
struct Index {
  // tab选择索引
  @State selectIndex: number = 0;
  // 内容
  controller: TabsController = new TabsController()
  // tab集合
  @State items: TabbarItem[] = TabbarItemList;

  build() {
    Tabs({ controller: this.controller, index: this.selectIndex }) {
      ForEach(this.items, (item: TabbarItem, index: number) => {
        TabContent() {
          //点击页签显示的内容
          item.builder.builder()
        }
        .tabBar(this.tabarBuilder(item, index)) //TabContent的样式和内容
      })
    }.onChange((index: number) => {
      this.selectIndex = index;
    })
    .barPosition(BarPosition.End);
  }

  @Builder
  tabarBuilder(item: TabbarItem, index: number) {
    Column() {
      Image(this.selectIndex == index ? item.icon_selected : item.icon_normal)
        .width(28)
        .aspectRatio(1)
        .margin({ top: 5, bottom: 1 });
      Text(item.title)
        .width('100%')
        .height(14)
        .fontSize(10)
        .fontWeight(500)
        .textAlign(TextAlign.Center)
        .margin({ bottom: 7 });
    }
  }
}
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.

TabbarItem.ets

登录后复制

import { View1Builder } from '../Views/View1_Page';
import { View2Builder } from '../Views/View2_Page';
import { View3Builder } from '../Views/View3_Page';
import { View4Builder } from '../Views/View4_Page';
import { View5Builder } from '../Views/View5_Page';

class TabbarItem {
  index: number = 0;
  title: string = '';
  icon_selected: Resource = $r('app.media.app_icon');
  icon_normal: Resource = $r('app.media.app_icon');
  builder: WrappedBuilder<[]> = wrapBuilder(TabbarBuilder);

  constructor(index: number, title: string, selectedIcon: Resource, normalIcon: Resource, builder: WrappedBuilder<[]>) {
    this.index = index;
    this.title = title;
    this.icon_selected = selectedIcon;
    this.icon_normal = normalIcon;
    this.builder = builder;
  }
}

@Builder
function TabbarBuilder() {

}


// tab集合
const TabbarItemList: TabbarItem[] = [
  new TabbarItem(0, "View1", $r('app.media.app_icon'), $r('app.media.app_icon'), wrapBuilder(View1Builder)),
  new TabbarItem(1, "View2", $r('app.media.app_icon'), $r('app.media.app_icon'), wrapBuilder(View2Builder)),
  new TabbarItem(2, "View3", $r('app.media.app_icon'), $r('app.media.app_icon'), wrapBuilder(View3Builder)),
  new TabbarItem(3, "View4", $r('app.media.app_icon'), $r('app.media.app_icon'), wrapBuilder(View4Builder)),
  new TabbarItem(4, "View5", $r('app.media.app_icon'), $r('app.media.app_icon'), wrapBuilder(View5Builder)),
]


export {
  TabbarItem, TabbarItemList
}
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.

View1_Page.ets

登录后复制

@Builder
export function View1Builder(){
  View1_Page();
}

@Entry
@Component
struct View1_Page {
  @State message: string = 'View1';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('View1_PageHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.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.

 效果