HarmonyOS 鸿蒙Next中Navigation嵌套子组件Tabs滑动异常

HarmonyOS 鸿蒙Next中Navigation嵌套子组件Tabs滑动异常 【问题描述】：Navigation组件里包含了一个Tabs组件，tab页面布局是一个scroll或者LIst可滑动的页面，滑动tab页面中的scroll或者LIst组件，会导致tabBar上移

具体代码如下：

/**
 * Navigation + Tabs + Scroll 下拉回弹Bug复现Demo
 *
 * 问题描述：
 *   当 Navigation 包裹 Tabs，且 TabContent 内部使用 Scroll 组件时，
 *   下拉 Scroll 触发的回弹效果会穿透 Navigation 和 Tabs，
 *   导致底部 Tab 栏整体上移，产生视觉异常。
 *
 * 关键结构：Navigation > Column > Tabs > TabContent > Scroll
 *
 * 本Demo包含3个Tab用于对比：
 *   Tab1(Scroll): 外层Scroll → 有Bug，下拉时Tab栏上移
 *   Tab2(List):   外层List   → 有Bug，下拉时Tab栏上移
 *   Tab3(Column): 无滚动容器  → 无Bug，作为基准对照
 *
 * 复现步骤：
 *   1. 切换到"Scroll(有Bug)"Tab
 *   2. 在内容区域向下拉动
 *   3. 观察底部Tab栏是否被上移拉动
 *   4. 切换到"List(正常)"Tab重复操作，对比差异
 */

@Entry
@Component
struct Index {
  @State currentTab: number = 0;
  private navStack: NavPathStack = new NavPathStack();
  private tabsController: TabsController = new TabsController();

  // ========== Tab1: Scroll组件（有Bug） ==========
  @Builder
  ScrollPage() {
    Scroll() {
      Column() {
        Text('这是 Scroll 容器').fontSize(20).fontWeight(FontWeight.Bold).margin({ bottom: 8 })
        Text('下拉此页面，观察底部Tab栏是否上移').fontSize(14).fontColor('#666666').margin({ bottom: 24 })

        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], (item: number): void => {
          Row() {
            Text(`列表项 ${item}`).fontSize(16).fontColor('#333333')
          }
          .width('90%').height(60).backgroundColor(Color.White).borderRadius(12)
          .margin({ bottom: 12 }).padding({ left: 20 })
          .shadow({ radius: 4, color: '#1A000000', offsetY: 2 })
        }, (item: number): string => `${item}`)
      }
      .width('100%').padding({ left: 20, right: 20, top: 20, bottom: 20 })
    }
    .width('100%').height('100%')
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.Spring)
  }

  // ========== Tab2: List组件（无Bug） ==========
  @Builder
  ListPage() {
    List() {
      ListItem() {
        Column() {
          Text('这是 List 容器').fontSize(20).fontWeight(FontWeight.Bold).margin({ bottom: 8 })
          Text('下拉此页面，观察底部Tab栏是否上移').fontSize(14).fontColor('#666666')
        }.width('100%').padding({ bottom: 24 })
      }

      ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], (item: number): void => {
        ListItem() {
          Row() {
            Text(`列表项 ${item}`).fontSize(16).fontColor('#333333')
          }
          .width('100%').height(60).backgroundColor(Color.White).borderRadius(12)
          .margin({ bottom: 12 }).padding({ left: 20 })
          .shadow({ radius: 4, color: '#1A000000', offsetY: 2 })
        }
      }, (item: number): string => `${item}`)
    }
    .width('100%').height('100%')
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.Spring)
    .cachedCount(5)
  }

  // ========== Tab3: Column无滚动（基准） ==========
  @Builder
  ColumnPage() {
    Column() {
      Text('无滚动容器').fontSize(20).fontWeight(FontWeight.Bold).margin({ bottom: 8 })
      Text('此页面不可滚动，Tab栏应始终不动').fontSize(14).fontColor('#666666').margin({ bottom: 24 })

      Column() {
        Text('这是静态内容区域').fontSize(16).fontColor('#333333')
      }
      .width('90%').height(200).backgroundColor(Color.White).borderRadius(12)
      .justifyContent(FlexAlign.Center)
      .shadow({ radius: 4, color: '#1A000000', offsetY: 2 })
    }
    .width('100%').height('100%').padding(20)
    .justifyContent(FlexAlign.Start)
  }

  // ========== Tab栏图标 ==========
  @Builder
  Tab1Icon() {
    Column() {
      Text('S').fontSize(20).fontColor(this.currentTab === 0 ? '#FF5722' : '#AAAAAA').fontWeight(FontWeight.Bold)
      Text('Scroll').fontSize(10)
        .fontColor(this.currentTab === 0 ? '#FF5722' : '#AAAAAA')
        .fontWeight(this.currentTab === 0 ? FontWeight.Bold : FontWeight.Normal)
    }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }

  @Builder
  Tab2Icon() {
    Column() {
      Text('L').fontSize(20).fontColor(this.currentTab === 1 ? '#FF5722' : '#AAAAAA').fontWeight(FontWeight.Bold)
      Text('List').fontSize(10)
        .fontColor(this.currentTab === 1 ? '#FF5722' : '#AAAAAA')
        .fontWeight(this.currentTab === 1 ? FontWeight.Bold : FontWeight.Normal)
    }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }

  @Builder
  Tab3Icon() {
    Column() {
      Text('C').fontSize(20).fontColor(this.currentTab === 2 ? '#FF5722' : '#AAAAAA').fontWeight(FontWeight.Bold)
      Text('Column').fontSize(10)
        .fontColor(this.currentTab === 2 ? '#FF5722' : '#AAAAAA')
        .fontWeight(this.currentTab === 2 ? FontWeight.Bold : FontWeight.Normal)
    }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }

  build() {
    // 关键：Navigation包裹，与PoPoMusic一致
    Navigation(this.navStack) {
      Column() {
        Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
          TabContent() {
            this.ScrollPage()
          }.tabBar(this.Tab1Icon())

          TabContent() {
            this.ListPage()
          }.tabBar(this.Tab2Icon())

          TabContent() {
            this.ColumnPage()
          }.tabBar(this.Tab3Icon())
        }
        .width('100%').layoutWeight(1)
        .barHeight(56)
        .barBackgroundColor('#26FFFFFF')
        .barMode(BarMode.Fixed)
        .scrollable(false)
        .onChange((index: number): void => {
          this.currentTab = index;
        })
      }
      .width('100%').height('100%')
      .linearGradient({ direction: GradientDirection.Bottom, colors: [['#FFF8F0', 0], ['#FFEDE3', 1]] })
    }
    .height('100%')
    .mode(NavigationMode.Auto)
  }
}

【问题现象】：

【版本信息】：API23