HarmonyOS 渐变标题栏加吸顶分类栏实现

请参考下面demo:

import { window } from '@kit.ArkUI';

@Entry
@Component
struct NestedScroll {
  @State currentYOffset: number = 0;
  private screenHeight?: number = AppStorage.get('screenHeight')
  private statusBarHeight?: number = AppStorage.get('statusHeight')
  private titleBarHeight: number = 40 + (this.statusBarHeight ? this.statusBarHeight : 0)
  @State tabHeight: string =
    (this.screenHeight ? (this.screenHeight - this.titleBarHeight) / this.screenHeight : 1) * 100 + '%'
  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  private scrollerForScroll: Scroller = new Scroller();
  private scrollerForList: Scroller = new Scroller();
  controller: TextInputController = new TextInputController()
  win = window.getLastWindow(getContext())

  change(): void {
    window.getLastWindow(getContext(), (err, data) => {
      let win: window.Window;
      if (err.code) {
        console.error("error code :" + JSON.stringify(err.code))
        return;
      }
      try {
        win = data;
        //设置窗口为全屏模式
        win.setWindowLayoutFullScreen(true);
        // 设置状态栏
        win.setWindowSystemBarProperties({
          // 设置状态栏颜色为其他颜色
          // statusBarColor: this.setStatusBarColor.toString(),
          // // 设置状态栏文本颜色为白色
          // statusBarContentColor: '#ff81f362'
        })
        console.info('带状态栏沉浸式窗口设置完成')
      } catch (expextion) {
        console.error("error cause :" + JSON.stringify(expextion))
      }
    })
  }

  aboutToAppear(): void {
    this.change()
  }

  build() {
    Stack({ alignContent: Alignment.Top }) {
      Scroll(this.scrollerForScroll) {
        Column() {
          Column(){}.width("100%").height(200).backgroundColor(Color.Pink)
          Tabs({ barPosition: BarPosition.Start }) {
            TabContent() {
              List({ space: 10, scroller: this.scrollerForList }) {
                ForEach(this.arr, (item: number) => {
                  ListItem() {
                    Text("促销商品" + item)
                      .width("100%")
                      .height("100%")
                      .borderRadius(15)
                      .fontSize(24)
                      .textAlign(TextAlign.Center)
                      .backgroundColor(Color.White)
                  }.width("100%").height(100)
                }, (item: string) => item)
              }
              .nestedScroll({
                scrollForward: NestedScrollMode.PARENT_FIRST,
                scrollBackward: NestedScrollMode.SELF_FIRST
              })
              .padding({ left: 10, right: 10 })
              .width("100%")
              .edgeEffect(EdgeEffect.None)
              .scrollBar(BarState.Off)
            }.tabBar('促销活动')

            TabContent() {
              List({ space: 10, scroller: this.scrollerForList }) {
                ForEach(this.arr, (item: number) => {
                  ListItem() {
                    Text("行程安排" + item)
                      .width("100%")
                      .height("100%")
                      .borderRadius(15)
                      .fontSize(24)
                      .textAlign(TextAlign.Center)
                      .backgroundColor(Color.White)
                  }.width("100%").height(100)
                }, (item: string) => item)
              }
              .nestedScroll({
                scrollForward: NestedScrollMode.PARENT_FIRST,
                scrollBackward: NestedScrollMode.SELF_FIRST
              })
              .padding({ left: 10, right: 10 })
              .width("100%")
              .edgeEffect(EdgeEffect.None)
              .scrollBar(BarState.Off)
            }.tabBar('行程服务')
          }
          .vertical(false)
          .barMode(BarMode.Fixed)
          .barWidth(360)
          .barHeight(56)
          .width("100%")
          .height(this.tabHeight)
          .backgroundColor('#F1F3F5')
        }
      }
      .scrollBar(BarState.Off)
      .width("100%")
      .height("100%")
      .onWillScroll((xOffset: number, yOffset: number) => {
        this.currentYOffset = this.scrollerForScroll.currentOffset().yOffset;
      })

      Row() {
        TextInput({ text: '', placeholder: 'input your word...', controller: this.controller }).fontSize(24)
      }
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.Gray)
      .width('100%')
      .height(this.titleBarHeight)
      //渐变色范围150， 需要更改为（粉色图片高度 - titleBar高度 - 状态栏高度）
      .opacity(this.currentYOffset > 0 ? this.currentYOffset / 150 : 0)
      .padding({ top: this.statusBarHeight })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
  }
}
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.