flutter 动画展开菜单_Flutter Flow实现半圆弹出菜单

最新推荐文章于 2021-01-17 19:25:58 发布

weixin_39615402

最新推荐文章于 2021-01-17 19:25:58 发布

阅读量603

点赞数

文章标签： flutter 动画展开菜单

本文链接：https://blog.csdn.net/weixin_39615402/article/details/111689827

版权

本文介绍了如何使用Flutter的Flow组件创建动画效果，包括水平展开/收起菜单、圆形展开/收起以及半圆菜单展开/收起。通过结合Animation和Matrix4，展示了Flow组件的高性能和灵活性。

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

老孟导读：本文由共建组织行云流水提供。在这里特别感谢我们共建组织的成员，完成了近20篇高质量的文章，如果您也希望加入我们，欢迎私信我，也可以到老孟Flutter 网站：http://laomengit.com/plan/build_plan.html 查看详情。

Flow

流式小部件，同类型的有Wrap，Row等，Flow的特点是可以调整子组件的位置和大小，结合Matrix4绘制出各种酷炫的效果。

Flow({
        Key key,     @required FlowDelegate delegate,   //继承FlowDelegate的管理类，来控制子组件的定位    List children: const []    //可放多个子组件})

Flow仅有2个属性， children表示子控件， delegate是调整子组件的位置和大小，需要自定义。

水平展开/收起菜单

使用Flow实现水平展开/收起菜单的功能，代码如下：

class DemoFlowPopMenu extends StatefulWidget {
      @override  _DemoFlowPopMenuState createState() => _DemoFlowPopMenuState();}class _DemoFlowPopMenuState extends State<DemoFlowPopMenu>    with SingleTickerProviderStateMixin {
      //动画必须要with这个类  AnimationController _ctrlAnimationPopMenu; //定义动画的变量  IconData lastTapped = Icons.notifications;  final List menuItems = [    //菜单的icon    Icons.home,    Icons.new_releases,    Icons.notifications,    Icons.settings,    Icons.menu,  ];  void _updateMenu(IconData icon) {
        if (icon != Icons.menu) {
          setState(() => lastTapped = icon);    } else {
          _ctrlAnimationPopMenu.status == AnimationStatus.completed          ? _ctrlAnimationPopMenu.reverse() //展开和收拢的效果          : _ctrlAnimationPopMenu.forward();    }  }  @override  void initState() {
        super.initState();    _ctrlAnimationPopMenu = AnimationController(      //必须初始化动画变量      duration: const Durat