HarmonyOS Tabs BarMode枚举问题

// xxx.ets  
@Entry  
@Component  
struct TabsExample {  
  @State scrollMargin: number = 0  
  @State layoutStyle: LayoutStyle = LayoutStyle.ALWAYS_AVERAGE_SPLIT  
  @State fontColor: string = '#182431'  
  @State selectedFontColor: string = '#007DFF'  
  @State currentIndex: number = 0  
  @State controlNums:boolean = true  
  private controller: TabsController = new TabsController()  
  
  @Builder  
  TabBuilder(index: number, name: string) {  
    Column() {  
      Text(name)  
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)  
        .fontSize(16)  
        .fontWeight(this.currentIndex === index ? 500 : 400)  
        .lineHeight(22)  
    }.width(100)  
  }  
  
  build() {  
    Column() {  
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {  
        TabContent() {  
          Column(){  
            Button("切换").onClick(() => {  
              this.controlNums = !this.controlNums  
            })  
          }.width('100%').height('100%').backgroundColor('#00CB87')  
        }.tabBar(this.TabBuilder(0, '视频1111'))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor('#007DFF')  
        }.tabBar(this.TabBuilder(1, '游戏'))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor('#E67C92')  
        }.tabBar(this.TabBuilder(8, '科技'))  
  
        if(this.controlNums) {  
          TabContent() {  
            Column().width('100%').height('100%').backgroundColor('#FFBF00')  
          }.tabBar(this.TabBuilder(2, '数码'))  
          TabContent() {  
            Column().width('100%').height('100%').backgroundColor('#E67C92')  
          }.tabBar(this.TabBuilder(3, '科技'))  
          TabContent() {  
            Column().width('100%').height('100%').backgroundColor('#00CB87')  
          }.tabBar(this.TabBuilder(4, '体育'))  
          TabContent() {  
            Column().width('100%').height('100%').backgroundColor('#007DFF')  
          }.tabBar(this.TabBuilder(5, '影视'))  
          TabContent() {  
            Column().width('100%').height('100%').backgroundColor('#E67C92')  
          }.tabBar(this.TabBuilder(6, '科技'))  
        }  
      }  
      .vertical(false)  
      .barMode(BarMode.Scrollable, { margin: this.scrollMargin, nonScrollableLayoutStyle: this.layoutStyle })  
      .barWidth(360)  
      .barHeight(56)  
      .animationDuration(400)  
      .onChange((index: number) => {  
        this.currentIndex = index  
      })  
      .width(360)  
      .height(296)  
      .margin({ top: 52 })  
      .backgroundColor('#F1F3F5')  
    }.width('100%')  
  }  
}

.barMode(BarMode.Scrollable, { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_AVERAGE_SPLIT })

// xxx.ets  
@Entry  
@Component  
struct Index {  
  private controller: TabsController = new TabsController()  
  @State showMore: boolean = false;  
  
  build() {  
    Column() {  
      Button('展示/隐藏更多').onClick(() => {  
        this.showMore = !this.showMore;  
      })  
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Pink)  
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1"))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Green)  
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "2"))  
  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Blue)  
        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3333333333"))  
  
        if (this.showMore) {  
          TabContent() {  
            Column().width('100%').height('100%').backgroundColor(Color.Red)  
          }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "444444444"))  
  
          TabContent() {  
            Column().width('100%').height('100%').backgroundColor(Color.Orange)  
          }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "55555555555555"))  
  
          TabContent() {  
            Column().width('100%').height('100%').backgroundColor(Color.Yellow)  
          }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "66666666666666666"))  
  
          TabContent() {  
            Column().width('100%').height('100%').backgroundColor(Color.Blue)  
          }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "7777777777777777"))  
        }  
      }  
      .animationDuration(null)  
      .height(500)  
      .backgroundColor(0xf1f3f5)  
      .barWidth('100%')  
      .barMode(BarMode.Scrollable, { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_AVERAGE_SPLIT })  
    }  
    .width('100%')  
    .height('100%')  
    .padding('24vp')  
  
  }  
}

//此段代码为自定义的TabBar  
import { TopTabsList } from '../viewmodel/TopTabsModel';  
import Const from '../common/constants/CommonConstants';  
@Component  
export struct TopTabs { // 该组件作为顶部TabBar  
  @Link @Watch('onIndexChange') bottomTabIndex: number;  
  controller = new Scroller();  
  onIndexChange() {  
    this.controller.scrollToIndex(this.bottomTabIndex) // index改变时跳转到指定index位置  
  }  
  build() {  
    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {  
      List({ scroller: this.controller }) {  
        ForEach(TopTabsList, item => {  
          ListItem() {  
            Text(item)  
              .fontSize($r('app.float.top_font_size'))  
              .fontWeight(FontWeight.Medium)  
              .fontColor(TopTabsList.indexOf(item) == this.bottomTabIndex ? Color.Blue :$r('app.color.top_tabs_font_color')) // 切换tabContent改变颜色  
              .opacity(Const.TOP_FONT_OPACITY)  
              .margin({ left: Const.TOP_FONT_MARGIN })  
              .onClick(() => {  
                this.bottomTabIndex = TopTabsList.indexOf(item); // 点击切换tabContent  
              })  
          }  
        })  
      }  
      .width('100%')  
      .height(Const.FULL_SIZE)  
      .layoutWeight(Const.LAYOUT_WEIGHT)  
      .listDirection(Axis.Horizontal)  
    }  
    .width(Const.FULL_SIZE)  
    .height(Const.TOP_TAB_HEIGHT)  
    .alignSelf(ItemAlign.Start)  
  }  
}  
//该段代码为Tab组件  
import { TopTabs } from '../view/TopTabsComponent';  
import Const from '../common/constants/CommonConstants';  
@Component  
export struct HomeTabComponent {  
  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'md';  
  @State @Watch('onIndexChange') bottomTabIndex: number = 0;  
  private controller: TabsController = new TabsController();  
  onIndexChange() {  
    this.controller.changeIndex(this.bottomTabIndex);  
  }  
  build() {  
    Column() {  
      TopTabs({ bottomTabIndex: $bottomTabIndex }) //该组件作为顶部页签，跟踪bottomTabIndex变量实现与Tab组件联动  
        .margin({ bottom: $r('app.float.top_margin') })  
      Tabs({ barPosition: BarPosition.End, index: 0, controller: this.controller }) {  
        TabContent() {  
          Text('000')  
        }  
        TabContent() {  
          Text('111')  
        }  
        TabContent() {  
          Text('222')  
        }  
        TabContent() {  
          Text('333')  
        }  
        TabContent() {  
          Text('444')  
        }  
        TabContent() {  
          Text('555')  
        }  
        TabContent() {  
          Text('666')  
        }  
        TabContent() {  
          Text('777')  
        }  
      }  
      .onChange((index: number) => {  
        this.bottomTabIndex = index;  
      })  
      .width(Const.FULL_SIZE)  
      .vertical(false)  
      .barHeight(0)  
    }  
    .width(Const.FULL_SIZE)  
  }  
}