Tab控件中tabBar子控件之间的间距不一致怎么办？

Question

问题解释

想实现tabBar上面切换item时，选中的item变大，且item之间的间距不变，但实际上各个item之间间距不一致了

问题UI现象：

期望效果：

Answer 1

解决措施

可以通过 .tabBar(this.TabBuilder)自定义实现页签。

代码示例

@Builder 
TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) { 
  Column() { 
    Image(this.currentIndex === targetIndex ? selectedImg : normalImg) 
      .size({ width: 25, height: 25 }) 
    Text(title) 
      .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B') 
  } 
  .width('100%') 
  .height(50) 
  .justifyContent(FlexAlign.Center) 
} 
 
//在TabContent对应tabBar属性中传入自定义函数组件，并传递相应的参数。 
TabContent() { 
  Column() { 
    Text('我的内容') 
  } 
  .width('100%') 
  .height('100%') 
  .backgroundColor('#007DFF') 
} 
.tabBar(this.TabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))