HarmonyOS Tab颜色渐变宽度渐变

可以参考如下demo：

import { componentUtils } from '@kit.ArkUI'

@Entry
@Component
struct Page {
  @State tabArray: Array<number> = [0, 1, 2]
  @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 tabsWidth: number = 0
  private tabWidth: number = 0;
  private scrollerForScroll: Scroller = new Scroller()
  @State nextLeftMargin: number = 0
  @State nextWidth: number = 0
  @State colorInfo: string = "#c97fbe"
  private colorList: string[] = ["#c97fbe", "#cb88bf", "#cc92bf", "#ce9bc0", "#d0a4c1", "#d1adc2", "#d3b7c2", "#d4c0c3",
    "#d6c9c4", "#d8d2c5", "#d9dcc5", "#dbe5c6", "#47b1ab", "#55b5ad", "#64b9b0", "#72bdb2", "#80c1b5", "#8fc5b7", "#9dc9ba", "#accdbc", "#bad1bf", "#c8d5c1", "#d7d9c4", "#e5ddc6"]
  @State indexNum: number = 0

  // 单独的页签
  @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())
        .key(tabIndex.toString())
        .onAreaChange((oldValue: Area, newValue: Area) => {
          if (this.focusIndex === tabIndex && (this.indicatorLeftMargin === 0 || this.indicatorWidth === 0)) {
            if (newValue.position.x != undefined) {
              let positionX = Number.parseFloat(newValue.position.x.toString())
              this.indicatorLeftMargin = Number.isNaN(positionX) ? 0 : positionX
            }
            let width = Number.parseFloat(newValue.width.toString())
            this.tabWidth = Number.isNaN(width) ? 0 : width
            this.indicatorWidth = this.tabWidth
          }
        })
    }
    .justifyContent(FlexAlign.Center)
    .constraintSize({ minWidth: 35 })
    .width(100)
    .height(30)
    .onClick(() => {
      this.controller.changeIndex(tabIndex)
      this.focusIndex = tabIndex
    })
    .backgroundColor("#ffb7b7b7")
  }

  @Builder
  textTest(textName: string) {
    Row({ space: 20 }) {
      Text(textName)
        .fontSize(18)
        .onClick(() => {

        })
    }.justifyContent(FlexAlign.Center)
    .constraintSize({ minWidth: 35 })
    .height(30)
    .backgroundColor("#ffb7b7b7")
  }

  build() {
    Column() {
      Scroll() {
        Column() {
          // 页签栏
          Stack({ alignContent: Alignment.TopStart }) {
            Column() {
              // 页签
              Row({ space: 8 }) {
                List({ space: 20, initialIndex: 0, scroller: this.scrollerForScroll }) {
                  ForEach(this.tabArray, (item: number, index: number) => {
                    ListItem() {
                      this.Tab("页签 " + item, item, index)
                    }
                  }, (item: string) => item)
                }
                .listDirection(Axis.Horizontal)
                .height(30)
                .friction(0.6)
                .alignListItem(ListItemAlign.Start)
                .scrollBar(BarState.Off)
                .width('100%')
                .backgroundColor("#ffb7b7b7")
              }
              .alignItems(VerticalAlign.Bottom)
              .width('100%')
              .backgroundColor("#ffb7b7b7")
            }
            .alignItems(HorizontalAlign.Start)
            .width('100%')

            // 页签下划线
            Row() {
              Column()
                .height(2)
                .width(this.indicatorWidth)
                .margin({ left: this.indicatorLeftMargin, top: 0 })
                .backgroundColor(this.colorInfo)

              Column()
                .height(2)
                .width(this.nextWidth)
                .margin({ left: this.nextLeftMargin, top: 0 })
                .backgroundColor(this.colorInfo)
            }.width('100%')
            .height(5)
            .margin({ top: 30 })
          }
          .height(40)
          .width('100%')
          .backgroundColor("#ffb7b7b7")

          //tabs
          Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
            ForEach(this.tabArray, (item: number, index: number) => {
              TabContent() {
                List({ space: 5, initialIndex: 0 }) {
                  ForEach(this.tabArray, (itemInfo: number) => {
                    ListItem() {
                      Text('我是页面 ' + item + " 的内容: " + itemInfo)
                        .height(150)
                        .width('100%')
                        .fontSize(30)
                        .backgroundColor(Color.Brown)
                    }
                  }, (item: string) => item)
                }
                .nestedScroll({
                  scrollForward: NestedScrollMode.PARENT_FIRST,
                  scrollBackward: NestedScrollMode.SELF_FIRST
                })
                .scrollBar(BarState.Off)
                .listDirection(Axis.Vertical)
                .friction(0.9)
                .edgeEffect(EdgeEffect.None)
              }.backgroundColor(Color.White)
            }, (item: string) => item)
          }
          .onAreaChange((oldValue: Area, newValue: Area) => {
            let width = Number.parseFloat(newValue.width.toString())
            this.tabsWidth = Number.isNaN(width) ? 0 : width
          })
          .width('100%')
          .barHeight(0)
          .height("calc(100% - 40vp)")
          .animationDuration(100)
          .onChange((index: number) => {
            console.log('foo change')
            this.focusIndex = index
            this.scrollerForScroll.scrollToIndex(index - 1, true)
          })
          .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
            // 切换动画开始时触发该回调。下划线跟着页面一起滑动
            this.focusIndex = targetIndex
            let targetIndexInfo = this.getTextInfo(targetIndex)
            let indexInfo = this.getTextInfo(index)
            animateTo({
              duration: 300,
              // 动画时长
              curve: Curve.Linear,
              // 动画曲线
              iterations: 1,
              // 播放次数
              playMode: PlayMode.Normal,
              // 动画模式
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              this.indicatorLeftMargin = targetIndex > index ? (indexInfo.left + indexInfo.width) : indexInfo.left
              this.indicatorWidth = 0
              this.nextWidth = targetIndexInfo.width
              if (targetIndex < index) {
                this.nextLeftMargin = targetIndexInfo.left - indexInfo.left
              }

              if(index == 2 && targetIndex >= 2) {
                this.nextWidth = 0
                this.indicatorWidth = 50
              }
              this.colorInfo = "#c97fbe"
            })
          })
          .onGestureSwipe((index: number, event: TabsAnimationEvent) => {
            // 在页面跟手滑动过程中，逐帧触发该回调。
            let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
            if(currentIndicatorInfo.currentLeft !== this.indicatorLeftMargin) {
              this.indexNum++
              this.colorInfo = this.colorList[this.indexNum]
            }
            this.focusIndex = currentIndicatorInfo.index
            this.indicatorLeftMargin = currentIndicatorInfo.currentLeft
            this.indicatorWidth = currentIndicatorInfo.currentWidth
            this.nextLeftMargin = currentIndicatorInfo.nextLeft
            this.nextWidth = currentIndicatorInfo.nextWidth
          })
        }
      }.scrollBar(BarState.Off)
    }.height('100%')
  }

  private getTextInfo(index: number): Record<string, number> {
    let modePosition:componentUtils.ComponentInfo = componentUtils.getRectangleById(index.toString());
    console.info('left ='+ px2vp(modePosition.screenOffset.x) + ', width =' + px2vp(modePosition.size.width))
    return { 'left': px2vp(modePosition.screenOffset.x), 'width': px2vp(modePosition.size.width)}

  }

  private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> {
    let nextIndex = index
    if (index > 0 && event.currentOffset > 0) {
      nextIndex--
    } else if (index < 4 && event.currentOffset < 0) {
      nextIndex++
    }
    let indexInfo = this.getTextInfo(index)
    let nextIndexInfo = this.getTextInfo(nextIndex)
    let swipeRatio = Math.abs(event.currentOffset / this.tabsWidth)
    let currentIndex = swipeRatio > 0.01 ? nextIndex : index

    let currentLeft = index < nextIndex ? (indexInfo.left + indexInfo.width * swipeRatio) : indexInfo.left
    let currentWidth = indexInfo.width * (1 - swipeRatio)
    let nextLeft = index < nextIndex ? (nextIndexInfo.left - indexInfo.left - nextIndexInfo.width) : (nextIndexInfo.left - indexInfo.left)
    let nextWidth = nextIndexInfo.width * swipeRatio

    return {
      'index': currentIndex,
      'currentLeft': currentLeft,
      'currentWidth': currentWidth,
      'nextLeft': nextLeft,
      'nextWidth': nextWidth
    }
  }
}