Flutter Widget 之AnimatedWidget

254 阅读2分钟

动画有很多不同的选项,有时您要做的只是为widget实现动画

ezgif.com-gif-maker.gif

在许多情况下,只需使用AnimatedWidget,即可使用widget实现动画。

AnimatedWidget并不是一个单独的小部件,因为它是一个抽象类。

但是它是创建自己的动画的一个强大的工具,有一些已为您构建的AnimatedWidgets 查找诸如SlideTransition、RotationTransition和其他FooTransitions之类的widget

SizeTransition
FadeTransition
AlignTransition
ScaleTransition
DecoratedBoxTransition
DefaultTextStyleTransition
PositionedTransition
SlideTransition
RotationTransition
FooTransition
ButtonTransition

但是,如果这些都不以您想要方式实现动画处理,那么该是时候建立自己的了

首先扩展AnimatedWidget,它需要两件事:

第一是构建一个返回要实现动画的widget的方法

第二种是将通知您的widget,有关诸如动画的更新值的东西,您可以将其命名为“一个东西”,任何与您自定义AnimatedWidget有意义的就好了。但是对于构造函数,您需要将其作为listenable参数传递给AnimatedWidget超类。

然后添加一个吸气剂,使listenable在您要实现动画的widget中可用

最后,返回到build方法,并在对您的widget有意义的地方使用此值

class ButtonTransition extends AnimatedWidget {

    const ButtonTransition({width}) : super(listenable: width);

    Animation<double> get width => listenable
    
    @override
    Widget build(BuildContext context) {
        return OutlineButton(
            onPressed: () => print("Hello"),
            child: Text("Click Me!"),
            borderSde: BorderSize(width: width.value),
        );
    }
}

恭喜你!

ezgif.com-gif-maker (1).gif

您需要某种动画才能使用此widget,而获得该动画最简单方法是在有状态widget种创建AnimationController,确保在initState中初始化控制器,并在dispose中将其处置。

有了该控制器后,您现在可以在任何有意义的地方开始停止或重复您的动画

class _MyWidgetState extends State<MyWidget> with SingleTrickerProviderStateMixin {
    
    
    AnimationController _controller;
    
    // ...
    
    @override
    Widget build(BuildContext context) {
        return ButtonTransition(size: _controller);
    }
    
    // ...
}

如果想了解有关AnimatedWidget的内容,或者关于Flutter的其他功能,请访问flutter.dev

原文翻译自视频:视频地址