ArkTs语言 顶部 渐变，吸顶效果 2_arkts 吸顶

@Component
export struct HomePage {
  // 仿Android 协调者布局
  @State titleArr: string[] = ['TAB1']
  @State currentIndex: number = 1
  // 头部banner高度
  @State headerHeight: number = 260
  // tab标签栏的高度
  private tabHeight = 50
  // 搜索栏高度
  @State searchBarHeight: number = 0
  @State searchBarHeight2: number = 50
  private scrollY: number = 0
  @State tabPosY: number = vp2px(this.headerHeight + this.searchBarHeight)
  private scrollerForList: Scroller = new Scroller()
  @State arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  private outScroller: Scroller = new Scroller();
  @State topOpacity: number = 1;

  @Styles
  listCard11() {
    .backgroundColor(Color.White)
    .height(72)
    .width("100%")
    .borderRadius(12)
  }

  build() {
    Stack({ alignContent: Alignment.Top }) {
      Row() {

        Text("悬停区域")
          .width('100%')
          .height(this.tabHeight)
          .markAnchor({ x: 0, y: 0 })
          .position({ y: this.tabPosY + 'px', x: 0 })
          .zIndex(10)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.White)


        Scroll() {
          Column() {
            Text().width('100%').height(this.headerHeight).backgroundColor(Color.Blue)


            ForEach(this.titleArr, (item) => {
              Column() {
                Text('Page ' + item).fontSize(25).margin(10).margin({ top: this.tabHeight })
                List({ space: 10, scroller: this.scrollerForList }) {
                  ForEach(this.arr, (item: number) => {
                    ListItem() {
                      Text("item" + item)
                        .fontSize(16)
                    }.listCard11()
                  }, (item: number) => item.toString())
                }.width("100%").onScroll((number, state) => {
                  console.log("onScroll---001  >" + number)
                })

              }
            }, item => item)


          }
        }
        .scrollBar(BarState.Off)
        .margin({ top: this.searchBarHeight })
        .backgroundColor('#F4F4F4')
        .onScroll((xOffset: number, yOffset: number) => {
          console.log("onScroll---002  >" + xOffset + "  " + yOffset)
          this.scrollY += vp2px(yOffset)
          console.log("onScroll---scrollY  >" + this.scrollY + "  ")


          this.tabPosY = vp2px(this.headerHeight + this.searchBarHeight) - this.scrollY
          if (vp2px(this.headerHeight) - this.scrollY < 0) {
            this.tabPosY = vp2px(this.searchBarHeight2)

          }
          if (this.tabPosY > vp2px(this.headerHeight + this.searchBarHeight)) {
            this.tabPosY = vp2px(this.headerHeight + this.searchBarHeight)
            this.scrollY = 0
            this.topOpacity = 0.3
          }
          let compatiy = this.tabPosY / vp2px(this.headerHeight + this.searchBarHeight)
          this.topOpacity = compatiy


          // ? vp2px(this.searchBarHeight) :

        })

      }.width('100%')


      Text('标题2222')
        .width('100%')
        .textAlign(TextAlign.Center)
        .fontColor(this.topOpacity > 0.5 ? Color.White : Color.Black)
        .width('100%')
        .height(this.searchBarHeight2)
        .backgroundColor(this.topOpacity > 0.5 ? Color.Transparent : Color.White) // 标题高度8% Tab Content 内容高度为92%


    }
  }

  onHeaderHeightUpdated() {
    this.tabPosY = vp2px(this.headerHeight + this.searchBarHeight)
  }

}