Flutter自动动画列表插件self_animated_list的使用

Flutter自动动画列表插件self_animated_list的使用

_{AnimatedList能够在其数据列表发生变化时进行自动动画。}

问题

当我们从API获取数据列表并更新磁贴时，通常会看到一些奇怪的事情发生——有些磁贴突然出现，有些则消失，而这些变化在一瞬间内完成。每当数据更新时，都会发生这样的情况。

我们可以使用Flutter SDK中的AnimatedList。但是，我们如何计算两个连续列表之间的差异，并知道哪些磁贴需要移除或添加到哪里？这是一个非平凡的任务，而且我们需要一些代码来控制磁贴的添加和移除。

解决方案

此小部件封装了差异逻辑，并包装了标准的AnimatedList。你所需要做的就是：

1. 将你的数据列表传递给该小部件。
2. 创建一个构建器，将数据映射到小部件。
3. （可选）添加进出动画。

示例

以下是一个完整的示例，展示了如何使用self_animated_list插件。

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

import 'horizontal_tiles.dart';
import 'logic/list_cubit.dart';
import 'ui/controls/add_rem_value.dart';
import 'ui/controls/swap_value.dart';
import 'vertical_tiles.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SelfAnimatedList Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final ListCubit _horizontalCubit = ListCubit();
  late final ListCubit _verticalCubit = ListCubit();

  int _toRemove = 1;
  int _toAdd = 1;
  int _toSwap = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SelfAnimatedList Demo'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          BlocProvider<ListCubit>(
            create: (BuildContext context) => _horizontalCubit,
            child: const HorizontalTiles(),
          ),
          const Divider(),
          Expanded(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                BlocProvider<ListCubit>(
                  create: (BuildContext context) => _verticalCubit,
                  child: const VerticalTiles(),
                ),
                Expanded(
                  child: Center(
                    child: _controls(),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _controls() {
    return SizedBox(
      width: 250,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          AddRemValue(
            prefix: 'Add',
            readValue: () => _toAdd,
            onChange: (int value) => _toAdd = value,
          ),
          const SizedBox(height: 16),
          AddRemValue(
            prefix: 'Rem',
            readValue: () => _toRemove,
            onChange: (int value) => _toRemove = value,
          ),
          const SizedBox(height: 16),
          SwapValue(
            prefix: 'Swp',
            readValue: () => _toSwap,
            onChange: (int value) => _toSwap = value,
          ),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              _horizontalCubit.update(
                toAdd: _toAdd,
                toRemove: _toRemove,
                toSwap: _toSwap,
              );

              _verticalCubit.update(
                toAdd: _toAdd,
                toRemove: _toRemove,
                toSwap: _toSwap,
              );
            },
            child: const Text('Update'),
          ),
        ],
      ),
    );
  }
}