Flutter如何将QuizesBloc中的指定Quiz对象传入QuizBloc的QuizState

1. 定义QuizBloc的事件类 #

先给QuizBloc创建一个用于接收选中Quiz的事件类：

class LoadSelectedQuiz extends Equatable {
  final Quiz quiz;

  const LoadSelectedQuiz(this.quiz);

  @override
  List<Object?> get props => [quiz];
}

2. 在QuizBloc中处理事件并更新状态 #

在QuizBloc里实现事件的处理逻辑，将传入的Quiz存入对应的状态中（以Bloc v8+版本为例）：

class QuizBloc extends Bloc<QuizEvent, QuizState> {
  QuizBloc() : super(QuizInitial()) {
    on<LoadSelectedQuiz>((event, emit) {
      emit(QuizLoaded(quiz: event.quiz));
    });
  }
}

// 对应的QuizState示例
abstract class QuizState extends Equatable {
  const QuizState();

  @override
  List<Object?> get props => [];
}

class QuizInitial extends QuizState {}

class QuizLoaded extends QuizState {
  final Quiz quiz;

  const QuizLoaded({required this.quiz});

  @override
  List<Object?> get props => [quiz];
}

3. 给ListView列表项绑定点击事件 #

在展示Quiz列表的页面中，为每个列表项添加点击回调，触发QuizBloc的事件：

ListView.builder(
  itemCount: state.quizzes.length,
  itemBuilder: (context, index) {
    final quiz = state.quizzes[index];
    return InkWell(
      onTap: () {
        // 获取QuizBloc实例并传入选中的Quiz
        context.read<QuizBloc>().add(LoadSelectedQuiz(quiz));
        // 跳转到Quiz详情页（如果需要）
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => QuizDetailPage()),
        );
      },
      child: ListTile(
        title: Text(quiz.title),
        subtitle: Text(quiz.description),
      ),
    );
  },
)

4. 在目标页面监听QuizState获取数据 #

在需要展示单个Quiz的页面（比如详情页），通过BlocBuilder监听QuizBloc的状态变化，拿到传入的Quiz对象：

class QuizDetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Quiz详情')),
      body: BlocBuilder<QuizBloc, QuizState>(
        builder: (context, state) {
          if (state is QuizLoaded) {
            return Column(
              padding: const EdgeInsets.all(16),
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(state.quiz.title, style: Theme.of(context).textTheme.headlineMedium),
                const SizedBox(height: 12),
                Text(state.quiz.description),
                // 其他Quiz内容的展示逻辑
              ],
            );
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

注意事项 #

• 确保Quiz类实现了Equatable（或者手动重写==和hashCode），保证Bloc能正确识别状态变化。
• 如果列表页和详情页不在同一个BlocProvider作用域内，需要在全局（比如MaterialApp外层）用BlocProvider提供QuizBloc实例，或者直接通过页面构造函数传递Quiz对象（无需Bloc传状态，根据需求选择）。

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