Flutter Cubit Web

Question

为了从 FireStore 检索项目和选择图像，我使用 cubit。

肘：

class ItemCubit extends Cubit<ItemState> {
  ItemCubit(this._dataBase)
      : super(ItemInitial());
  final DataBase _dataBase;
  StreamSubscription streamSubscription;

  Future<void> pickItemImg() async {
    final currentTempImg =
        await ImagePickerWeb.getImage(outputType: ImageType.bytes);
    emit(ItemImgPicked(currentTempImg));
  }

  Future getItem() async {
    streamSubscription = _dataBase.getItem().listen((data) {
      emit(ItemLoaded(data));
    });
  }
}

状态：

@immutable
abstract class ItemState {}

class ItemLoaded extends ItemState {
  final List<Item> item;

  ItemLoaded(this.item);
}

class ItemImgPicked extends ItemState {
  final Uint8List currentTempImg;

  ItemImgPicked(this.currentTempImg);
}

带有块构建器的页面

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          RaisedButton(
            onPressed: () async {
              showDialog(
                context: context,
                builder: (BuildContext context) => Dialog(
                  child: Container(
                    width: 400,
                    child: OutlineButton(
                      onPressed: () async {
                        context.bloc<ItemCubit>().pickProductImg();
                      },
                      child: BlocBuilder<ItemCubit, ItemState>(
                        builder: (context, state) {
                          if (state is ItemImgPicked) {
                            return Image.memory(state.currentTempImg);
                          } else {
                            return Container();
                          }
                        },
                      ),
                    ),
                  ),
                ),
              );
            },
            child: Text('add'),
          ),
          BlocBuilder<ItemCubit, ItemState>(
            builder: (context, state) {
              if (state is ItemLoaded) {
                return Column(
                  children: state.item.map(
                    (item) {
                      return Text(item.name);
                    },
                  ).toList(),
                );
              }
              return CircularProgressIndicator();
            },
          )
        ],
      ),
    );
  }
}

问题是当我在显示对话框中选择图像时，会显示所选择的图像，但同时在项目列表的主页 blocbuilder 上返回CircularProgressIndicator 。 如果我此时使用热重载，它会显示项目列表。 它看起来像项目列表的拾取图像替换状态。 如何解决？

Answer 1

您的主页 bloc 构建器会侦听ItemLoaded ，据我ItemLoaded ，您从未发出过它。 您可以在该行中放置一个断点，它不应该被击中。

也就是说，请更好地对待您的async函数，您错过了等待一些未来，这可能不是您现在的问题，但迟早会成为问题。