如何在ListView Builder中嵌套DataModelBuilder并获取每个项的数据模型

问题场景 #

使用嵌套的DataModelBuilder构建关注列表时，列表项数量与关注用户数匹配，但所有项显示的是同一个用户名。代码示例如下：

DataModelBuilder<List<FollowsModel>>{
  stream: getBloc(context).getFollowerHander.stream;
  dataBuilder: (context, dataModel){
    if(success){
      return ListView.builder(
        itemCount: dataModel.data.length,
        itemBuilder: (context, index){
          return DataModelBuilder<UserProfileModel>(
            stream: getBloc(context).getUserProfileHandler.stream;
            dataModel : (context, dataModel){
              // 构建用户信息UI
            }  
          );
        } 
      );
    }
  }
}

问题原因 #

所有子DataModelBuilder都监听同一个全局的getUserProfileHandler.stream，当任意一个用户的资料更新时，所有列表项都会接收并渲染这一份最新数据，最终导致内容重复。

解决方案 #

核心是让每个列表项的DataModelBuilder监听对应用户ID的专属数据流，具体步骤：

• 改造Bloc中的用户资料获取逻辑，新增带用户ID参数的方法，返回对应用户的数据流，比如getUserProfileStream(String userId)
• 在ListView.builder的itemBuilder中，根据当前索引获取FollowsModel里的用户ID，传入上述方法获取专属数据流
• 将子DataModelBuilder的stream替换为该专属数据流

修改后的代码示例：

DataModelBuilder<List<FollowsModel>>{
  stream: getBloc(context).getFollowerHander.stream;
  dataBuilder: (context, dataModel){
    if(success){
      return ListView.builder(
        itemCount: dataModel.data.length,
        itemBuilder: (context, index){
          // 获取当前项的用户ID
          final userId = dataModel.data[index].userId;
          return DataModelBuilder<UserProfileModel>(
            // 监听对应用户ID的数据流
            stream: getBloc(context).getUserProfileStream(userId);
            dataModel : (context, userProfile){
              // 使用当前用户的资料渲染UI
              return Text(userProfile.userName);
            }  
          );
        } 
      );
    }
  }
}

额外建议：Bloc内部可以用Map<String, Stream<UserProfileModel>>来维护不同用户的数据流，避免重复发起请求或数据流混淆。

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