Flutter动画流列表插件animated_stream_list_nullsafety的使用

animated_stream_list_nullsafety 是一个Flutter库，可以轻松地从 Stream<List<E>> 显示带有动画变化的列表。它类似于 StreamBuilder + ListView.Builder，但带有动画效果。该插件受到了 Animated List Sample 和 Java-diff-utils 的启发。

开始使用

1. 在 pubspec.yaml 中添加依赖

dependencies:
  animated_stream_list_nullsafety: ^2.0.0

2. 导入库

import 'package:animated_stream_list_nullsafety/animated_stream_list.dart';

3. 使用插件

请参阅 examples 文件夹中的示例。

参数

• @required Stream<List<E>> streamList: 数据流，包含列表项。
• @required AnimatedStreamListItemBuilder<E> itemBuilder: 构建列表项的函数。
• @required AnimatedStreamListItemBuilder<E> itemRemovedBuilder: 构建移除列表项的函数。
• Duration duration: 动画持续时间。

AnimatedStreamListItemBuilder<T> 是一个构建列表项的函数：

typedef Widget AnimatedStreamListItemBuilder<T>(
  T item,
  int index,
  BuildContext context,
  Animation<double> animation,
);

示例

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

示例代码

import 'package:flutter/material.dart';
import 'package:animated_stream_list_nullsafety/animated_stream_list.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Animated Stream List example',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final StreamController<List<String>> _streamController = StreamController<List<String>>();

  @override
  void initState() {
    super.initState();
    _initializeData();
  }

  void _initializeData() {
    Future.delayed(Duration(seconds: 1), () {
      _streamController.add(['Item 1', 'Item 2', 'Item 3']);
    });

    Future.delayed(Duration(seconds: 3), () {
      _streamController.add(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
    });

    Future.delayed(Duration(seconds: 5), () {
      _streamController.add(['Item 1', 'Item 3', 'Item 4']);
    });
  }

  @override
  void dispose() {
    _streamController.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Stream List Example'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: AnimatedStreamList<String>(
          streamList: _streamController.stream,
          itemBuilder: (item, index, context, animation) {
            return _createTile(item, animation);
          },
          itemRemovedBuilder: (item, index, context, animation) {
            return _createRemovedTile(item, animation);
          },
          duration: Duration(milliseconds: 300),
        ),
      ),
    );
  }

  Widget _createTile(String item, Animation<double> animation) {
    return SizeTransition(
      axis: Axis.vertical,
      sizeFactor: animation,
      child: ListTile(
        title: Text(item),
      ),
    );
  }

  Widget _createRemovedTile(String item, Animation<double> animation) {
    return SizeTransition(
      axis: Axis.vertical,
      sizeFactor: animation,
      child: ListTile(
        title: Text(item, style: TextStyle(color: Colors.red)),
      ),
    );
  }
}

选项

• List<E> initialList: 初始列表。
• Equalizer equals: 比较项目是否相等的函数，默认使用 == 运算符。确保这个函数工作正常非常重要。

typedef bool Equalizer(dynamic item1, dynamic item2);

其他选项与 AnimatedList 类似，包括：

• Axis scrollDirection
• bool reverse
• ScrollController scrollController
• bool primary
• ScrollPhysics scrollPhysics
• bool shrinkWrap
• EdgeInsetsGeometry padding

您可以查看 Animated List 文档 了解更多详细信息。

致谢

这个出色的包最初由 Dawid Bota 创建，可以在 这里 找到。我已获得他的许可并接管了开发，所有跟踪将在本仓库中进行。