如何去除NestedScrollView中ListView的多余空白？

问题原因 #

• NestedScrollView的滚动容器特性会让内部嵌套的ListView布局约束出现偏差，即便设置shrinkWrap: true，列表也无法完全贴合内容高度，产生额外空白。
• ListView在Material风格下默认带有上下各16px的padding，这部分内边距会被计入shrinkWrap后的高度，形成视觉上的多余空白。
• 你使用的ResponsiveSliverCenter组件可能引入额外布局约束，进一步加剧空白问题。

解决办法 #

1. 移除ListView默认内边距 #

给ListView.separated添加padding: EdgeInsets.zero，消除默认内边距带来的空白：

ListView.separated(
  shrinkWrap: true,
  padding: EdgeInsets.zero, // 新增该行
  itemCount: 1,
  separatorBuilder: ((context, index) => const Divider()),
  itemBuilder: ((context, index) => Container(
        color: Colors.grey,
        height: 150,
        child: const Align(
            alignment: Alignment.center, child: Text('Test item')),
      )),
)

2. 用Sliver组件替代嵌套ListView（推荐方案） #

直接在NestedScrollView的header和body中使用非滚动组件，避免嵌套可滚动组件带来的布局冲突：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) => [
        const SliverAppBar(
          title: Text('NestedScrollView Test'),
        ),
        SliverToBoxAdapter(
          child: Container(
            color: Colors.blue,
            child: Column(
              children: [
                Container(
                  color: Colors.grey,
                  height: 150,
                  child: const Align(
                      alignment: Alignment.center, child: Text('Test item')),
                ),
                const Divider(),
              ],
            ),
          ),
        ),
      ],
      body: Container(
        color: Colors.amber,
        child: Column(
          children: [
            Container(
              color: Colors.grey,
              height: 200,
              child: const Align(
                  alignment: Alignment.center, child: Text('Test item')),
            ),
            const Divider(),
          ],
        ),
      ),
    ),
  );
}

3. 禁用内部ListView的滚动物理 #

由于滚动已由NestedScrollView接管，给内部ListView添加physics: NeverScrollableScrollPhysics()，让布局更贴合内容：

ListView.separated(
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(), // 新增该行
  padding: EdgeInsets.zero,
  itemCount: 1,
  separatorBuilder: ((context, index) => const Divider()),
  itemBuilder: ((context, index) => Container(
        color: Colors.grey,
        height: 150,
        child: const Align(
            alignment: Alignment.center, child: Text('Test item')),
      )),
)

问题截图 #

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