animated_icons动画图片 - flutter布局篇8

对话框,通常是应用的一些信息当然我们一般都是需要自定义的,不用flutter自带的3463020-8af4337f197793ba.png


动画icons

自带的就下面14中动画图片,也就是从一种状态变换成另外一种状态
比如 AnimatedIcons.close_menu,这个表示从close(X)的样式变成menu(三)的样式


var icons = [
      AnimatedIcons.add_event,
      AnimatedIcons.arrow_menu,
      AnimatedIcons.close_menu,
      AnimatedIcons.ellipsis_search,
      AnimatedIcons.event_add,
      AnimatedIcons.home_menu,
      AnimatedIcons.list_view,
      AnimatedIcons.menu_arrow,
      AnimatedIcons.menu_close,
      AnimatedIcons.menu_home,
      AnimatedIcons.pause_play,
      AnimatedIcons.play_pause,
      AnimatedIcons.search_ellipsis,
      AnimatedIcons.view_list
    ];


具体使用方法
animationController = AnimationController(
      vsync: this,
      duration: Duration(microseconds: 2000),
    );

    animationController.forward(); //加上这个,动画才能执行,可以放到按钮的点击事件里面去,
...
 AnimatedIcon(
                      size: 30,
                      icon: icons[i],
                      progress: animationController,
                      semanticLabel: 'Show menu',
                    ),
示例所在的位置:https://github.com/LiuC520/flutterlayout/blob/master/lib/material/animated_icons.dart
本博客所有文章如无特别注明均为原创。作者:flutter教程网复制或转载请以超链接形式注明转自 Flutter教程网
原文地址《animated_icons动画图片 - flutter布局篇8
分享到:更多

相关推荐



Flutter教程网 官方QQ群:874592746

扫描下面二维码 加入Flutter教程网微信群:


关注公众号“Flutter前线”,各种Flutter项目实战经验技巧,干活知识,Flutter面试题答案,等你来领取。


发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)