NavDestination
└── Stack                                    ← 根容器，提供 z 軸層級
    ├── Stack  頂部標題欄                     ← zIndex=2，始終在最前
    │       height = statusBar + 標題高度
    │
    └── Scroll  外層滾動器                     ← 【關(guān)鍵①】height='100%'
        └── Column                            ← 子內(nèi)容回推總高度 → 產(chǎn)生滾動空間
            ├── Banner Column                 ← 頭圖區(qū)，上滑滾出屏幕
            └── Tabs  吸頂區(qū)域                 ← 【關(guān)鍵②】calc(100% - avoidance)
                └── TabContent
                    └── WaterFlow/List        ← 【關(guān)鍵③nestedScroll + 關(guān)鍵④edgeEffect】

Scroll(this.outerScroller) {
  Column() { /* 子內(nèi)容 */ }
  .width('100%')
}
.width('100%')
.height('100%')   // ← 關(guān)鍵：不約束子 Column 高度，由內(nèi)容回推總高度 → 產(chǎn)生滾動空間
.scrollBar(BarState.Off)

// 避讓高度 = 狀態(tài)欄高度 + 標題欄高度
private getAvoidanceHeight(): number {
  return WindowHelper.statusBarHeight + 25
}

Tabs({ index: $$this.selectedTabIndex }) {
  TabContent() { this.tabContentBuilder() }
    .tabBar(this.tabBarBuilder())
}
// 【關(guān)鍵②-a】Tabs 高度固定為 Scroll.Column 的剩余空間
.height(`calc(100% - ${this.getAvoidanceHeight()}vp)`)
// 【關(guān)鍵②-b】tabBar 高度由內(nèi)容撐開
.barHeight('auto')
.scrollable(false)            // 禁用 Tabs 內(nèi)置滾動，由子列表承載
.barPosition(BarPosition.Start) // tabBar 在內(nèi)容上方（縱向吸頂）
.clip(true)

WaterFlow({
  scroller: this.waterFlowScroller,
  footer: this.footerBuilder()
}) {
  LazyForEach(this.dataSource, (item: number) => {
    FlowItem() { this.waterFlowItem(item) }
  }, (item: number) => item.toString())
}
// 【關(guān)鍵③】nestedScroll：協(xié)調(diào)父子滾動容器之間的優(yōu)先級
.nestedScroll({
  scrollForward: NestedScrollMode.PARENT_FIRST,  // 向下滾動：列表先滾，到頂后外層 Scroll 接管
  scrollBackward: NestedScrollMode.SELF_FIRST    // 向上滾動：列表先滾回，再由外層 Scroll 接手
})

手指向上滑 → WaterFlow 響應(yīng)滾動
    ↓
WaterFlow 內(nèi)容滾動，列表向上移動
    ↓
WaterFlow 到達列表頂部（內(nèi)容已無剩余）
    ↓
滾動權(quán)交給外層 Scroll
    ↓
外層 Scroll 繼續(xù)向上滾動，Banner 和 TabBar 被推出可視區(qū)
    ↓
TabBar "吸"在屏幕頂部（已滾出外層 Scroll 的可視區(qū)，緊貼標題欄）

手指向下滑 → WaterFlow 優(yōu)先響應(yīng)
    ↓
WaterFlow 到達列表底部（內(nèi)容已無剩余）
    ↓
WaterFlow 響應(yīng)手指繼續(xù)滾動（上拉手勢）
    ↓
WaterFlow 到頂，滾動權(quán)交給外層 Scroll
    ↓
外層 Scroll 向下滑動，TabBar 從標題欄下方落回
    ↓
TabBar 重新出現(xiàn)在屏幕中

WaterFlow({ ... })
.nestedScroll({ ... })
// 【關(guān)鍵④】edgeEffect：禁用回彈 + 保持邊緣感知，確保吸頂絲滑
.edgeEffect(EdgeEffect.None, { alwaysEnabled: true })

沒有 alwaysEnabled=true：
  WaterFlow 到頂 → 外層 Scroll 無法感知"已到頂" → 卡頓，無法交接滾動權(quán)

有 alwaysEnabled=true：
  WaterFlow 到頂 → 仍能感知邊緣狀態(tài) → nestedScroll 正常觸發(fā) → 絲滑交接

import { WindowHelper } from '@zebra/foundation/src/main/ets/utils/WindowHelper'

@ComponentV2
export struct WaterFlowStickyDemoPage {
  // ── 滾動器 ──────────────────────────────────────────────────
  private outerScroller: Scroller = new Scroller()     // 【關(guān)鍵①】外層滾動
  private waterFlowScroller: Scroller = new Scroller() // 【關(guān)鍵③】子列表滾動

  // ── 避讓高度 ──────────────────────────────────────────────
  //  = 狀態(tài)欄高度 + 標題欄高度
  private getAvoidanceHeight(): number {
    return WindowHelper.statusBarHeight + 25
  }

  // ── TabBar ──────────────────────────────────────────────────
  @Builder
  tabBarBuilder() {
    Column() {
      Row() {
        ForEach(['推薦', '熱門', '最新'], (tab: string, index: number) => {
          Column() {
            Text(tab)
              .fontSize(15)
              .fontColor(this.selectedTabIndex === index ? '#00CC66' : '#999999')
            Divider()
              .width(this.selectedTabIndex === index ? 20 : 0)
              .height(2)
              .backgroundColor('#00CC66')
              .margin({ top: 4 })
          }
          .width(60)
        })
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .height(44)
      Divider().width('100%').strokeWidth(1).color('#C8E6C9')
    }
    .width('100%')
    .backgroundColor('#E8F5E9')
  }

  // ── TabContent ─────────────────────────────────────────────
  @Builder
  tabContentBuilder() {
    WaterFlow({
      scroller: this.waterFlowScroller
    }) {
      LazyForEach(this.dataSource, (item: number) => {
        FlowItem() {
          Column() {
            Text(`${item}`)
          }
          .width('100%')
          .height(88 + (item % 7) * 28)
          .backgroundColor(colors[item % colors.length])
          .borderRadius(8)
        }
      }, (item: number) => item.toString())
    }
    .columnsTemplate('1fr 1fr')
    .columnsGap(12)
    .rowsGap(12)
    .padding({ left: 16, right: 16, top: 12, bottom: 12 })
    .scrollBar(BarState.Off)
    // 【關(guān)鍵③】nestedScroll
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST
    })
    // 【關(guān)鍵④】edgeEffect
    .edgeEffect(EdgeEffect.None, { alwaysEnabled: true })
  }

  // ── Tabs 主體 ───────────────────────────────────────────────
  @Builder
  contentBuilder() {
    Tabs({ index: $$this.selectedTabIndex }) {
      TabContent() { this.tabContentBuilder() }
        .tabBar(this.tabBarBuilder())
    }
    // 【關(guān)鍵②-a】Tabs 高度 = Scroll.Column 剩余空間
    .height(`calc(100% - ${this.getAvoidanceHeight()}vp)`)
    // 【關(guān)鍵②-b】tabBar 高度由 Builder 內(nèi)容撐開
    .barHeight('auto')
    .scrollable(false)
    .barPosition(BarPosition.Start)
    .clip(true)
  }

  // ── build ───────────────────────────────────────────────────
  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Top }) {
        // 頂部標題欄
        Column() {
          Text('頁面標題')
            .fontSize(17)
            .height(25)
        }
        .width('100%')
        .height(WindowHelper.statusBarHeight + 25)
        .padding({ left: 16 })
        .zIndex(2)

        // 外層 Scroll 【關(guān)鍵①】
        Scroll(this.outerScroller) {
          Column() {
            // Banner 頭圖區(qū)
            Column() {
              Text('Banner Area')
            }
            .width('100%')
            .height(180)
            .backgroundColor('#E8F5E9')

            // Tabs 吸頂區(qū)域 【關(guān)鍵②③④】
            this.contentBuilder()
          }
          .width('100%')
        }
        .width('100%')
        .height('100%')   // ← 關(guān)鍵①：height='100%'，內(nèi)容回推高度
        .scrollBar(BarState.Off)
      }
      .width('100%')
      .height('100%')
    }
    .hideTitleBar(true)
  }
}

// HomeExplorePage.ets

// ① 外層滾動器 height='100%'
Scroll(this.exploreScroller) {
  Column() {
    // Banner + Tabs
    Tabs()
    // 【關(guān)鍵②-a】Tabs 高度 = Scroll.Column 剩余空間
    .height(`calc(100% - ${this.explorePageDataModel.avoidanceHeight}vp)`)
    // 【關(guān)鍵②-b】tabBar 高度由 Builder 內(nèi)容撐開
    .barHeight('auto')
    .scrollable(false)
    .barPosition(BarPosition.Start)
    .clip(true)
  }
}
.width('100%')
.height('100%')   // ← 關(guān)鍵①

// ② WaterFlow nestedScroll + edgeEffect
WaterFlow({ scroller: this.waterFlowScroller }) {
  LazyForEach(...)
}
// 【關(guān)鍵③】nestedScroll
.nestedScroll({
  scrollForward: NestedScrollMode.PARENT_FIRST,
  scrollBackward: NestedScrollMode.SELF_FIRST
})
// 【關(guān)鍵④】edgeEffect
.edgeEffect(EdgeEffect.None, { alwaysEnabled: true })