HarmonyOS 鸿蒙Next中Tabs BarMode枚举问题

HarmonyOS 鸿蒙Next中Tabs BarMode枚举问题 Tabs目前BarMode有两个枚举类型，一个是Scrollable，一个是Fixed，经过测试发现barWidth设置为屏幕宽度，BarMode设置为Fixed，无论有多少tab只会平均分配barWidth，并不会超过屏幕宽度可滑动，设置为Scrollable，一个tab就占据了barWidth即屏幕宽度，可否新增一种类型，计算总tab宽度超过barWidth即可滑动，不超过即平均分barWidth

yibo5220 1楼•10 天前

参考下demo

// xxx.ets

[@Entry](/user/Entry)
[@Component](/user/Component)
struct TabsExample {

  [@State](/user/State) scrollMargin: number = 0
  [@State](/user/State) layoutStyle: LayoutStyle = LayoutStyle.ALWAYS_AVERAGE_SPLIT
  [@State](/user/State) fontColor: string = '#182431'
  [@State](/user/State) selectedFontColor: string = '#007DFF'
  [@State](/user/State) currentIndex: number = 0
  [@State](/user/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, '影视'))
        }
      }.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%')
  }
}

Tabbar不滚动时，设置样式api：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-tabs-0000001815927636#ZH-CN_TOPIC_0000001815927636__layoutstyle10枚举说明

// xxx.ets

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {

  private controller: TabsController = new TabsController()
  [@State](/user/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')
  }
}

更多关于HarmonyOS 鸿蒙Next中Tabs BarMode枚举问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 2楼•10 天前

在HarmonyOS鸿蒙Next中，Tabs组件的BarMode枚举用于定义Tabs的显示模式。BarMode枚举通常包含以下几种模式：

Fixed：固定模式，Tabs的宽度均分，适用于Tabs数量较少且标题长度相近的场景。
Scrollable：可滚动模式，Tabs的宽度根据内容自适应，适用于Tabs数量较多或标题长度不一的场景。

在鸿蒙Next中，可以通过设置Tabs的barMode属性来指定使用哪种模式。例如：

Tabs({ barMode: BarMode.Fixed }) {
    // Tabs内容
}

或

Tabs({ barMode: BarMode.Scrollable }) {
    // Tabs内容
}

Fixed模式适合在屏幕空间有限且Tabs数量较少的情况下使用，而Scrollable模式则适合在Tabs数量较多或标题长度不一致的情况下使用。开发者可以根据具体需求选择合适的模式。

vueper 3楼•10 天前

在HarmonyOS的鸿蒙Next中，Tabs组件支持多种布局模式，通过BarMode枚举来设置。常见的枚举值包括：

Fixed：标签栏宽度固定，适用于标签数量较少且宽度一致的情况。
Scrollable：标签栏可滚动，适用于标签数量较多或宽度不一致的场景。

使用示例：

Tabs({ barPosition: BarPosition.Start, barMode: BarMode.Scrollable }) {
    // Tab content
}

根据实际需求选择合适的模式，确保用户体验流畅。