使用自定义的ChangeNotifier

问题描述

我只是在尝试新的river_pod抖动状态管理库。我的目标很简单。主页上的GestureDetector收听垂直拖动并相应地更新动画控制器。我想在其他地方听这个动画。我编写了以下代码，并且按预期方式工作。但是我不觉得我在以正确的方式初始化提供程序。

// a custom notifier class
class AnimationNotifier extends ChangeNotifier {
  final AnimationController _animationController;

  AnimationNotifier(this._animationController) {
    _animationController.addListener(_onAnimationControllerChanged);
  }

  void forward() => _animationController.forward();
  void reverse() => _animationController.reverse();

  void _onAnimationControllerChanged() {
    notifyListeners();
  }

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

  double get value => _animationController.value;
}

// provider variable,(not initialized here)
var animationProvider;

// main Widget
class GestureControlledAnimationDemo extends StatefulWidget {
  @override
  _GestureControlledAnimationDemoState createState() =>
      _GestureControlledAnimationDemoState();
}

class _GestureControlledAnimationDemoState
    extends State<GestureControlledAnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  double get maxHeight => 420.0;

   @override
  void initState() {
    _controller = AnimationController(
      vsync: this,duration: const Duration(seconds: 1),);
    // provider is initialized here
    animationProvider = ChangeNotifierProvider((_) {
      return AnimationNotifier(_controller);
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      title: 'GestureControlled',body: GestureDetector(
        onVerticalDragUpdate: _handleDragUpdate,onVerticalDragEnd: _handleDragEnd,child: Container(
          color: Colors.red,child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,children: [
                Text(
                  'Yo',style: TextStyle(color: Colors.white),),NotifierTest(),],);
  }

  void _handleDragUpdate(DragUpdateDetails details) {
    _controller.value -= details.primaryDelta / maxHeight;
  }

  void _handleDragEnd(DragEndDetails details) {
    if (_controller.isAnimating ||
        _controller.status == AnimationStatus.completed) return;

    final double flingVelocity =
        details.velocity.pixelsPerSecond.dy / maxHeight;
    if (flingVelocity < 0.0) {
      _controller.fling(velocity: max(2.0,-flingVelocity));
    } else if (flingVelocity > 0.0) {
      _controller.fling(velocity: min(-2.0,-flingVelocity));
    } else {
      _controller.fling(velocity: _controller.value < 0.5 ? -2.0 : 2.0);
    }
  }
}

// Widget which uses the provider
class NotifierTest extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final animationNotifier = useProvider(animationProvider);
    double count = animationNotifier.value * 1000.0;
    return Container(
      child: Text(
        '${count.floor()}',);
  }
}

由于需要动画控制器实例来创建AnimationNotifier的实例，因此只能在_controller初始化之后才能完成。因此，在initState()中，我已经初始化了_controller和animationProvider。这是使用Riverpod Provider的正确方法吗？ 如果没有，可以进行哪些修改？

解决方法

首先，我强烈建议使用钩子-这样会大大减少代码的样板，例如，您的类声明将变为：

class GestureControlledAnimationDemo extends HookWidget {
  double get maxHeight => 420.0;

  @override
  Widget build(BuildContext context) {
    final _controller = useAnimationController(duration: Duration(seconds: 1));
    ...
  }

这消除了对initState，dispose等的需求。

第二，您不一定要在类内部创建非静态提供程序。相反，您可以在全局范围内创建它，或者在这种情况下，有必要在自定义通知程序上添加为静态成员。

class AnimationNotifier extends ChangeNotifier {
  ...
  static final provider = ChangeNotifierProvider((_) {
    return AnimationNotifier(controller);
  });
}

但是，等等，在此范围内没有名为controller的变量，那么我们如何获得访问权限？我们可以为AnimationController创建提供程序，也可以将您的提供程序变成family，以便我们可以接受AnimationController作为参数。我将与家人一起演示这种方法：

class AnimationNotifier extends ChangeNotifier {
  ...
  static final provider = ChangeNotifierProvider.autoDispose.family<AnimationNotifier,AnimationController>((_,AnimationController controller) {
    return AnimationNotifier(controller);
  });
}

我添加了autoDispose，因为您可能希望在不再需要它们时将其处置。现在，我们使用提供程序：

class GestureControlledAnimationDemo extends HookWidget {
  double get maxHeight => 420.0;

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(duration: Duration(seconds: 1));
    final provider = useProvider(AnimationNotifier.provider(controller));
    ...
  }

如果您确实使用了钩子，请确保将Riverpod依赖项更改为hooks_riverpod。

编辑：

对于您的用例，您似乎可以将当前控制器存储在StateProvider中，然后从ChangeNotifierProvider中读取它，而不是使用族。

final controllerProvider = StateProvider<AnimationController>((_) => null);

class AnimationNotifier extends ChangeNotifier {
  ...
  static final provider = ChangeNotifierProvider.autoDispose<AnimationNotifier>((ref) {
    final controller = ref.read(controllerProvider)?.state;
    return AnimationNotifier(controller);
  });
}

class GestureControlledAnimationDemo extends HookWidget {
  double get maxHeight => 420.0;

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(duration: Duration(seconds: 1));

    final currentController = useProvider(controllerProvider);
    currentController.state = controller;
    
    final notifier = useProvider(AnimationNotifier.provider);
    ...
  }

这应该有效。请注意，在发布Riverpod 0.6.0时，您还可以自动处理StateProvider。