translations.dart阅读

  • 它是一个StatefulWidget, 初始化传入一个Listenable
  • 通过Listenable内部绑定了setState方法去触发子类的 build方法.
  • 子类通过继承AnimatedWidget,通过传入的Animation就能触发build方法
  • 以AnimateBuilder为例:

    _AnimatedState
    ....


    @override


    void initState() {


    super.initState();


    widget.listenable.addListener(_handleChange);


    }


    void _handleChange() {


    setState(() {


    // The listenable's state is our build state, and it changed already.


    });


    }


    @override


    Widget build(BuildContext context) => widget.build(context);


    AnimatedWidget


    ....


    @protected


    Widget build(BuildContext context);


    class AnimatedBuilder extends AnimatedWidget


    ....


    @override


    Widget build(BuildContext context) {


    return builder(context, child);


    }

小结:

  • 子类重写父类的build方法,父类完成动画相关的事件半丁,子类在build方法触发时根据当前的animation的value来更新界面。基于这个设计模式,Flutter提供了如下相关Widget:

    DiagnosticableTree (diagnostics.dart)
    Widget (framework.dart)


    StatefulWidget (framework.dart)


    AnimatedWidget (transitions.dart)


    AnimatedModalBarrier (modal_barrier.dart)


    _Shaker (input_decorator.dart)


    _TabStyle (tabs.dart)


    PositionedTransition (transitions.dart)


    RotationTransition (transitions.dart)


    DefaultTextStyleTransition (transitions.dart)


    RelativePositionedTransition (transitions.dart)


    SlideTransition (transitions.dart)


    AnimatedBuilder (transitions.dart)


    SizeTransition (transitions.dart)


    DecoratedBoxTransition (transitions.dart)


    ScaleTransition (transitions.dart)


    AlignTransition (transitions.dart)
  • 上面包括了常用的各种属性动画,如果开发时动画种类比较单一则拿来即用。

  • 以上的Widget是对Widget进行了一次包装,min 命名上在原来的Widget后面加上了Translation.