Flutter：内容不足时禁止滚动至SliverAppBar下方的问题

在Flutter中使用NestedScrollView搭配SliverAppBar时，存在以下问题：向下滚动页面时，即使内容不足以支撑滚动，内容仍会滑到SliverAppBar下方。需求是：当页面内容高度不足时，禁止内容滚动到SliverAppBar下方。

已尝试调整SliverAppBar的pinned、floating属性，以及相关解决方案，但均未解决问题。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  final SliverOverlapAbsorberHandle appBar = SliverOverlapAbsorberHandle();
  final SliverOverlapAbsorberHandle disconnectBar =
      SliverOverlapAbsorberHandle();

  @override
  void initState() {
    _tabController = TabController(
      initialIndex: 0,
      length: 2,
      vsync: this,
    );
    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        floatHeaderSlivers: true,
        physics: const ClampingScrollPhysics(),
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: const Text('Notes'),
              pinned: true,
              floating: true,
              bottom: TabBar(
                controller: _tabController,
                tabs: const [
                  Tab(text: 'Favorites'),
                  Tab(text: 'Deleted'),
                ],
              ),
            ),
          ];
        },
        body: TabBarView(
          controller: _tabController,
          children: const [
            Text('This text should not scroll below appbar when scrolling down, because there not much content for scroll.'),
            Text('This text should not scroll below appbar.'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Add New',
        child: const Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

核心思路是让内容在高度不足时占满剩余空间，同时限制不必要的滚动行为，以下两种方案可解决问题：

方案一：用CustomScrollView替代NestedScrollView #

通过SliverFillRemaining确保内容占满SliverAppBar下方的剩余空间，同时设置NeverScrollableScrollPhysics禁止无意义滚动：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      physics: const NeverScrollableScrollPhysics(),
      slivers: [
        SliverAppBar(
          title: const Text('Notes'),
          pinned: true,
          floating: true,
          bottom: TabBar(
            controller: _tabController,
            tabs: const [
              Tab(text: 'Favorites'),
              Tab(text: 'Deleted'),
            ],
          ),
        ),
        SliverFillRemaining(
          child: TabBarView(
            controller: _tabController,
            children: const [
              Center(
                child: Text('This text should not scroll below appbar when scrolling down, because there not much content for scroll.'),
              ),
              Center(
                child: Text('This text should not scroll below appbar.'),
              ),
            ],
          ),
        ),
      ],
    ),
    floatingActionButton: FloatingActionButton(
      tooltip: 'Add New',
      child: const Icon(Icons.add),
      onPressed: () {},
    ),
  );
}

方案二：动态判断内容高度，设置滚动物理属性 #

保留NestedScrollView，通过LayoutBuilder计算可用空间，动态决定是否允许滚动：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: LayoutBuilder(
      builder: (context, constraints) {
        // 计算SliverAppBar的预估高度（标题栏默认高度+TabBar默认高度）
        final appBarHeight = kToolbarHeight + 48;
        final availableHeight = constraints.maxHeight - appBarHeight;

        return NestedScrollView(
          floatHeaderSlivers: true,
          // 当可用空间远大于内容高度时，禁止滚动；反之允许正常滚动
          physics: availableHeight > 150
              ? const ClampingScrollPhysics()
              : const NeverScrollableScrollPhysics(),
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                title: const Text('Notes'),
                pinned: true,
                floating: true,
                bottom: TabBar(
                  controller: _tabController,
                  tabs: const [
                    Tab(text: 'Favorites'),
                    Tab(text: 'Deleted'),
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            controller: _tabController,
            children: const [
              Center(
                child: Text('This text should not scroll below appbar when scrolling down, because there not much content for scroll.'),
              ),
              Center(
                child: Text('This text should not scroll below appbar.'),
              ),
            ],
          ),
        );
      },
    ),
    floatingActionButton: FloatingActionButton(
      tooltip: 'Add New',
      child: const Icon(Icons.add),
      onPressed: () {},
    ),
  );
}

说明：方案一适合内容高度确定且不足的场景，实现更直接；方案二更灵活，可根据内容实际高度动态调整滚动行为。

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