Flutter GoRouter跳转与返回时页面不必要重建的解决问询

1. 用const构造器复用Widget实例 #

如果ListPage及其子Widget的构造器可以声明为const，就加上这个关键字，让Flutter复用已有实例，避免重复创建：

class ListPage extends StatelessWidget {
  const ListPage({super.key}); // 添加const构造器

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 子Widget也尽量用const修饰
      body: const ListView(...)
    );
  }
}

2. 改用StatefulShellRoute替代普通ShellRoute #

如果用的是GoRouter的ShellRoute，它在子路由跳转时可能会重建Shell页面。换成StatefulShellRoute可以保持Shell的状态，不会触发重建：

final goRouter = GoRouter(
  routes: [
    StatefulShellRoute.indexedStack(
      builder: (context, state, navigationShell) {
        return ListPage(navigationShell: navigationShell);
      },
      branches: [
        StatefulShellBranch(
          routes: [
            GoRoute(
              path: '/',
              builder: (context, state) => const ListPage(),
            ),
            GoRoute(
              path: '/item/:id',
              builder: (context, state) => ListItemViewScreen(id: state.pathParameters['id']!),
            ),
          ],
        ),
      ],
    ),
  ],
);

3. 用AutomaticKeepAliveClientMixin保持页面状态 #

如果ListPage是StatefulWidget，混入这个Mixin就能让页面切换时保留状态，不会重建：

class ListPage extends StatefulWidget {
  const ListPage({super.key});

  @override
  State<ListPage> createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启状态保持

  @override
  void initState() {
    super.initState();
    _loadData(); // 只在初始化时加载一次数据
  }

  void _loadData() {
    // 数据加载逻辑
  }

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用这个方法
    return Scaffold(/* 页面内容 */);
  }
}

4. 缓存数据避免重复加载 #

不管页面是否重建，把加载的数据缓存起来，比如用状态管理工具（Riverpod、Provider等）或者单例缓存：

// 用Riverpod的FutureProvider缓存数据，只会加载一次
final listDataProvider = FutureProvider<List<Item>>((ref) async {
  return await fetchItemsFromApi();
});

// 在ListPage中使用
class ListPage extends ConsumerWidget {
  const ListPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final dataState = ref.watch(listDataProvider);
    return dataState.when(
      loading: () => const CircularProgressIndicator(),
      error: (err, stack) => Text('加载失败: $err'),
      data: (items) => ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) => ListTile(
          title: Text(items[index].name),
          onTap: () => context.push('/item/${items[index].id}'),
        ),
      ),
    );
  }
}

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