推荐flutter好用的轮子列表动画效果

前言

教程网小编看着挺好看的,所以就转载了,顺便学习了一波,文章版权归原文作者所有,如有问题可以直接联系小编对文章进行编辑,

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。

本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者,入门请戳:flutter官网

正文

轮子

  • 轮子名称:flutter_staggered_animations
  • 轮子概述:轻松的将交错的动画添加到您ListView,GridView,Column和Row
  • 推荐指数:★★★★
  • 常用指数:★★★
  • 效果预览:

点击查看原图

安装

flutter_staggered_animations: "^0.1.2"
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

用法介绍

flutter_staggered_animations提供三个类:

  • Animation
  • AnimationConfiguration
  • AnimationLimiter

以及四个默认动画类型:

  • FadeInAnimation 渐隐渐现动画
  • SlideAnimation 滑动动画
  • ScaleAnimation 缩放动画
  • FlipAnimation 翻转动画
    (动画可嵌套成组合动画)

在ListView中使用

动画外部由AnimationLimiter组件包裹,ListView的子项由AnimationConfiguration.staggeredList来创建:

int count=20;

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("ListView"),
        ),
        body: AnimationLimiter(
            child:ListView.builder(
                itemCount: count,
                itemBuilder: (context,index){
                    return AnimationConfiguration.staggeredList(
                        position: index,
                        duration: const Duration(milliseconds: 375),
                        child: SlideAnimation( //滑动动画
                            verticalOffset: 50.0,
                            child: FadeInAnimation( //渐隐渐现动画
                                child: Container(
                                    margin: EdgeInsets.all(5),
                                    color: Theme.of(context).primaryColor,
                                    height: 60,
                                ),
                            ),
                        ),
                    );
                },
            ),
        ),
        
    );
}

在GridView中使用

动画外部由AnimationLimiter组件包裹,GridView的子项由AnimationConfiguration.staggeredGrid来创建:

int count=20;

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("GridView"),
        ),
        body: 
        AnimationLimiter(
            child:GridView.builder(
                itemCount: count,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    //横轴元素个数
                    crossAxisCount: 3,
                    //纵轴间距
                    mainAxisSpacing: 10.0,
                    //横轴间距
                    crossAxisSpacing: 10.0,
                    //子组件宽高长度比例
                    childAspectRatio: 1.0
                ),
                itemBuilder: (context,index){
                    return AnimationConfiguration.staggeredGrid(
                        columnCount:count,
                        position: index,
                        duration: const Duration(milliseconds: 375),
                        child: SlideAnimation(
                            verticalOffset: 50.0,
                            child: FadeInAnimation(
                                child: Container(
                                    color: Theme.of(context).primaryColor,
                                ),
                            ),
                        ),
                    );
                },
            ),
        ),
        
    );
}

在Column中使用

动画外部由AnimationLimiter组件包裹,Column的子项由AnimationConfiguration.toStaggeredList来创建:

int count=10;

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Column"),
        ),
        body: 
        AnimationLimiter(
            child:Column(
                children:AnimationConfiguration.toStaggeredList(
                    duration: const Duration(milliseconds: 375),
                    childAnimationBuilder:(widget) => SlideAnimation(
                        verticalOffset: 50.0,
                        child: FadeInAnimation(
                            child: widget,
                        ),
                    ),
                    children: ChildrenList()
                )
            ),
        ),
        
    );
}

List<Widget> ChildrenList(){
    List<Widget> childs=[];
    for (var i = 0; i < count; i++) {
        childs.add(Container(
            margin: EdgeInsets.all(5),
            color: Theme.of(context).primaryColor,
            height: 60,
        ));
    }
    return childs;
}

在Row中使用

动画外部由AnimationLimiter组件包裹,Row的子项由AnimationConfiguration.toStaggeredList来创建:

int count=5;

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Row"),
        ),
        body: 
        AnimationLimiter(
            child:Container(
                height: 60,
                child: Row(
                    children:AnimationConfiguration.toStaggeredList(
                        duration: const Duration(milliseconds: 375),
                        childAnimationBuilder:(widget) => SlideAnimation(
                            verticalOffset: 50.0,
                            child: FadeInAnimation(
                                child: widget,
                            ),
                        ),
                        children: ChildrenList()
                    )
                ),
            ),
        ),
        
    );
}

List<Widget> ChildrenList(){
    List<Widget> childs=[];
    for (var i = 0; i < count; i++) {
        childs.add(Container(
            margin: EdgeInsets.only(right:5),
            color: Theme.of(context).primaryColor,
            width: 60,
        ));
    }
    return childs;
}


本博客所有文章如无特别注明均为原创。作者:flutter教程网复制或转载请以超链接形式注明转自 Flutter教程网
原文地址《推荐flutter好用的轮子列表动画效果
分享到:更多

相关推荐


Flutter教程网 官方QQ群:874592746

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


发表评论

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

网友评论(0)