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
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.