Flutter Bloc 从不同的小部件更改状态

Question

在我的应用主页上，我有一个 ListView ，每当用户点击新页面时，它就会重新构建。我已经使用 flutter_bloc 插件实现了 block 模式，但我不知道如何从另一个小部件更改状态。

Answer 1

使用 flutter block 更改状态时必须记住两件事:

• block 的依赖注入(inject) (DI)。
• 与您的 bloc 实例交互。

一个 block 的依赖注入(inject)

案例 1. 您需要在一个路由中为小部件子树提供 bloc。

---

要为子树中的多个小部件提供一个 block 的单个实例，请使用 BlocProvider小部件。它创建 bloc 实例，在需要时自动处理它，并通过 BlocProvider.of<T>(context) 将 bloc 提供给它的 child 。 , 其中 T是您所在 Bloc 的名称:

BlocProvider(
  create: (BuildContext context) => BlocA(),
  child: ChildA(),
);

请记住，默认情况下它是使用属性 lazy: true 创建的, 表示 create: (BuildContext context) => BlocA(),将在调用 BlocProvider.of<T>(context) 后执行.如果你不想要它 - 设置 lazy: false提前。

案例 2。您需要从另一个路由(到另一个上下文)为小部件提供 bloc。

---

BlocProvider自动处理带有实例化新路由上下文的 bloc 实例，但如果您使用 BlocProvider.value 则不会发生这种情况:

BlocProvider.value(
  value: BlocProvider.of<BlocA>(context),
  child: ScreenA(),
);

重要提示: BlocProvider.value应该只用于为新子树提供现有实例，不要用它创建 Bloc 实例

与你的 bloc 实例交互

从 bloc v6.1.0 开始context.bloc和 context.repository已弃用，取而代之的是 context.read和 context.watch .

context.select允许根据 block 状态的一部分更新 UI:

    final name = context.select((UserBloc bloc) => bloc.state.user.name);

context.read使用 BuildContext 访问 block 并且不会导致重建。 context.watch从其类型的最近祖先提供者处获取值并订阅提供者。

访问 Bloc 的状态

如果由于 block 值更改而需要重建小部件，请使用 context.watch或 BlocBuilder :

// Using context.watch at the root of the build method will result in the entire widget being rebuilt when the bloc state changes. 
@override
Widget build(BuildContext context) {
  final state = context.watch<MyBloc>().state;
  return Text('$state');
}

或使用 BlocBuilder :

// If the entire widget does not need to be rebuilt, either use BlocBuilder to wrap the parts that should rebuild
@override
Widget build(BuildContext context) {
  return BlocBuilder<MyBloc, MyState>(
    builder: (context, state) => Text('$state'),
  );
}

访问 Bloc 以便添加事件

使用 context.read:

@override
Widget build(BuildContext context) {
  return ElevatedButton(
    onPressed: () => context.read<MyBloc>().add(MyEvent()),
    ...
  )
}