HarmonyOS Scroll组件内部子组件Sticky属性实现？

Question

如何实现Scroll组件内部子组件Sticky属性，ScrollView中间插入Tabs，让Tabs滚动到顶部悬停

Answer 1

在Scroll组件中，实现Tabs滚动到顶部悬停参考代码如下：

@Entry
@Component
struct Test02 {
  @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("tag:::----------------------------------------")
                console.log("tag:::", this.topHeight)
                console.log("tag:::", JSON.stringify(newArea))
                console.log("tag:::", this.startTop)
                console.log("tag:::", Number(newArea.height))
                console.log("tag:::", 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%')
  }
}