鸿蒙开发，tab组件中TabBar如何自适应宽度，超出屏幕可以滑动？

Tabs({
  barPosition: BarPosition.End, // 将 TabBar 放在底部
  scrollable: true, // 启用滑动效果
  barMode: BarMode.Fixed // 标签栏宽度分配模式
}) {
  // TabContent 和 tabBar 的内容
}
.width('100%')

@Builder TabBuilder(title: string, width: string) {
  Row().width(width) {
    Text(title)
      .textAlign(TextAlign.Center)
      .fontSize(16)
      .fontColor(this.currentIndex === targetIndex ? '#007DFF' : '#999')
  }
}

Tabs({
  barPosition: BarPosition.End,
  scrollable: true
}) {
  TabContent() {
    // 页面内容
  }.tabBar(this.TabBuilder('首页', '100px'))
  TabContent() {
    // 页面内容
  }.tabBar(this.TabBuilder('信息', '120px'))
  TabContent() {
    // 页面内容
  }.tabBar(this.TabBuilder('我的', '100px'))
}
.width('100%')

Scroller() {
  HStack().alignItems(VerticalAlign.Center) {
    Text('首页').onClick(() => { this.currentIndex = 0 })
    Text('信息').onClick(() => { this.currentIndex = 1 })
    Text('我的').onClick(() => { this.currentIndex = 2 })
    // 更多标签
  }
  .width('100%')
  .height(56)
  .padding({ left: 16, right: 16 })
}

HStack().alignItems(VerticalAlign.Center) {
  Text('首页').flexGrow(1).onClick(() => { this.currentIndex = 0 })
  Text('信息').flexGrow(1).onClick(() => { this.currentIndex = 1 })
  Text('我的').flexGrow(1).onClick(() => { this.currentIndex = 2 })
}
.width('100%')
.height(56)