欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《Flutter 控件大全》第十五个:AnimatedPositionedDirectional

程序员文章站 2022-06-01 18:38:35
...
  • 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
  • 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
  • Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

AnimatedPositionedDirectional是一个隐式的动画组件,提供动态改变位置的动画组件,用法如下:

Stack(
      children: <Widget>[
        AnimatedPositionedDirectional(
          start: _start,
          width: 50,
          height: 50,
          duration: Duration(seconds: 2),
          child: Container(color: Colors.red),
        ),
      ],
    )

相关参数说:

  • duration参数是动画执行的时间。

  • 提供topbottomstartend四种定位属性,分别表示距离上、下、开始、结尾的距离。

  • 只能用于Stack组件中。

  • startendwidth3个参数只能设置其中2个,因为设置了其中2个,第三个已经确定了,同理topbottomheight也只能设置其中2个。

仅仅是构建这样一个组件是不会有动画效果,需要让_start参数发生变化,点击按钮设置新的_start值:

RaisedButton(
          onPressed: () {
            setState(() {
              _start = 180;
            });
          },
        )

效果如下:

《Flutter 控件大全》第十五个:AnimatedPositionedDirectional

通过curve参数设置动画执行的曲线,默认直线执行,系统提供了很多中动画执行曲线,比如加速、减速、弹簧等,用法如下:

AnimatedOpacity(
  curve: Curves.easeIn,
  ...
)

如果想要在动画执行结束时处理一些事情,可以在onEnd回调中处理,用法如下:

AnimatedOpacity(
  onEnd: (){
    //动画执行结束回调
  },
  ...
)