Flutter bloc 更新列表中的项目

Question

产品 Bloc 类

  final ProductRepositoryImpl _productRepositoryImpl;

  ProductBloc(this._productRepositoryImpl) : super(ProductInitializing()) {
    
    on<AddToCart>((event, emit) => _addToCart(event, emit));
    on<RemoveFromCart>((event, emit) => _removeFromCart(event, emit));
  }
  Future _removeFromCart(
      RemoveFromCart event, Emitter<ProductState> emit) async {
    try {
      final state = this.state;
      if (state is ProductLoaded) {
        List<ProductModel> productList = state.products.map((pro) {
          if (pro.prodId == event.productModel.prodId) {
            if (pro.count > 0) {
              pro.count--;
            }
          }
          return pro;
        }).toList();
        emit(ProductLoaded(products: productList));
      }
    } catch (e) {
      emit(ProductError(message: "Not added to the cart"));
    }
  }

  Future _addToCart(AddToCart event, Emitter<ProductState> emit) async {
    try {
      final state = this.state;

      if (state is ProductLoaded) {
        List<ProductModel> products = state.products.map((pro) {
          if (pro.prodId == event.productModel.prodId) {
            ++pro.count;
          }

          return pro;
        }).toList();
        emit(ProductLoaded(products: products));
      }
    } catch (e, stack) {
      print("somethign wrong ${stack.toString()}");
      emit(ProductError(message: "Not added to the cart"));
    }
  }
 
}

产品事件类

abstract class ProductEvent extends Equatable {
  const ProductEvent();
}

class AddToCart extends ProductEvent {
  final ProductModel productModel;
  const AddToCart(this.productModel);
  @override
  List<Object> get props => [productModel];
}

class RemoveFromCart extends ProductEvent {
  final ProductModel productModel;
  const RemoveFromCart(this.productModel);
  @override
  List<Object> get props => [productModel];
}

产品状态类

abstract class ProductState extends Equatable {
  const ProductState();
}

class ProductInitializing extends ProductState {
  @override
  List<Object> get props => [];
}

class ProductLoading extends ProductState {
  @override
  List<Object> get props => [];
}

class ProductError extends ProductState {
  String message;
  ProductError({required this.message});
  @override
  List<Object> get props => [message];
}
class ProductLoaded extends ProductState {
  final List<ProductModel> products;

  const ProductLoaded({
    required this.products,
  });

  @override
  List<Object> get props => [products];
}

显示产品的产品列表屏幕

              builder: ((context, state) {
                final state = context.read<ProductBloc>().state;
                if (state is ProductLoaded) {
                  return SliverGrid(
                    delegate: SliverChildBuilderDelegate(
                      (context, index) {
                        return StatefulBuilder(builder: (context, setState) {
                          return ProductItem(
                            productModel: state.products[index],
                            addToCart: (product) {
                              context
                                  .read<ProductBloc>()
                                  .add(AddToCart(product));
                            },
                            removeFromCart: (product) {
                              product.count > 0 ? product.count-- : 0;
                              context
                                  .read<ProductBloc>()
                                  .add(RemoveFromCart(product));
                            },
                          );
                        });
                      },
                      childCount: state.products.length,
                    ),
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      mainAxisSpacing: 1,
                      crossAxisSpacing: 1,
                      childAspectRatio: .6,
                    ),
                  );
                }
                return const SliverToBoxAdapter(child: SizedBox.shrink());
              }),
            ),

在 ListView 中使用的产品项目类

class ProductItem extends StatelessWidget {
  const ProductItem(
      {Key? key,
      required this.productModel,
      required this.addToCart,
      required this.removeFromCart})
      : super(key: key);
  final ProductModel productModel;
  final Function(ProductModel product) addToCart;
  final Function(ProductModel product) removeFromCart;
  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.zero,
      color: Colors.grey[50],
      elevation: 1,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(0.0),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height * .26,
            width: double.infinity,
            child: Card(
              elevation: 0,
              margin: EdgeInsets.zero,
              semanticContainer: true,
              color: secondaryLight,
              clipBehavior: Clip.antiAliasWithSaveLayer,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(0.0),
              ),
              child: CachedNetworkImage(
                imageUrl: productModel.prodImage ??
                    ' https://picsum.photos/250?image=9 ',
                errorWidget: (context, url, error) =>
                    Image.asset('assets/images/logo.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          const SizedBox(
            height: 5,
          ),
          Flexible(
              child: Padding(
            padding: const EdgeInsets.only(left: 5.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  productModel.prodName!,
                  style: kLabelStyleBold,
                ),
                Text(productModel.prodCode!),
                Text(productModel.prodMrp!),
              ],
            ),
          )),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Flexible(
                child: IconButton(
                  onPressed: () => removeFromCart(productModel),
                  icon: const Icon(Icons.remove_circle_outline),
                ),
              ),
              Builder(builder: (context) {
                context.watch<ProductBloc>().state;
                return Flexible(
                  child: Text(
                    productModel.count.toString(),
                    style: kLabelStyleBold.copyWith(
                      fontSize: 22,
                    ),
                  ),
                );
              }),
              Flexible(
                child: IconButton(
                  onPressed: () => addToCart(productModel),
                  icon: const Icon(Icons.add_circle_outline),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

在产品项目小部件中，有两个按钮可以管理产品计数器，但不幸的是我无法使用 bloc 获取更新列表。虽然我可以看到事件被执行并且值被更新的 bloc 日志，但是当发出更新列表时它不会反射(reflect)在 UI 上，任何帮助将不胜感激

在产品加载和点击计数器按钮时记录

I/flutter ( 1527): LoadPrdoucts()
I/flutter ( 1527): product from local db 5
I/flutter ( 1527): ProductBloc Transition { currentState: ProductInitializing(), event: LoadPrdoucts(), nextState: ProductLoaded([ProductModel(), ProductModel(), ProductModel(), ProductModel(), ProductModel()]) }
I/flutter ( 1527): ProductBloc Change { currentState: ProductInitializing(), nextState: ProductLoaded([ProductModel(), ProductModel(), ProductModel(), ProductModel(), ProductModel()]) }
E/FlutterJNI( 1527): Failed to decode image
E/FlutterJNI( 1527): android.graphics.ImageDecoder$DecodeException: Failed to create image decoder with message 'unimplemented'Input contained an error.
E/FlutterJNI( 1527):    at android.graphics.ImageDecoder.nCreate(Native Method)
E/FlutterJNI( 1527):    at android.graphics.ImageDecoder.access$200(ImageDecoder.java:169)
E/FlutterJNI( 1527):    at android.graphics.ImageDecoder$ByteBufferSource.createImageDecoder(ImageDecoder.java:246)
E/FlutterJNI( 1527):    at android.graphics.ImageDecoder.decodeBitmapImpl(ImageDecoder.java:1754)
E/FlutterJNI( 1527):    at android.graphics.ImageDecoder.decodeBitmap(ImageDecoder.java:1747)
E/FlutterJNI( 1527):    at io.flutter.embedding.engine.FlutterJNI.decodeImage(FlutterJNI.java:524)
I/flutter ( 1527): AddToCart(ProductModel())
I/flutter ( 1527): AddToCart(ProductModel())
I/flutter ( 1527): AddToCart(ProductModel())
I/flutter ( 1527): RemoveFromCart(ProductModel())
I/flutter ( 1527): RemoveFromCart(ProductModel())

Answer 1

一般来说，我会使用 BLoc 或 Cubit 创建一个有状态的类。然后我会通过像扩展一样将类与我的 Bloc 或 Cubit 类绑定(bind)

Class WorkoutsCubit extends Cubit {WorkoutsCubit() : super([]);....................................................................

我的锻炼类(class)是响应式(Reactive)的和有状态的，因为

class Workout extends Equatable {
  final String? title;
  final List<Exercise> exercises;

}

然后从我的 WorkoutsCubit 类中调用事件(对于 Bloc)或方法(对于 cubit)

 myEditedMethod(Workout workout, int index) {
// ignore: prefer_const_literals_to_create_immutables
Workout newWorkout = Workout(title: workout.title, exercises: []);
int exIndex = 0;
int startTime = 0;
for (var ex in workout.exercises) {
  print("...the title is ${workout.title}");
  print("...the prelude is ${ex.title}");
  newWorkout.exercises.add(Exercise(
      prelude: ex.prelude,
      title: ex.title,
      duration: ex.duration,
      index: exIndex,
      startTime: startTime));
  exIndex++;
  startTime += ex.prelude! + ex.duration!;
}
/*
because we have a list of states we we could do index
 */
state[index] = newWorkout;
print("all data is ${state.length}");
emit([...state]);

从 using 中调用 myEditedMethod()

 `BlocProvider.of<WorkoutCubits>.myEditedMethod()`

这是更新列表的方法之一。更多信息在这里 https://learnflutter.co/flutter-bloc-update-item-in-the-list/

现在通常是使用 BLoC 或 Cubit 更新列表