Flutter使用auto_route实现Tab导航：解决SliverAppBar渲染错误

核心问题原因 #

你遇到的RenderViewport expected a child of type RenderSliver but received a child of type RenderErrorBox错误，本质是路由管理的子页面和CustomScrollView的Sliver组件不兼容：
auto_route的Tab路由会给子页面添加过渡动画容器（比如淡入效果的包装组件），这些容器属于普通Widget而非Sliver类型。当你试图把StarScreen/SquareScreen返回的SliverList直接塞进HomeScreen的CustomScrollView时，实际传入的是被过渡容器包裹的非Sliver组件，触发渲染错误。

你的整体方案存在设计偏差：由路由管理的Tab子页面应该是完整的页面Widget，而非单纯的Sliver组件。

修正步骤 #

1. 修改子页面的声明方式

不要让StarScreen/SquareScreen直接返回SliverList，改为返回包含CustomScrollView的完整页面结构，示例：

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

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        // 如果不需要子页面自己的AppBar，直接放业务相关的SliverList即可
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) => ListTile(title: Text('Star Item $index')),
            childCount: 20,
          ),
        ),
      ],
    );
  }
}

2. 重构HomeScreen的结构

如果要共用全局的SliverAppBar，用SliverFillRemaining包裹Tab切换内容，确保CustomScrollView的子项都是合法的Sliver类型，同时保留原有的淡入过渡和底部导航逻辑：

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

  @override
  Widget build(BuildContext context) {
    return AutoTabsRouter(
      routes: const [StarRoute(), SquareRoute()],
      builder: (context, child, animation) {
        final tabsRouter = AutoTabsRouter.of(context);
        return Scaffold(
          body: CustomScrollView(
            slivers: [
              const SliverAppBar(
                title: Text('全局共用AppBar'),
                pinned: true,
              ),
              SliverFillRemaining(
                // 保留原有的淡入过渡效果
                child: FadeTransition(
                  opacity: animation,
                  child: child,
                ),
              ),
            ],
          ),
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: tabsRouter.activeIndex,
            onTap: tabsRouter.setActiveIndex,
            items: const [
              BottomNavigationBarItem(icon: Icon(Icons.star), label: 'Star'),
              BottomNavigationBarItem(icon: Icons.square, label: 'Square'),
            ],
          ),
        );
      },
    );
  }
}

关键注意事项 #

• 路由管理的Tab子页面必须是完整的Widget树，不能直接返回Sliver组件，路由系统无法直接识别渲染Sliver。
• 共用SliverAppBar时，必须用SliverFillRemaining包裹Tab内容，保证CustomScrollView的所有子项都是Sliver类型。
• 淡入过渡动画要作用在Tab内容的外层容器上，不能直接套在Sliver组件上。

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