使用NestedScrollView时，允许拖拽TabBar而非滚动TabBarView

你当前的问题是：TabBar嵌套在SliverPersistentHeader中时，垂直拖拽手势会被下方TabBarView里的滚动组件拦截，导致无法通过拖拽TabBar控制整个页面的滚动。

解决方案思路 #

给TabBar添加手势拦截逻辑，让它优先捕获垂直拖拽事件，再手动控制NestedScrollView的滚动控制器来驱动页面滚动。

具体实现步骤 #

1. 为NestedScrollView声明一个ScrollController，用于管控整体滚动行为。
2. 用GestureDetector包裹TabBar，设置behavior: HitTestBehavior.opaque确保手势被优先处理。
3. 在onVerticalDragUpdate回调中，根据拖拽偏移量实时更新滚动控制器的位置。

修改后的代码示例 #

// 先声明滚动控制器
final ScrollController _scrollController = ScrollController();

// 构建NestedScrollView部分
NestedScrollView(
  controller: _scrollController,
  headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
    return <Widget>[
      SliverToBoxAdapter(
        child: pageHeaderContent,
      ),
      SliverPersistentHeader(
        pinned: true,
        delegate: _SliverTabBarDelegate(
          // 用GestureDetector包裹TabBar
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onVerticalDragUpdate: (DragUpdateDetails details) {
              // 根据拖拽方向和偏移量更新滚动位置
              _scrollController.jumpTo(
                _scrollController.offset - details.delta.dy,
              );
            },
            child: tabBar,
          ),
        ),
      ),
    ];
  },
  body: TabBarView(
    controller: _tabController,
    children: [
      for (var tabItem in tabItems) tabItem.page,
    ],
  ),
),

补充说明 #

• 如果需要更平滑的滚动过渡，可以将jumpTo替换为animateTo，并自定义动画曲线和时长。
• 需确保_SliverTabBarDelegate的maxExtent和minExtent参数设置正确，保证TabBar的尺寸正常展示。

内容的提问来源于stack exchange，提问作者Jonny Shanahan