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;
}
複製程式碼

結尾

• 輪子倉庫地址：pub.flutter-io.cn/packages/fl…
• 系列演示demo原始碼：github.com/826327700/f…