如何将一个 Widget 中修改的 Cubit 状态显示到另一个 Widget 中？

问题描述

我正在使用 BLoC 模式开发购物车，但在尝试学习 Cubit 子集时遇到了困难。我的主要问题是如何显示以前更新的 Cubit 的状态？我的流程是下一个...

在产品屏幕上，我增加/减少我想使用的项目。
要推送以更改状态，我单击一个按钮并将项目作为参数发送到 Cubit 函数。
项目列表已更新，我想将其放入产品屏幕之外的另一个小部件中。

代码如下：

main.dart

void main() {HttpOverrides.global = new MyHttpOverrides();
runApp(
RepositoryProvider<AuthenticationService>(
  create: (context) {
    return AuthService();
  },child: MultiBlocProvider(
    providers: [
      BlocProvider<AuthenticationBloc>(
          create: (context) {
            final authService = RepositoryProvider.of<AuthenticationService>(context);
            return AuthenticationBloc(authService)..add(AppLoaded());
          }
      ),BlocProvider<CartCubit>(create: (context) => CartCubit())
    ],child: MyApp(),),)
);
}

product_screen.dart

BlocBuilder<CartCubit,List<Item>>(
              builder: (context,state) {
                return Row(
                  children: [
                    _shoppingItem(0),SizedBox(
                      width: SizeConfig.blockSizeHorizontal * 2,Container(
                      decoration: Boxdecoration(
                        borderRadius: BorderRadius.all(Radius.circular(10.0)),color: Color(0xFF48AD71),child: IconButton(
                        onpressed: () {
                          for (int i = 1; i <= counter; i++) {
                            items.add(widget.item);
                            print('something');
                          }
                          context.read<CartCubit>().addToList(items);
                        },icon: Icon(
                            Icons.shopping_bag),color: Colors.white,],);
              },)

cart_cubit.dart

class CartCubit extends Cubit<List<Item>> {
CartCubit() : super([]);

void addToList(List<Item> items) {
state.addAll(items);
emit(state);
print(state);
}
}

我应该在购物车屏幕上添加什么才能获得 Cubit State 的值？另外，使用 bloc 而不是 cubit 会更好地处理这个问题吗？

编辑：根据 Loren.A 的评论，我删除了 ProductScreen 的 BlocBuilder 并将其添加到 CartScreen。

class _CartScreenState extends State<CartScreen> {

@override
Widget build(BuildContext context) {
SizeConfig().init(context);
return SingleChildScrollView(
  child: BlocBuilder<CartCubit,List<Item>>(
    builder: (context,state) {
      return Column()
...
...
      Align(
                  alignment: Alignment.topRight,child: Text(
                    state.length.toString(),// this is not updating
                    textAlign: TextAlign.end,style: TextStyle(
                        fontFamily: 'SinkinSans',fontSize: 12.0,fontWeight: FontWeight.w400,color: Color(0xFFC9C9C9)),

解决方法

Cubit 很适合这个。只需添加另一个 BlocBuilder<CartCubit,List<Item>>，您就可以根据该列表更新应用程序中任意位置的小部件。因此，只需将另一个添加到您的购物车页面并在其中执行您必须执行的操作。它将反映以前的更改。

编辑：刚刚注意到您实际上并未在产品屏幕中重建任何小部件，因此您拥有的 BlocBuilder 并没有真正做任何事情。您可以删除它，然后在需要反映列表值的地方使用它。您仍然可以在不位于 addToList 中的情况下触发该 BlocBuilder 方法。

bloc cubit dart