flutter好用的輪子推薦一:列表動畫

小小包子發表於2019-10-26

前言

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

結尾

相關文章