如何为Flutter中的列表更改制作动画

Question

如果我有一个可以添加，删除和交换的列表（例如ListTiles），那么为这些更改设置动画的最佳方法是什么？如果这有区别，我正在使用reorderable list。现在我的列表中没有动画，当数据更改时我只调用setState。

Answer 1

我认为您需要AnimatedList ...我写了一个例子。

仅当要插入列表或从列表中删除时才可以设置“持续时间”，这是通过创建AnimatedListState的GlobalKey来实现的。

我写了一个示例代码

class Pool extends StatelessWidget {
  final keys = GlobalKey<AnimatedListState>();
  var list = List.generate(3, (i) => "Hello $i");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: AnimatedList(
          key: keys,
          initialItemCount: list.length,
          itemBuilder: (context, index, animation) {
            return SlideTransition(
              position: animation.drive(
                  Tween<Offset>(begin: Offset(1, 0), end: Offset(0, 0))
                      .chain(CurveTween(curve: Curves.ease))),
              child: ListTile(
                title: Text(list[index]),
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          list.insert(0, "NothingYay");
          keys.currentState.insertItem(0, duration: Duration(seconds: 2));
        },
      ),
    );
  }
}

希望对您有帮助。

选中Flutter Widget Of The Week (AnimatedList)

Answer 2

我假设您正在尝试在列表中实现滑动功能。 有一个叫Dissmisable的手势

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

// MyApp is a StatefulWidget. This allows us to update the state of the
// Widget whenever an item is removed.
class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  MyAppState createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  final items = List<String>.generate(3, (i) => "Item ${i + 1}");

  @override
  Widget build(BuildContext context) {
    final title = 'Dismissing Items';

    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];

            return Dismissible(
              // Each Dismissible must contain a Key. Keys allow Flutter to
              // uniquely identify Widgets.
              key: Key(item),
              // We also need to provide a function that tells our app
              // what to do after an item has been swiped away.
              onDismissed: (direction) {
                // Remove the item from our data source.
                setState(() {
                  items.removeAt(index);
                });

                // Then show a snackbar!
                Scaffold.of(context)
                    .showSnackBar(SnackBar(content: Text("$item dismissed")));
              },
              // Show a red background as the item is swiped away
              background: Container(color: Colors.red),
              child: ListTile(title: Text('$item')),
            );
          },
        ),
      ),
    );
  }
}

Answer 3

您也可以尝试使用 AutomaticAnimatedList

https://pub.dev/packages/automatic_animated_list

它会自动计算要为您制作动画的项目。

class ItemsAnimatedList extends StatelessWidget {
  final List<ItemModel> items;
  const ItemsList({
    Key key,
    this.items,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AutomaticAnimatedList<ItemModel>(
      items: items,
      insertDuration: Duration(seconds: 1),
      removeDuration: Duration(seconds: 1),
      keyingFunction: (ItemModel item) => Key(item.id),
      itemBuilder:
          (BuildContext context, ItemModel item, Animation<double> animation) {
        return FadeTransition(
          key: Key(item.id),
          opacity: animation,
          child: SizeTransition(
            sizeFactor: CurvedAnimation(
              parent: animation,
              curve: Curves.easeOut,
              reverseCurve: Curves.easeIn,
            ),
            child: ListTile(title: Text(item.name)),
          ),
        );
      },
    );
  }
}