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

Question

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

Answer 1

请参考下面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)
  }
}