避免在 Flutter 中与多个 Widget 实例共享 Bloc 状态答案

【问题标题】：Avoid Bloc state-sharing with multiple Widget instances in Flutter避免在 Flutter 中与多个 Widget 实例共享 Bloc 状态
【发布时间】：2021-03-23 23:32:57
【问题描述】：

大家好，我正在使用带有 bloc 的 Flutter，我正在尝试显示一个频道列表，您可以“关注”或“取消关注”。

我有一个自定义 ChannelContainer 小部件，它加载一个包含频道标题的列表和一个自定义小部件 JoinButton，它显示用户是否可以根据状态“关注/取消关注” （如果频道已被关注或未关注）。

  Widget _getChannelsList() {
    List<Post> channelList = ContentService().getAllChannels();
    return ListView.separated(
      itemBuilder: (_, i) => ChannelContainer(
          title: channelList[i].title,
          description: channelList[i].description,
          idChannel: channelList[i].id),
      separatorBuilder: (_, i) => SizedBox(height: 5.0),
      itemCount: channelList.length,
    );
  }

这是我的自定义 JoinButton 小部件：

    @override
  Widget build(BuildContext context) {
    final channelBloc = BlocProvider.of<ChannelBloc>(context);
    channelBloc.add(GetJoinStatus(idChannel));

    return Container(
      child: BlocBuilder<ChannelBloc, ChannelState>(builder: (context, state) {
        var userIsJoined = state.userIsJoined;
        if (userIsJoined) {
          return ElevatedButton(
            child: Text('Unfollow'),
            onPressed: () {},
          );
        } else {
          return ElevatedButton(
            child: Text('Follow'),
            onPressed: () {},
          );
        }
      }),
    );
  }

我做了一个测试，检查了 idChannel 并对偶数返回真，对奇数返回假，并认为当我创建多个 JoinButtons 时，每个都会保持它们的状态（跟随或不跟随）但是因为每次实例化 JoinButton 并且状态更改时我都会触发 GetJoinStatus() 事件，并且所有按钮都会重新构建并获得相同的状态。

所以，最后我有一个 JoinButtons 列表，它们都只得到关注或取消关注，但没有混合结果。

获得预期结果的最佳方法是什么？我已经尝试了很多可行的方法，但任何与 bloc 工作流兼容的方法......提前谢谢你！

【问题讨论】：

标签： flutter bloc flutter-bloc

【解决方案1】：

我认为最好的方法是在你的 bloc 状态中有一个地图，其键是频道 ID，如果加入，则值为布尔值 true，否则为 false。

【讨论】：