HarmonyOS 如何自定义tab

// CustomTabs.ets
import { Entry, Component } from '@ohos/ets-lib'

@Entry
@Component
struct CustomTabs {
  @State selectedIndex: number = 0;

  build() {
    Column() {
      // Tab Bar
      Row({
        alignItems: 'center',
        justification: 'spaceBetween'
      }) {
        this.buildTabItem('Tab 1', 0);
        this.buildTabItem('Tab 2', 1);
        this.buildTabItem('Tab 3', 2);
      }
      .width('100%')
      .height(50)
      .backgroundColor('#f5f5f5')

      // Highlighted Button
      AbsoluteLayout() {
        Button("Center")
          .onClick(() => this.onCenterButtonClick())
          .width(60)
          .height(60)
          .backgroundColor('#ff4081')
          .borderRadius(30) // Make it rounded
          .position({ top: -30, left: 'calc(50% - 30px)' }) // Center the button and make it protrude
      }
      .width('100%')
      .height(60)

      // Content
      Text(`Selected Tab: ${this.selectedIndex + 1}`)
        .fontSize(24)
        .margin({ top: 20 })
    }
  }

  buildTabItem(title: string, index: number) {
    Text(title)
      .fontSize(this.selectedIndex === index ? 18 : 16) // Highlight selected tab
      .padding(10)
      .onClick(() => this.onTabSelected(index))
      .backgroundColor(this.selectedIndex === index ? '#e0e0e0' : '#f5f5f5')
  }

  onTabSelected(index: number) {
    this.selectedIndex = index;
  }

  onCenterButtonClick() {
    // Add your custom action for the center button here
    console.log("Center button clicked");
  }
}
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.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.

@Entry  
@Component  
struct Drag2 {  
  @State tabArray: Array<number> = [0, 1, 2]  
  @State focusIndex: number = 0  
  @State pre: number = 0  
  @State index: number = 0  
  private controller: TabsController = new TabsController()  
  @State test: boolean = false  
  @State icon:string ='app.media.icon'  
  
  @Builder  
  Tab(tabName: string, tabItem: number, tabIndex: number) {  
    Column({ space: 10 }) {  
      Stack(){  
        Row(){  
          Image($r('app.media.startIcon'))  
            .width(40).height(40)  
          Text(tabName).fontSize(14)  
            .margin({top:60,left: -40})  
        }.width(80).height(80).backgroundColor("#ffffff").justifyContent(FlexAlign.Center)  
        .border({  
          radius: { topLeft: 130, topRight: 130, bottomLeft: 40, bottomRight: 80 },  
        })  
      }  
      .margin({bottom:tabIndex ===1 ? 80 : 0})  
    }  
    .justifyContent(FlexAlign.Center)  
    .onClick(() => {  
      this.controller.changeIndex(tabIndex)  
      this.focusIndex = tabIndex  
    })  
    .backgroundColor(Color.White)  
    .width("33.34%")  
    .height(100)  
  }  
  build() {  
    Column() {  
      Stack({alignContent:Alignment.BottomStart}) {  
        //tabs  
        Tabs({ barPosition: BarPosition.End, controller: this.controller }) {  
          ForEach(this.tabArray, (item: number, index: number) => {  
            TabContent() {  
              Text('我是页面 ' + item + " 的内容")  
                .height(300)  
                .width('100%')  
                .fontSize(30)  
            }  
            .backgroundColor(Color.Blue)  
          })  
        }  
        .barHeight(0)  
        .animationDuration(100)  
        .onChange((index: number) => {  
          console.log('foo change')  
          this.focusIndex = index  
        })  
        // 页签  
        Row() {  
          Scroll() {  
            Row() {  
              ForEach(this.tabArray, (item: number, index: number) => {  
                this.Tab("页签 " + item, item, index)  
              })  
            }  
            .margin({ top:20 })  
            .justifyContent(FlexAlign.SpaceBetween)  
            .alignItems(VerticalAlign.Bottom)  
          }  
          .scrollable(ScrollDirection.Horizontal)  
          .scrollBar(BarState.Off)  
          .width('100%')  
        }  
        .justifyContent(FlexAlign.SpaceBetween)  
        .alignItems(VerticalAlign.Bottom)  
        .width('100%')  
      }  
      .width('100%')  
    }  
    .height('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.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.