Flutter实现抽屉动画

最新推荐文章于 2024-06-20 10:20:12 发布

Android-until

最新推荐文章于 2024-06-20 10:20:12 发布

阅读量302

点赞数

分类专栏： Android 文章标签： Android flutter

本文链接：https://blog.csdn.net/weixin_44339238/article/details/98969379

版权

这篇博客详细介绍了如何使用Flutter的Animation、插值器和AnimatedBuilder来创建带动画的抽屉效果。通过Stack控件叠加Widget，GestureDetector监听手势，结合initState()初始化动画，dispose()回收资源，记录和处理拖动过程，最终实现滑动结束时的动画效果。总结了在Flutter中实现动画的基本步骤，包括创建AnimationController，自定义插值，以及使用AnimatedBuilder简化动画更新。

摘要由CSDN通过智能技术生成

这篇会深化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(BuildContext context) {
    return Container(child: Center(child: Text("顶部Widget",),),);
  }
}

实现方式和底部是一样的。