HarmonyOS Next开发中如何实现Tabs的滑动切换？

Question

HarmonyOS Next开发中如何实现Tabs的滑动切换？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

以参考以下方法实现 Tabs 的滑动切换：
如果 tab 嵌套横向 list，list 滑动到最右边自动触发 tab 的滑动切换可以参考以下代码实现：

import { router } from '@kit.ArkUI' 
@Entry 
@Component 
export struct Tabs240529160413047 { 
  @State tabArray: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7] 
  @State focusIndex: number = 0 
  @State pre: number = 0 
  @State index: number = 0 
  private controller: TabsController = new TabsController() 
  @State test: boolean = false 
  @State animationDuration: number = 300 
  @State indicatorLeftMargin: number = 0 
  @State indicatorWidth: number = 0 
  private tabWidth: number = 0; 
  private scrollerForScroll: Scroller = new Scroller() 
  // 单独的页签 
  @Builder 
  Tab(tabName: string, tabItem: number, tabIndex: number) { 
    Row({ space: 20 }) { 
      Text(tabName) 
       .fontSize(18) 
       .fontColor(tabIndex === this.focusIndex? Color.Blue : Color.Black) 
       .id(tabIndex.toString()) 
       .onAreaChange((oldValue: Area, newValue: Area) => { 
          if (this.focusIndex === tab) 
        } 
    } 
   .width('20%') 
  } 
}

如果 Tabs 组件使用中 tab 比较多，滚动时让选中的当前 tab 自动滚到页面中间展示，可以参考以下代码：

@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
       .fontColor(this.currentIndex === index? this.selectedFontColor : this.fontColor)
       .fontSize(10)
       .fontWeight(this.currentIndex === index? 500 : 400)
       .lineHeight(22)
       .margin({ top: 17, bottom: 7 })
      Divider().strokeWidth(2).color('#007DFF').opacity(this.currentIndex === index? 1 : 0)
    }
   .width('20%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {

        ForEach(['#F0C808', '#F2B0F5', '#3D1D6E', '#D84E48', '#F8F1A5', '#A4D5E2', '#D5F3C3', '#8B2D4D', '#7D7D7D', '#9A4F4F', '#1A8E7'],
          (item, index) => {
            this.tabBuilder(index, item)
          })
      }
    }
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。