如何通过BLoC库使用flutter_bloc模式？

Question

我正在使用颤振编写一个小的tamagotchi应用程序，现在我正在学习如何使用flutter_bloc库。当用户点击屏幕上的宠物图像时，它必须重新绘制一个CircularPercentIndicator小部件，但是它不能工作。我正在尝试使用BlocBuilder和BlocProvider类将视图与一个区块连接起来，但这并没有帮助。点击宠物小部件之后，动画就会被转发，但是saturationCount和CircularPercentIndicator的状态还没有更新。

这是我的宠物喂养的BLoC：

class PetFeedingBloc extends Bloc<SaturationEvent, SaturationState> {
  PetFeedingBloc()
      : super(const SaturationState(saturationCount: 40.0)) {
    on<SaturationSmallIncrementEvent>((event, emit) => state.saturationCount + 15.0);
    on<SaturationBigIncrementEvent>((event, emit) => state.saturationCount + 55.0);
    on<SaturationDecrementEvent>((event, emit) => state.saturationCount - 2.0);
  }
}

在SaturationBarWidget类中，我试图将小部件中的百分比指示器与BLoC连接起来，但它不起作用。下面是：

class SaturationBarWidget extends StatefulWidget {
  const SaturationBarWidget({Key? key}) : super(key: key);

  @override
  State<SaturationBarWidget> createState() => SaturationBarWidgetState();
}

class SaturationBarWidgetState extends State<SaturationBarWidget> {
  @override
  void initState() {
    Timer? timer;
    timer = Timer.periodic(const Duration(milliseconds: 3000), (_) {
      setState(() {
        context.read<PetFeedingBloc>().add(SaturationDecrementEvent());
        if (context.read<PetFeedingBloc>().state.saturationCount <= 0) {
          timer?.cancel();
        }
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<PetFeedingBloc, SaturationState>(builder: (context, state){
      return CircularPercentIndicator(
        radius: 50.0,
        lineWidth: 20.0,
        animateFromLastPercent: true,
        percent: context.read<PetFeedingBloc>().state.saturationCount / 100,
        center: const Icon(
          Icons.emoji_emotions_outlined,
          size: 50.0,
        ),
        backgroundColor: Colors.blueGrey,
        progressColor: Colors.blue,
      );
    });
  }
}

这里是我的具有图像的PetWidget类，需要点击：

class PetWidget extends StatefulWidget {
  const PetWidget({Key? key}) : super(key: key);

  @override
  State<PetWidget> createState() => PetWidgetState();
}

class PetWidgetState extends State<PetWidget> with TickerProviderStateMixin {
  late Animation<Offset> _animation;
  late AnimationController _animationController;
  static GlobalKey<SaturationBarWidgetState> key = GlobalKey();
  bool reverse = true;
  Image cat = Image.asset('images/cat.png');

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 4));
    _animation = Tween<Offset>(begin: Offset.zero, end: const Offset(1, 0))
        .animate(CurvedAnimation(
            parent: _animationController, curve: Curves.elasticIn));
    _animationController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _animationController.reverse();
      }
    });
    //_animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(child:
        BlocBuilder<PetFeedingBloc, SaturationState>(builder: (context, state) {
          return Center(
              child: SizedBox(
                width: 300,
                height: 400,
                child: SlideTransition(
                  position: _animation,
                  child: GestureDetector(
                    child: cat,
                    onDoubleTap: () {
                      context.read<PetFeedingBloc>().add(SaturationBigIncrementEvent());
                      _animationController.forward();
                    },
                    onTap: () {
                      context.read<PetFeedingBloc>().add(SaturationSmallIncrementEvent());
                      _animationController.forward();
                    },
                  ),
                ),
              )
          );
        })
    );
  }
}

Answer 1

我认为您必须在PetFeedingBloc中调用emit方法。

class PetFeedingBloc extends Bloc<SaturationEvent, SaturationState> {
  PetFeedingBloc()
      : super(const SaturationState(saturationCount: 40.0)) {
    on<SaturationSmallIncrementEvent>((event, emit) => emit(SaturationState(saturationCount: state.saturationCount + 15.0)) );
   ...
  }
}