如何让MovieDetailsBloc实例在页面导航时保持持久化？

问题根源 #

你遇到的核心问题是Bloc实例的作用域管理不当，导致页面导航后状态监听失效：

1. 手动传递Bloc实例的方式破坏了Bloc的作用域规则，详情页返回后列表页的状态监听链路断裂；
2. MovieDetailsPage中使用BlocProvider.create提供已有实例是错误用法——create用于初始化新实例，已有实例应该用BlocProvider.value；
3. 局部创建的Bloc在页面导航时，容易出现状态同步问题。

解决方案（推荐方案：提升Bloc作用域） #

将MovieDetailsBloc的创建移到导航栈的上层（比如App根节点），让它的生命周期覆盖整个电影浏览流程，避免手动传递实例的问题。

步骤1：在App根节点提供Bloc #

修改main.dart，用MultiBlocProvider全局提供所需的Bloc实例：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_recruitment_task/movies/bloc/movies_bloc.dart';
import 'package:flutter_recruitment_task/movie_details/bloc/movie_details_bloc.dart';
import 'package:flutter_recruitment_task/services/api_service.dart';

void main() {
  final apiService = ApiService();
  runApp(
    MultiBlocProvider(
      providers: [
        BlocProvider(create: (_) => MoviesBloc(apiService: apiService)),
        BlocProvider(create: (_) => MovieDetailsBloc(apiService: apiService)),
      ],
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Movie Browser',
      home: MovieListPage(),
    );
  }
}

步骤2：修改MovieListPage，移除局部Bloc创建 #

删除手动创建和管理MovieDetailsBloc的代码，直接通过上下文获取实例：

// 移除以下代码：
// late final MovieDetailsBloc movieDetailsBloc;
// 
// @override
// void initState() {
//   movieDetailsBloc = MovieDetailsBloc(apiService: apiService);
//   super.initState();
// }
// 
// @override
// void dispose() {
//   movieDetailsBloc.close();
//   super.dispose();
// }

// 修改导航逻辑和卡片点击事件：
IconButton(
  icon: const Icon(Icons.movie_creation_outlined),
  onPressed: () {
    Navigator.of(context).push(
      MaterialPageRoute(builder: (_) => const MovieDetailsPage()),
    );
  },
),

// 修改MovieCard的onTap：
onTap: () {
  context.read<MovieDetailsBloc>().add(
    MovieSelected(query: movies[index].id.toString()),
  );
  Navigator.of(context).push(
    MaterialPageRoute(builder: (_) => const MovieDetailsPage()),
  );
},

步骤3：修改MovieDetailsPage，通过上下文获取Bloc #

移除接收Bloc参数的逻辑，直接从上下文读取实例，同时可以改为无状态Widget：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_recruitment_task/movie_details/bloc/movie_details_bloc.dart';
import 'package:flutter_recruitment_task/movie_details/models/movie_detail_placeholder.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MovieDetailsBloc, MovieDetailsState>(
      buildWhen: (previous, current) => previous != current,
      builder: (context, state) {
        final details = [
          MovieDetailPlaceholder(
            title: 'Budget', 
            content: '\$ ${state.movie.budget}'
          ),
          MovieDetailPlaceholder(
            title: 'Revenue', 
            content: '\$ ${state.movie.revenue}'
          ),
          MovieDetailPlaceholder(
            title: 'Should I watch it today?', 
            content: context.read<MovieDetailsBloc>().shouldIWatchIt()
          ),
        ];

        return Scaffold(
          appBar: AppBar(title: Text(state.movie.title)),
          body: ListView.separated(
            separatorBuilder: (context, index) => Container(
              height: 1.0, 
              color: Colors.grey.shade300
            ),
            itemBuilder: (context, index) => Container(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Text(
                    details[index].title, 
                    style: Theme.of(context).textTheme.headline5
                  ),
                  const SizedBox(height: 8.0),
                  Text(
                    details[index].content, 
                    style: Theme.of(context).textTheme.subtitle1
                  ),
                ],
              ),
            ),
            itemCount: details.length,
          ),
        );
      },
    );
  }
}

备选方案（快速修复现有代码） #

如果暂时不想调整全局作用域，可以修正BlocProvider的用法：

1. 在MovieListPage导航时用BlocProvider.value包裹详情页：

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (_) => BlocProvider.value(
      value: movieDetailsBloc,
      child: const MovieDetailsPage(),
    ),
  ),
);

2. 修改MovieDetailsPage，移除Bloc参数，通过上下文获取实例（同步骤3）。

额外注意事项 #

• 确保MovieDetailsState和MovieDetails类正确使用Equatable，这样buildWhen才能准确判断状态变化；
• 全局Bloc的关闭由MultiBlocProvider自动处理，无需手动调用close()；
• 避免在Widget的build方法中直接调用Bloc的业务方法（如shouldIWatchIt()），可以考虑将逻辑移到Bloc内部或使用BlocSelector优化。

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