Flutter中TabBarView搭配滚动组件内容过少出现过度滚动如何解决

方案1：保留NestedScrollView+TabBarView结构，调整加载更多触发逻辑 #

这是优先推荐的方案，符合官方嵌套滚动设计规范，改动成本最低，不会出现布局异常问题：

• 放弃给内部CustomScrollView添加shrinkWrap: true的尝试，该属性仅适用于非嵌套的独立滚动场景，在NestedScrollView体系下使用反而会引发性能问题和布局冲突。
• 不要绑定内部列表的滚动到底事件作为加载更多触发条件，改为通过NotificationListener监听内部滚动视图的滚动通知，直接判断是否到达当前滚动区域的底部即可，适配内容不足和内容超出屏幕的所有场景，代码示例如下：

NotificationListener<ScrollNotification>(
  onNotification: (scrollNotification) {
    // 仅响应垂直方向滚动到底部的事件
    if (scrollNotification.metrics.pixels == scrollNotification.metrics.maxScrollExtent && 
        scrollNotification.metrics.axis == Axis.vertical &&
        !scrollNotification.metrics.outOfRange) {
      // 此处触发当前标签页的加载更多逻辑
      debugPrint("触发加载更多，当前标签：$name");
    }
    return false;
  },
  child: CustomScrollView(
    key: PageStorageKey<String>(name),
    // 可选配置：去掉iOS风格的过度滚动回弹效果
    physics: const ClampingScrollPhysics(),
    slivers: <Widget>[
      SliverOverlapInjector(
        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
      ),
      SliverPadding(
        padding: const EdgeInsets.all(8.0),
        sliver: SliverFixedExtentList(
          itemExtent: 48.0,
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
            childCount: 4, // 加载更多完成后更新该数值即可
          ),
        ),
      ),
      // 可选：加载更多状态占位组件
      if (isLoadingMore)
        const SliverToBoxAdapter(
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 16),
            child: Center(child: CircularProgressIndicator()),
          ),
        )
    ],
  ),
)

方案2：TabBarView动态适配内容高度 #

如果业务场景要求标签页下方不能留空白区域，必须让TabBarView高度和实际内容高度一致，可以采用动态计算高度的方案实现：

• 给每个标签页的内容绑定独立GlobalKey，监听TabController的切换事件和内容更新事件，每次触发时计算当前标签内容的实际高度，动态更新TabBarView的父容器高度即可，核心代码示例如下：

class CustomScrollViewTest extends StatefulWidget {
  const CustomScrollViewTest({Key? key}) : super(key: key);

  @override
  State<CustomScrollViewTest> createState() => _CustomScrollViewTestState();
}

class _CustomScrollViewTestState extends State<CustomScrollViewTest> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<GlobalKey> _tabItemKeys = [GlobalKey(), GlobalKey()];
  // 初始设置最小高度避免首次渲染闪烁
  double _currentTabHeight = 200;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    // 监听标签切换更新高度
    _tabController.addListener(_calculateCurrentTabHeight);
    // 首次渲染完成后计算初始高度
    WidgetsBinding.instance.addPostFrameCallback((_) => _calculateCurrentTabHeight());
  }

  void _calculateCurrentTabHeight() {
    final currentTabKey = _tabItemKeys[_tabController.index];
    final renderBox = currentTabKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox != null) {
      setState(() {
        _currentTabHeight = renderBox.size.height;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    var _tabs = ["One", "Two"];
    return Scaffold(
      body: DefaultTabController(
        length: _tabs.length,
        child: CustomScrollView(
          physics: const ClampingScrollPhysics(),
          slivers: [
            // 原有SliverAppBar代码保持不变，此处省略
            const SliverAppBar(/* 原有配置 */),
            SliverToBoxAdapter(
              child: SizedBox(
                height: _currentTabHeight,
                child: TabBarView(
                  controller: _tabController,
                  children: [
                    Container(
                      key: _tabItemKeys[0],
                      child: ListView.builder(
                        physics: const NeverScrollableScrollPhysics(),
                        itemCount: 4,
                        itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
                      ),
                    ),
                    Container(
                      key: _tabItemKeys[1],
                      child: ListView.builder(
                        physics: const NeverScrollableScrollPhysics(),
                        itemCount: 10,
                        itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
                      ),
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

• 注意：加载更多完成后需要手动调用_calculateCurrentTabHeight()方法更新高度，加载更多逻辑可以直接监听外层CustomScrollView的滚动到底事件触发。

• 方案1性能最优，无布局抖动问题，适配所有常规业务场景，是官方推荐的实现方式。
• 方案2可以实现高度完全跟随内容适配，适合标签页下方还有其他固定展示内容的特殊场景，缺点是需要额外维护高度计算逻辑。

内容的提问来源于stack exchange，提问作者Shashi Kiran