flutter - 异步迭代列表并发出状态更改

Question

我正在尝试上传附件列表并在迭代时更新每个元素的状态。如果上传成功完成，我们发出uploadSucceded = true，否则为false。

Future<void> uploadAttachments() async {
    int uploadableAttachmentIndex = 0;
    emit(state.copyWith(isUploadingAttachments: true));
    final attachments = generateFormAttachmentList();

    await Future.forEach(
      attachments,
      (UploadableAttachment attachment) async {
        final success = await uploadFile(attachment);
        if (success) {
          debugPrint('SUCCESS!!!!!');
          emit(state.copyWith(
            uploadableAttachments: state.uploadableAttachments!
              ..[uploadableAttachmentIndex].uploadSucceded = true,
          ));
        } else {
          debugPrint('FAILED!!!');
          emit(state.copyWith(
              uploadableAttachments: state.uploadableAttachments!
                ..[uploadableAttachmentIndex].uploadSucceded = false,
              isUpdatingTask: false,
              taskUpdateError: 'Error uploading attachment',
              attachmentUploadsFailed: true));
        }
        uploadableAttachmentIndex++;
      }
    );
    emit(state.copyWith(isUploadingAttachments: false));
  }

当值被设置时，重建不会触发，直到我们在函数末尾点击发射，导致上传的状态一次重新构建。我不确定为什么 forEach 内部的重建没有触发，但我认为问题出在这个函数上。这是 bloc builder 的样子：

class _UploadAttachmentsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<TaskDetailsCubit, TaskDetailsState>(builder: (context, state) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          state.attachmentUploadsFailed
              ? _UploadErrorWidget()
              : _UploadPageHeader(state.isUploadingAttachments),
          SizedBox(height: 40),
          Expanded(
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: state.uploadableAttachments!.length,
              itemBuilder: (context, index) {
                return _UploadProgressListItem(file: state.uploadableAttachments![index]);
              },
            ),
          ),
        ],
      );
    });
  }
}

UploadSucceded 设置后，UploadProgressListItem 应该正在重建。

class _UploadProgressListItem extends StatelessWidget {
  final UploadableAttachment file;

  _UploadProgressListItem({required this.file});

  Widget getListTileIcon() {
    if (file.uploadSucceded == true)
      return Icon(Icons.check, color: CoreTheme.green);
    else if (file.uploadSucceded == false)
      return Icon(Icons.error, color: CoreTheme.error);
    else
      return CircularProgressIndicator();
  }

  Widget getSubtitle() {
    if (file.uploadSucceded == true)
      return Text(
        'Complete',
        style: CoreTheme.textStyleLabel(color: FontColor.green),
      );
    else if (file.uploadSucceded == false)
      return Text(
        'Problem Uploading',
        style: CoreTheme.textStyleLabel(color: FontColor.red),
      );
    else
      return Text('Uploading', style: CoreTheme.textStyleLabel());
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(14.0),
      child: ListTile(
        leading: getListTileIcon(),
        title: Text(
          file.filename,
          overflow: TextOverflow.ellipsis,
          style: CoreTheme.textStyleBodyRegular(),
        ),
        subtitle: getSubtitle(),
      ),
    );
  }
}

class UploadableAttachment {
  bool? uploadSucceded;
  final File file;
  final String filename;
  final String fieldKey;

  UploadableAttachment({
    this.uploadSucceded,
    required this.file,
    required this.filename,
    required this.fieldKey,
  });
}

我想知道我是否采取了错误的异步路线。我应该使用流而不是列表吗？我应该使用 BlocListener 还是 BlocConsumer 而不是 BlocBuilder？

Answer 1

您可以使用 UploadableAttachment 类中的方法添加副本。

final _newList = state.uploadableAttachments.[ 
uploadableAttachmentIndex] = state.uploadableAttachments. 
[uploadableAttachmentIndex].copWith(uploadSucceded: true);

在首先检查索引什么是上传值之后，您应该添加一个参数，例如，正在加载，因为如果您在列表中添加一些项目，它将在 cubit 或 bloc 之后立即更新（参考添加的自动性）值'不显示新数据。最后，我一般为这个问题添加了加载参数。

emit(state.copyWith(
 uploadableAttachments: _newList,
 isUpload:true
));