Как анимировать изменения списка в Flutter

#dart #flutter

Вопрос:

Если у меня есть список (например, ListTiles), к которому можно добавлять, удалять и менять местами, каким был бы наилучший способ анимировать эти изменения? Я использую переупорядочиваемый список, если это имеет значение. Прямо сейчас в моем списке нет анимации, я просто вызываю setState при изменении данных.

1. попробуйте flutter.dev/docs/catalog/samples/animated-list

2. AnimatedList не будет работать вместе с ReorderableList tho.

3. @Niklas точно

4. Я ищу то же самое. Либо ваш список можно упорядочить, либо он анимирует удаление и добавление изменений. Боюсь, мы не сможем объединить эти функции. Я уже несколько дней ищу решение и ничего не нашел. Вы нашли решение?

Ответ №1:

Я думаю, вам нужен AnimatedList…Я написал пример.

Вы можете установить длительность только тогда, когда хотите вставить в список или удалить из списка, и это достигается путем создания глобального ключа AnimatedListState…

Я написал пример кода для вставки

 
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 (AnimatedList)

Ответ №2:

Вы также можете попробовать использовать 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)),
          ),
        );
      },
    );
  }
}

Ответ №3:

Я предполагаю, что вы пытаетесь реализовать функцию прокрутки в своем списке. Существует жест с именем 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')),
            );
          },
        ),
      ),
    );
  }
}