flutter布局-8-animated_icons动画图片

最新推荐文章于 2024-11-20 14:40:14 发布

weixin_33670786

最新推荐文章于 2024-11-20 14:40:14 发布

阅读量476

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：https://juejin.im/post/5be7842a51882512e76c37fb

本文深入探讨了Flutter中的各种布局技巧，包括Column、Row、Center和Container等组件的使用方法，并介绍了如何利用Matrix4进行矩阵变换。此外，还详细解析了Flutter中14种动画图标的具体使用方式，如AnimatedIcons.close_menu的动态效果实现。

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

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

MaterialApp

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

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

动画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',
                    ),
复制代码

示例所在的位置：github.com/LiuC520/flu…