使用SliverAppBar和SliverList滚动时出现RenderFlex溢出问题

核心问题分析 #

你的代码存在两个关键问题导致溢出：

1. SliverChildBuilderDelegate使用错误：仅处理index == 0的情况，未返回默认子项，会触发Delegate无限请求子项；同时给TabBarView套了固定高度的SizedBox，手动计算的高度无法适配SliverAppBar展开/折叠的动态变化，必然出现溢出。
2. 容器组件选择不当：固定高度的SizedBox无法与CustomScrollView的滚动体系协同，应该使用能自动填充剩余空间的Sliver组件。

可行解决方案 #

用SliverFillRemaining替代原有的SliverList包裹TabBarView，它会自动占据CustomScrollView中SliverAppBar之外的剩余空间，无需手动计算高度。同时确保TabBar与DefaultTabController正确关联（若MainAppbar未包含TabBar，需将TabBar放到SliverAppBar的bottom属性中）。

修改后的完整代码 #

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: DefaultTabController(
        length: 9,
        child: Scaffold(
          body: CustomScrollView(
            slivers: [
              SliverAppBar(
                backgroundColor: AppColors.topBackgroundDarkColor,
                expandedHeight: 200.h,
                floating: true,
                pinned: true,
                flexibleSpace: const MainAppbar(),
                collapsedHeight: 50.h,
                toolbarHeight: 50.h,
                // 若MainAppbar未包含TabBar，添加此bottom属性
                bottom: TabBar(
                  tabs: List.generate(9, (index) => Tab(text: "Tab $index")),
                ),
              ),
              // 替换原SliverList为SliverFillRemaining
              SliverFillRemaining(
                child: TabBarView(
                  children: Constants.screens.map((screen) {
                    return ListTile(
                      title: screen,
                    );
                  }).toList(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键改动说明 #

• 替换SliverList为SliverFillRemaining：该组件会自动适配CustomScrollView的剩余空间，完美配合SliverAppBar的动态高度变化，彻底解决溢出问题。
• 完善TabBar关联：若MainAppbar未包含TabBar，需在SliverAppBar的bottom中添加TabBar，确保与DefaultTabController联动。
• 移除固定高度SizedBox：无需手动计算高度，SliverFillRemaining会自动处理空间分配。

额外注意事项 #

如果TabBarView的子页面本身是可滚动组件（如嵌套ListView），需给子页面的ListView设置shrinkWrap: true和physics: const NeverScrollableScrollPhysics()，避免嵌套滚动冲突，让外层CustomScrollView统一处理滚动逻辑。

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