Flutter 实现抽屉动画

初壹十五a

于 2019-07-03 17:32:57 发布

阅读量1.2k

点赞数

本文链接：https://blog.youkuaiyun.com/Android_SE/article/details/94579814

版权

这篇博客详细讲解了如何使用Flutter的Animation、插值器和AnimatedBuilder来实现抽屉动画效果。通过GestureDetector监听手势，动态移动顶层Widget，并在手势结束时执行动画。文章覆盖了从初始化AnimationController到实现Widget的拖动和动画效果的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

您好，欢迎关注我的，本文章是关于 Flutter 的系列文，从简单的 Flutter 介绍开始，一步步带你了解进入 Flutter 的世界。你最好有一定的移动开发经验，如果没有也不要担心，在我的专栏底部给我留言，我会尽我的能力给你解答。

上一篇专栏教大家如何在Flutter中拖拽View，并讲解了会遇到的坑。这篇会深化View拖拽实例，利用Flutter Animation、插值器以及AnimatedBuilder教大家实现带动画的抽屉效果。先来看效果：
在这里插入图片描述
通过构思，我们可以设想到实现抽屉的方式就是用Stack控件将两个Widget叠加显示，用GestureDetector监听手势滑动，动态移动顶层的Widget，当监听到手势结束的时候根据手势滑动的距离动态将顶部Widget利用动画效果滑动到结束位置即可。

实现底部Widget

class DownDrawerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(child: Center(child: Text("底部Widget",),),);
  }
}

这个Widget太简单了，就不细说了。
实现顶部Widget

class UpDrawerWidget extends StatelessWidget {
  @override
  Widget build(BuildCo

最低0.47元/天解锁文章