美文网首页
flutter布局-8-animated_icons动画图片

flutter布局-8-animated_icons动画图片

作者: liu_520 | 来源:发表于2018-11-10 15:36 被阅读157次

    示例 github:flutterlayout https://github.com/LiuC520/flutterlayout

    MaterialApp

    连载:flutter布局-1-column
    连载:flutter布局-2-row
    连载:flutter布局-3-center
    连载:flutter布局-4-container
    连载:[flutter布局-5-Matrix4矩阵变换

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


    animated_icons.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布局-8-animated_icons动画图片

          本文链接:https://www.haomeiwen.com/subject/uyizxqtx.html