Flutter中NestedScrollView下的GridView在TabBar中无法正常收缩

这个问题我之前也碰到过，核心原因是GridView默认会创建自己独立的滚动控制器，会和NestedScrollView的内部滚动机制冲突，导致SliverAppBar无法感知到滚动事件来触发收缩效果。下面给你两种可行的解决方案，附带完整代码示例：

方案一：用SingleChildScrollView包裹GridView（适合快速改造现有代码） #

这种方法是禁用GridView自身的滚动，把滚动控制权交还给NestedScrollView：

class DemoPage extends StatefulWidget {
  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverAppBar(
            title: const Text("滚动收缩Demo"),
            pinned: true,
            floating: false,
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              background: Container(color: Colors.blue[100]),
            ),
            bottom: TabBar(
              controller: _tabController,
              tabs: const [
                Tab(text: "GridView列表"),
                Tab(text: "普通文本"),
              ],
            ),
          ),
        ],
        body: TabBarView(
          controller: _tabController,
          children: [
            // GridView标签页
            SingleChildScrollView(
              // 保持和NestedScrollView一致的滚动物理效果
              physics: const ClampingScrollPhysics(),
              child: GridView.builder(
                shrinkWrap: true, // 让GridView根据内容自适应高度
                physics: const NeverScrollableScrollPhysics(), // 禁用自身滚动
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 8,
                  mainAxisSpacing: 8,
                  childAspectRatio: 1.5,
                ),
                itemCount: 50,
                itemBuilder: (context, index) {
                  return Card(
                    child: Center(child: Text("卡片 $index")),
                  );
                },
              ),
            ),
            // 普通文本标签页
            SingleChildScrollView(
              padding: const EdgeInsets.all(16),
              child: Column(
                children: List.generate(30, (index) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8),
                    child: Text("这是普通文本行 $index", style: const TextStyle(fontSize: 20)),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明： #

• shrinkWrap: true：让GridView不再强制占满整个视口，而是根据子项总高度自适应，这样SingleChildScrollView才能正确计算滚动范围。
• physics: NeverScrollableScrollPhysics()：彻底禁用GridView自身的滚动能力，避免它抢占滚动事件。
• SingleChildScrollView的physics保持默认或设置为ClampingScrollPhysics()，确保滚动事件能传递给NestedScrollView，触发SliverAppBar的收缩。

方案二：使用SliverGrid替代GridView（更贴合Flutter滚动体系） #

如果你的页面还在初期开发阶段，推荐用这种方法，因为Sliver组件天生和NestedScrollView的SliverAppBar兼容，性能也更好（按需加载子项）：

把GridView标签页的代码替换成下面的CustomScrollView：

// GridView标签页（Sliver版本）
CustomScrollView(
  slivers: [
    SliverPadding(
      padding: const EdgeInsets.all(8),
      sliver: SliverGrid(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
          childAspectRatio: 1.5,
        ),
        delegate: SliverChildBuilderDelegate(
          (context, index) => Card(child: Center(child: Text("卡片 $index"))),
          childCount: 50,
        ),
      ),
    ),
  ],
)

优势： #

• 不需要额外的包裹组件，SliverGrid直接和NestedScrollView的SliverAppBar联动，滚动事件传递更顺畅。
• Sliver组件是按需构建的，当列表很长时，内存占用比shrinkWrap的GridView更低。

测试验证 #

两种方案都能实现：

• 切换到"普通文本"标签页，滚动时SliverAppBar正常收缩。
• 切换到"GridView列表"标签页，滚动时SliverAppBar同样会跟随收缩，解决了你遇到的问题。

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