Рекомендация Flutter по простому использованию колеса 1: анимация списка

Flutter
Рекомендация Flutter по простому использованию колеса 1: анимация списка

предисловие

Flutter — это платформа мобильного пользовательского интерфейса Google для быстрого создания высококачественных нативных пользовательских интерфейсов на iOS и Android.

Знаменитый Николас Гольбао в ИТ-индустрии однажды сказал: Колесо — это лестница ИТ-прогресса! Популярные фреймворки такие же, простые в использовании колеса, чтобы выбрать один из тысячи! В качестве кроссплатформенной среды разработки, появившейся за последние два года, сторонняя экосистема Flutter немного меньше, чем другие зрелые среды, но количество колес уже велико. В этой серии статей выбираются и делятся колесами, которые обычно используются в повседневной разработке приложений, чтобы повысить эффективность перемещения кирпичиков для всех.В то же время я надеюсь, что экология флаттера будет становиться все более и более совершенной, и будет все больше и больше больше колес.

В этой серии статей подготовлено более 50 рекомендаций по колесам, причины работы, и постарайтесь публиковать статью каждые 1-2 дня.

совет: эта серия статей подходит для разработчиков, у которых уже есть основы флаттера.Чтобы начать, нажмите:официальный сайт флаттера

текст

рулевое колесо

  • Название колеса: 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
  • Масштабная анимация Масштабная анимация
  • Анимация переворота 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,
                                ),
                            ),
                        ),
                    );
                },
            ),
        ),
        
    );
}

Использовать в столбце

Анимация обертывается компонентом AnimationLimiter, а дочерние элементы столбца создаются с помощью 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;
}

Использовать в строке

Анимация обертывается компонентом AnimationLimiter, а дочерние элементы строки создаются с помощью 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;
}

конец

Категории