Flutter - 在复杂的 UI 中应该如何进行块通信？答案

【问题标题】：Flutter - How should be bloc communications in complex UI?Flutter - 在复杂的 UI 中应该如何进行块通信？
【发布时间】：2020-04-19 23:49:59
【问题描述】：

我想就我感兴趣的话题获得一些建议。最好的方法和最佳实践是什么？我试图绘制一个关于这个主题的 UI。我正在使用flutter_bloc 包。

场景：我有一个如图所示的列表，底部有分数按钮。如果未在列表中进行选择，按钮将不会处于活动状态。当我从列表中选择一个项目时，按钮处于活动状态。当我按下乐谱按钮时，乐谱将写入列表中的选定元素，乐谱按钮再次变为非活动状态。

这个用户界面看起来很简单，但我的问题是用户界面更复杂。 所以我肯定会在一个屏幕上使用多个块。

我想知道如何以最佳方式在集团之间进行这种交流？我应该在顶层创建父块吗？

【问题讨论】：

标签： flutter dart mobile bloc

【解决方案1】：

你应该有一个单独的块来控制整个屏幕。在您的集团状态下，您可以拥有一个保存所选项目（或其索引 - 在这里真的取决于您）的属性。您的点按钮将通过BlocBuilder 基于此道具启用/禁用。在点按钮上点击您只需添加一个事件，如PointsAssigned(amount: 50) 或FiftyPointsAssigned() - 再次由您决定。此事件将映射到点附加到所选项目的状态，并将通过 BlocBuilder 重建 UI，以便反映您的更改。

【讨论】：

【解决方案2】：

可以在同一上下文中使用多个 bloc。您可以使用来自flutter_bloc 的MultiBlocProvider 然后，您可以访问 bloc 数据并交流您在 Bloc 中定义的任何内容。

Widget build(BuildContext context) {
   return MultiBlocProvider(
            providers: [
              BlocProvider<TodoBloc>(create: (BuildContext context) => TodoBloc()),
              BlocProvider<PointBloc>(
                  create: (BuildContext context) => PointBloc()),
            ],
            child: Scaffold(
                        ......
                   ),
          );
}

【讨论】：

【解决方案3】：

如果不知道您当前的代码是什么样子，就很难解释。你真的不需要额外的集团。您的 Todo 实例可能具有某种布尔属性 onSelected。

Todo(
  final String name;
  final int point;
  final bool onSelected;

  Todo(this.name, this.point, this.onSelected);
)

【讨论】：