Flutter - BloC Cubit 功能不会发出状态

Question

我正在创建一个 Flutter 应用程序。我在我的项目中添加了一个 BloC 用于管理状态。 我创建了一个包含数据的列表。我想使用按钮“添加”手动将项目添加到 ListView。

我写了一个代码：

我的物品肘

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

  void addItem(item){
    state.add(item);
    emit(state);
  }
}

提供者的项目页面：

class SearchPage extends StatelessWidget {
  const SearchPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => ItemCubit(),
        child: Search(),
      ),
    );
  }
}

我在 Stateless Widget 中这样调用 BlocBuilder：

body: BlocBuilder<MarketCubit, List<Market>>(
            builder: (context, items) => TabBarView(...))

所以当我从状态调用我的函数时：

Item item = Item(1, 'Item 1');


ElevatedButton(onPressed:(){
  context.read<ItemCubit>().addItem(item);
 }, child: Text('Add Item')),

ListView 没有更新。什么问题？ 非常感谢！

Answer 1

ItemCubit 类超类没有持有你的状态。你应该管理自己的状态。所以，我所说的，我是说在 ItemCubit 类中创建列表变量，每次调用 addItem 方法都会将项目添加到这个列表并发出这个列表。

您的 Cubit 类应如下所示；

abstract class ItemState {
  const ItemState();
}

class ItemInitial extends ItemState {
  const ItemInitial();
}

class ItemStateUpdatedList extends ItemState {
  const ItemStateUpdatedList({required this.list});

  final List<Item> list;
}

class ItemCubit extends Cubit<ItemState> {
  ItemCubit() : super(const ItemInitial());
  
  final List<Item> myItemList = [];

  void addItem(item){
    myItemList.add(item);
    emit(ItemStateUpdatedList(list: myItemList));
  }
}

body: BlocBuilder<ItemCubit, ItemState>(
          builder:(context, state) {
            if(state is ItemStateUpdatedList){
              final list = state.list;
              return TabBarView(...);
            }
            return const SizedBox.shrink();
          },
)

Answer 2

问题在于您只是将项目添加到状态并重新发出相同的（修改后的）列表。当你调用 emit() 时，Bloc 本质上会检查状态对象的值，看它是否是一个新对象，如果它是与最后一个状态“相同的列表”，它将什么也不做。这很令人困惑，因为即使您向列表添加了一个新值，它在某种意义上仍然是同一个对象，只是带有一个新值。

因此，如果您只是创建一个新列表而不是修改原始列表并发出它，那么应该有一个简单的解决方法。

例如，这应该可以解决问题：

emit([...state, newValue])

或

final newList = List.from(state)..add(newValue);
emit(newList);

（我在 bloc 文档中找不到解释这一点的地方，但有许多问题线程在讨论它 - https://github.com/felangel/bloc/issues/2374）

从本质上讲，状态应该是“不可变的”，所以如果你要发出一个新的状态，你实际上应该为你要发出的任何东西创建一个新的实例。我通常使用 state 的方式是为 cubit 跟踪的任何状态创建一个带有 final 字段的类，以及一个可以轻松创建具有任何修改字段的新实例的 copyWith 方法：

YourCubitState{
    final List stateList;
    final otherField;

    const YourCubitState({
        this.stateList = [], 
        this.otherField,
    }); 

    YourCubitState copyWith({
        List? stateList,
        otherField,
    }) => 
        YourCubitState(
           stateList: stateList ?? this.stateList,
           otherField: otherField ?? this.otherField,
        );   

}

如果状态只是一个列表，这可能是不必要的，但如果您发现自己想要向状态添加属性，那么这是一个很好的模式。