Flutter中NestedScrollView搭配TabBar无内容时过度滚动如何解决？

问题原因 #

这个异常滚动是NestedScrollView的默认逻辑导致的：它默认允许滚动到所有header组件完全收起的位置，不会校验body内的内容高度是否足够撑满滚动区域，所以哪怕Tab页为空，也能把顶部自定义组件滑出可视范围，只留下吸顶的TabBar。

解决方案 #

我们可以通过动态判断内容总高度是否超过页面可视高度，来控制NestedScrollView是否允许滚动，实现你要的Instagram效果：内容不足时禁止滚动，内容超出时才允许滚动。

具体修改步骤 #

1. 将HomePage改为有状态组件，用于存储是否允许滚动的状态
2. 计算页面可视区域总高度、header区域总高度、Tab内容最大高度，判断是否需要启用滚动
3. 给NestedScrollView绑定动态的physics属性，内容不足时设置为NeverScrollableScrollPhysics

修改后完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

// 改为StatefulWidget
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 存储是否允许滚动的状态
  bool _canScroll = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 计算各项高度
    final mediaQuery = MediaQuery.of(context);
    // 屏幕总高度
    final screenHeight = mediaQuery.size.height;
    // 状态栏高度
    final statusBarHeight = mediaQuery.padding.top;
    // AppBar默认高度
    const appBarHeight = kToolbarHeight;
    // Header区域总高度：Placeholder高度300 + 上下margin各16 + TabBar高度48
    const headerTotalHeight = 300 + 16*2 + 48;
    // Tab页可用高度 = 屏幕高度 - 状态栏高度 - AppBar高度 - header总高度
    final tabAvailableHeight = screenHeight - statusBarHeight - appBarHeight - headerTotalHeight;

    // 这里可以替换为你实际各个Tab页内容的最大高度，示例中两个Tab都是空的，内容高度为0
    const tabMaxContentHeight = 0;

    // 如果Tab内容高度大于可用高度，才允许滚动
    setState(() {
      _canScroll = tabMaxContentHeight > tabAvailableHeight;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Home Page"),
      ),
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          // 动态设置physics
          physics: _canScroll ? const ClampingScrollPhysics() : const NeverScrollableScrollPhysics(),
          headerSliverBuilder: (context, isScrolled) {
            return [
              SliverToBoxAdapter(
                child: Container(
                  margin: const EdgeInsets.all(16),
                  child: const Placeholder(
                    fallbackHeight: 300,
                    fallbackWidth: double.infinity,
                    color: Colors.amberAccent,
                  ),
                ),
              ),
              SliverPersistentHeader(
                pinned: true,
                delegate: StickyTabBarDelegate(
                  child: const TabBar(
                    labelColor: Colors.black,
                    tabs: [
                      Tab(text: "Detail"),
                      Tab(text: "Comments"),
                    ],
                  ),
                ),
              )
            ];
          },
          body: const TabBarView(
            children: [
              DetailTab(),
              CommentsTab(),
            ],
          ),
        ),
      ),
    );
  }
}

class DetailTab extends StatelessWidget {
  const DetailTab({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class CommentsTab extends StatelessWidget {
  const CommentsTab({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
  final TabBar child;

  StickyTabBarDelegate({required this.child});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.white,
      child: child,
    );
  }

  @override
  double get maxExtent => child.preferredSize.height;

  @override
  double get minExtent => child.preferredSize.height;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

动态内容适配 #

如果你的Tab页内容是动态加载的，高度不固定，可以给每个Tab的内容外层加LayoutBuilder监听高度变化，实时更新_canScroll状态即可。

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