如何在flutter中使用'AnimatedModalBarrier'?

Question

我没有找到任何的例子来构造函数 AnimatedModalBarrier.不知道如何使用这个widget像modalbarrier一样。

https:/api.flutter.devflutterwidgetsAnimatedModalBarrier-class.html。

const AnimatedModalBarrier({
  Key key,
  Animation<Color> color,
  this.dismissible = true,
  this.semanticsLabel,
  this.barrierSemanticsDismissible,
}) : super(key: key, listenable: color);

Answer 1

自 AnimatedModalBarrier 的工作方式是禁止与自身背后的小部件进行交互，常见的实现方式是使用一个 Stack. 例如，你想禁用与以下人员的交互。FormWidget挡板必须放置在 FormWidget

Stack(
  alignment: AlignmentDirectional.center,
  children: <Widget>[
    FormWidget,
    _animatedModalBarrier
  ],
)

要创建 AnimatedModalBarrier 本身，你需要创建一个 Animation<Color>. 您可以使用 ColorTween 来制作动画

ColorTween  _colorTween = ColorTween(
  begin: Color.red
  end: Color.blue,
);

AnimationController _animationController = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 1)
);
Animation<Color> _colorTweenAnimation = _colorTween.animate(_animationController);

_animatedModalBarrier = AnimatedModalBarrier(
  color: _colorTweenAnimation
);

源码&完整代码。https:/www.woolha.comtutorialsflutter-using-animatedmodalbarrier-examples