动态加载实现Tabs不均分但整体居中效果

@Builder 
TabBuilder(index:number, name:string){ 
  if (index == 2) { 
    //Indext为2的tab在这里实现自定义效果 
    Column() { 
      Text(name) 
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 
        .fontSize(16) 
        .fontWeight(this.currentIndex === index ? 600 : 400) 
        .lineHeight(22) 
      Divider() 
        .strokeWidth(4) 
        .lineCap(LineCapStyle.Round) 
        .color('#06C584') 
        .width(30) 
        .opacity(this.currentIndex === index ? 1 : 0) 
    } 
    .padding({ left: 10, right: 10 }) 
    //下面两行代码，可以让第三个tab变长，有更宽的左边距，实现tabs不均分，但整体居中的效果 
    .backgroundColor('#FF6257') 
    .justifyContent(FlexAlign.Center) 
    .width('100') 
    .margin({ left: 40 }) 
  } else { 
    //其他tabs 
    Column() { 
      Text(name) 
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 
        .fontSize(16) 
        .fontWeight(this.currentIndex === index ? 600 : 400) 
        .lineHeight(22) 
      Divider() 
        .strokeWidth(4) 
        .lineCap(LineCapStyle.Round) 
        .color('#06C584') 
        .width(30) 
        .opacity(this.currentIndex === index ? 1 : 0) 
    } 
    .padding({ left: 10, right: 10 }) 
    // .width(100) 
    // .height(LAYOUT_WIDTH_OR_HEIGHT) 
    .backgroundColor('#FF6257') 
    .justifyContent(FlexAlign.Center) 
  } 
}
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.

Tabs({ barPosition: BarPosition.Start, controller: this.controller, index: 2 }) { 
  TabContent() { 
    Column().width('100%').height('100%').backgroundColor('#00CB87') 
  }.tabBar(this.TabBuilder(0, "全部")) 
 
  TabContent() { 
    Column().width('100%').height('100%').backgroundColor('#007DFF') 
  }.tabBar(this.TabBuilder(1, "待支付")) 
 
  TabContent() { 
    Column().width('100%').height('100%').backgroundColor('#FFBF00') 
  } 
  .tabBar(this.TabBuilder(2, "待出行")) 
} 
.vertical(false) 
.barMode(BarMode.Scrollable, { margin: 10, nonScrollableLayoutStyle: LayoutStyle.SPACE_BETWEEN_OR_CENTER }) 
// .barWidth('100%') 
.barHeight(40) 
.scrollable(false) 
.barGridAlign({ margin: this.gridGutter, gutter: 0 }) 
.onChange((index: number) => { 
  this.currentIndex = index 
}) 
.width('100%') 
.backgroundColor('#F1F5FB')
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.