Flutter NestedScrollView底部出现多余空白空间问题求助

问题原因 #

当GridView.builder使用shrinkWrap: true时，它会根据内容自身高度计算尺寸，但在NestedScrollView的TabBarView容器中，这种计算逻辑在内容不足一屏时，会与父组件的滚动布局逻辑冲突，导致底部出现多余空白。当itemCount足够多、内容撑满屏幕后，空白会自然消失。

解决方案 #

将GridView.builder替换为CustomScrollView + SliverGrid的组合，适配NestedScrollView的Sliver组件体系，从根源上解决高度计算冲突问题：

修改PostsViewInProfile组件：

class PostsViewInProfile extends StatelessWidget {
  const PostsViewInProfile({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return CustomScrollView(
      physics: const NeverScrollableScrollPhysics(),
      slivers: [
        SliverPadding(
          padding: EdgeInsets.zero,
          sliver: SliverGrid(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              childAspectRatio: 1.0,
              mainAxisSpacing: 8,
              crossAxisSpacing: 8,
            ),
            delegate: SliverChildBuilderDelegate(
              (context, index) => Stack(
                children: [
                  SizedBox(
                    height: double.infinity,
                    width: double.infinity,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Image.asset(
                        'assets/images/pro-view${index + 1}.jpeg',
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  index % 2 == 0
                      ? Positioned(
                          right: width * 0.015,
                          bottom: width * 0.01,
                          child: SvgPicture.asset('assets/icons/play.svg'),
                        )
                      : const SizedBox.shrink(),
                ],
              ),
              childCount: 9,
            ),
          ),
        ),
      ],
    );
  }
}

补充说明 #

• 移除了shrinkWrap属性，改用Sliver体系组件与NestedScrollView配合，布局计算更准确
• 保留NeverScrollableScrollPhysics，让NestedScrollView统一处理滚动逻辑
• 如果之前使用extendBody: true不是必需的，可以尝试移除，避免额外布局干扰

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