如何实现Tabs组件tarbar的吸顶效果

@Entry 
@Component 
struct listDemo { 
  @State topHeight: number = -1 
  @State topMargin: number = 0 
  isFirst: boolean = true; 
  startTop: number = 0; 
 
  build() { 
    Stack({ alignContent: Alignment.Top }) { 
      // 主内容 
      Scroll() { 
        Column() { 
          ScrollHeaderArea() 
            .onAreaChange((oldArea: Area, newArea: Area) => { 
              if (this.isFirst) { 
                this.isFirst = false; 
                this.startTop = Number(newArea.globalPosition.y) 
              } 
              if (this.startTop - Number(newArea.globalPosition.y) + this.topHeight >= Number(newArea.height)) { 
                console.log("cbl:::----------------------------------------") 
                console.log("cbl:::", this.topHeight) 
                console.log("cbl:::", JSON.stringify(newArea)) 
                console.log("cbl:::", this.startTop) 
                console.log("cbl:::", Number(newArea.height)) 
                console.log("cbl:::", Number(newArea.globalPosition.y)) 
                if (this.topMargin <= 50) { 
                  if (this.startTop - Number(newArea.globalPosition.y) + this.topHeight - Number(newArea.height) >= 50) { 
                    this.topMargin = 50 
                  } else { 
                    this.topMargin = this.startTop - Number(newArea.globalPosition.y) + this.topHeight - Number(newArea.height) 
                  } 
                } 
              } else { 
                this.topMargin = 0 
              } 
            }) 
          // 主内容 
          ScrollMainArea({ topMargin: this.topMargin }) 
        }.width("100%") 
      } 
      .edgeEffect(EdgeEffect.None) 
      .friction(0.6) 
      .backgroundColor(Color.Grey) 
      .scrollBar(BarState.Off) 
      .width('100%') 
      .height('100%') 
 
      // 头部输入框 
      header() 
        .onAreaChange((oldArea: Area, newArea: Area) => { 
          this.topHeight = Number(newArea.height) 
        }) 
    }.height("100%") 
  } 
} 
 
@Component 
struct header { 
  @State text: string = '' 
  controller: TextInputController = new TextInputController() 
 
  build() { 
    Column() { 
      TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller }) 
        .placeholderColor(Color.White) 
        .height(45) 
    }.width('100%') 
    .hitTestBehavior(HitTestMode.Transparent) 
  } 
} 
 
@Component 
struct ScrollHeaderArea { 
  build() { 
    Row() { 
      Row() { 
        Text('1').fontSize(20).layoutWeight(1) 
        Text('1').fontSize(20).layoutWeight(1) 
        Text('1').fontSize(20).layoutWeight(1) 
        Text('1').fontSize(20).layoutWeight(1) 
      } 
      .borderRadius(5) 
      .height(50) 
    }.backgroundColor('#ffcae9ca') 
    .padding({ top: 50, bottom: 50 }) 
  } 
} 
 
@Component 
struct ScrollMainArea { 
  @State arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] 
  height1: number = 50 
  @Prop topMargin: number = 0 
  @State LIST_TAB_BAR_HEIGHT: number = 56 // 内容页面tab bar高度 
  LIST_BOTTOM_MARGIN = 20 // list距离顶部距离 
  @State fontColor: string = '#182431' 
  @State selectedFontColor: string = '#007DFF' 
  @State currentIndex: number = 0 
  private tabController: TabsController = new TabsController() 
 
  @Builder 
  tabBuilder(index: number, name: string) { 
    Column() { 
      Text(name) 
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 
        .fontSize(16) 
        .fontWeight(this.currentIndex === index ? 500 : 400) 
        .lineHeight(22) 
        .margin({ top: 17, bottom: 7 }) 
    }.width('100%') 
  } 
 
  @Styles 
  listCard() { 
    .backgroundColor(Color.White) 
    .height(200) 
    .width("100%") 
    .borderRadius(12) 
  } 
 
  @Builder 
  listControllerBuilder() { 
    List({ space: 20, initialIndex: 0 }) { 
      ForEach(this.arr, (item: number) => { 
        ListItem() { 
          Text('' + item) 
            .width('100%') 
            .height(100) 
            .fontSize(16) 
            .textAlign(TextAlign.Center) 
            .borderRadius(10) 
            .backgroundColor(0xFFFFFF) 
        } 
      }, (item: string) => item) 
    } 
    .listDirection(Axis.Vertical) // 排列方向 
    .scrollBar(BarState.Off) 
    .friction(0.6) 
    .chainAnimation(false) 
    .edgeEffect(EdgeEffect.Spring) //配合EdgeEffect.Spring可以触发list回弹效果 
    .nestedScroll({ 
      scrollForward: NestedScrollMode.PARENT_FIRST, 
      scrollBackward: NestedScrollMode.SELF_FIRST 
    }) 
    .margin({ bottom: this.LIST_BOTTOM_MARGIN }) 
    .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => { 
    }) 
    .onScroll((scrollOffset: number, scrollState: ScrollState) => { 
    }) 
    .onAppear(() => { 
    }) 
    .width('90%') 
  } 
 
  build() { 
    Column() { 
      Tabs({ barPosition: BarPosition.Start, controller: this.tabController }) { 
        TabContent() { 
          this.listControllerBuilder() 
        }.tabBar(this.tabBuilder(0, '手机')) 
 
        TabContent() { 
          this.listControllerBuilder() 
        }.tabBar(this.tabBuilder(1, '宽带')) 
 
        TabContent() { 
          this.listControllerBuilder() 
        }.tabBar(this.tabBuilder(2, '家庭')) 
 
        TabContent() { 
          this.listControllerBuilder() 
        }.tabBar(this.tabBuilder(3, '附近')) 
 
        TabContent() { 
          this.listControllerBuilder() 
        }.tabBar(this.tabBuilder(4, '政企')) 
      } 
      .margin({ top: this.topMargin }) 
      .vertical(false) 
      .barMode(BarMode.Fixed) 
      .backgroundColor('#F1F3F5') 
      .barHeight(this.LIST_TAB_BAR_HEIGHT) 
      .animationDuration(400) 
      .onChange((index: number) => { 
        this.currentIndex = index 
      }) 
    }.width('100%').height('100%') 
  } 
}