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

Question

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

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

代码如下：

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)),
                  ),
                ),

Answer 1

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

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