我想取得下面的事情（动画风格都没关系，我正在寻找这样做的方法） 但是，所有资源和问题都只能解释如何创建 项目添加或删除

Question

wo，所有资源和问题都只能解释如何创建 项目添加或删除动画。 我当前的代码（我使用集体模式）

class _MembersPageState extends State<MembersPage> {
  @override
  Widget build(BuildContext context) {
    return BlocProvider<MembersPageBloc>(
      create: (context) =>
          MembersPageBloc(userRepository: UserRepository.instance)..add(MembersPageShowed()),
      child: BlocBuilder<MembersPageBloc, MembersPageState>(
        builder: (context, state) {
          if (state is MembersPageSuccess) {
            return ListView.builder(
              itemCount: state.users.length,
              itemBuilder: (context, index) {
                User user = state.users[index];

                return ListTile(
                  isThreeLine: true,
                  leading: Icon(Icons.person, size: 36),
                  title: Text(user.name),
                  subtitle: Text(user.username),
                  onTap: () => null,
                );
              },
            );
          } else
            return Text("I don't care");
        },
      ),
    );
  }
}

wiDgets，例如

AnimatedOpacity

和

AnimatedPositioned

可以用来实现这一目标。但是，儿童小部件的生命周期有点复杂。他们根据滚动位置被摧毁和重新创建。如果儿童小部件的动画从初始化开始，那么每当孩子对UI可见时，它都会重新。

我的chacky

解决方案。我使用静态布尔来指示是“第一次”还是“娱乐”状态，只是忽略了“娱乐”。您可以在Dartpad中复制并尝试。

ListView

Answer 1

I在Dartpad上创建了一个

gist

，显示了如何添加初始动画

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.brown,
        body: ListView(
          children: List.generate(
            25,
            (i) => AnimatedListItem(i, key: ValueKey<int>(i)),
          ),
        ),
      ),
    );
  }
}

class AnimatedListItem extends StatefulWidget {
  final int index;

  const AnimatedListItem(this.index, {Key? key}) : super(key: key);

  @override
  State<AnimatedListItem> createState() => _AnimatedListItemState();
}

class _AnimatedListItemState extends State<AnimatedListItem> {
  bool _animate = false;

  static bool _isStart = true;

  @override
  void initState() {
    super.initState();
    if (_isStart) {
      Future.delayed(Duration(milliseconds: widget.index * 100), () {
        setState(() {
          _animate = true;
          _isStart = false;
        });
      });
    } else {
      _animate = true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedOpacity(
      duration: const Duration(milliseconds: 1000),
      opacity: _animate ? 1 : 0,
      curve: Curves.easeInOutQuart,
      child: AnimatedPadding(
        duration: const Duration(milliseconds: 1000),
        padding: _animate
            ? const EdgeInsets.all(4.0)
            : const EdgeInsets.only(top: 10),
        child: Container(
          constraints: const BoxConstraints.expand(height: 100),
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                widget.index.toString(),
                style: const TextStyle(fontSize: 24),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

要点是为每个列表项目创建一个

ListView，请缓存并清理动画完成。

AnimationController

Answer 2

如果您使用的是flutter_animate我建议用以下列表包装列表瓷砖，则可以添加尽可能多的效果。 Great软件包，如果您不使用它，则应该。

import 'package:flutter/material.dart';

class DifferentPage extends StatefulWidget {
  const DifferentPage({super.key});

  @override
  State<DifferentPage> createState() => DifferentStatePage();
}

class DifferentStatePage extends State<DifferentPage> {
  final _item = [];
  final GlobalKey<AnimatedListState> _key = GlobalKey();

  void _addItem() {
    _item.insert(0, 'Item ${_item.length + 1}');
    _key.currentState!.insertItem( 0,
      duration: const Duration(seconds: 1),
    );
  }

 void _removeItem(int index) {
   _key.currentState!.removeItem( index, (_, animation) {
     return SizeTransition(
       sizeFactor: animation,
       child: const Card(
         margin: EdgeInsets.all(10),
         color: Colors.red,
         child: ListTile(
           title: Text(
             'Deleted',
             style: TextStyle(fontSize: 22),
           ),
         ),
       ),
     );
   },
   duration: const Duration(milliseconds: 300),
 );
   _item.removeAt(index);
 }

 @override
 Widget build(BuildContext context) {
   return Column(
     children: [
       const SizedBox( height: 10 ),
     IconButton(
       onPressed: _addItem,
       icon: const Icon(Icons.add_box_rounded),
     ),
     Expanded(
       child: AnimatedList(
         key: _key,
         initialItemCount: 0,
         padding: const EdgeInsets.all(10),
         itemBuilder: (context, index, animation) {
           return SizeTransition(
             key: UniqueKey(),
             sizeFactor: animation,
             child: Card(
               margin: const EdgeInsets.all(10),
               color: Colors.amberAccent,
               child: ListTile(
                 title: Text(
                   _item[index],
                   style: const TextStyle(fontSize: 22),
                 ),
                 trailing: IconButton(
                   icon: const Icon(Icons.delete),
                   onPressed: () {
                     _removeItem(index);
                   },
                 ),
               ),
             ),
           );
         },
       ),
     )
   ],
 );
 }}