Flutter动画列表展示插件animated_stream_list的使用

插件简介

animated_stream_list 是一个用于轻松展示来自 Stream<List<E>> 的带动画变化的 Flutter 库。它类似于 StreamBuilder + ListView.Builder，但带有动画效果。灵感来源于 Flutter 官方的 Animated List 示例 和 Java-diff-utils。

开始使用

1. 添加依赖到 pubspec.yaml

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  animated_stream_list: ^1.1.0

然后运行 flutter pub get 来安装依赖。

2. 导入库

在需要使用的地方导入 animated_stream_list：

import 'package:animated_stream_list/animated_stream_list.dart';

3. 使用插件

在代码中实例化并使用 AnimatedStreamList。查看 examples 文件夹以获取完整的示例。

参数说明

以下是 AnimatedStreamList 的主要参数：

@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 插件来实现带动画的列表展示。

import 'package:flutter/material.dart';
import 'package:animated_stream_list/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: AnimatedListExample(),
    );
  }
}

class AnimatedListExample extends StatefulWidget {
  @override
  _AnimatedListExampleState createState() => _AnimatedListExampleState();
}

class _AnimatedListExampleState extends State<AnimatedListExample> {
  final Stream<List<String>> listStream = Stream.fromIterable([
    ["Item 1", "Item 2", "Item 3"],
    ["Item 1", "Item 2", "Item 3", "Item 4"],
    ["Item 1", "Item 2", "Item 4"],
    ["Item 1", "Item 4", "Item 5"],
  ]);

  Widget _createTile(String item, Animation<double> animation) {
    // 创建每个列表项的动画视图
    return SizeTransition(
      axis: Axis.vertical,
      sizeFactor: animation,
      child: ListTile(
        title: Text(item),
        onTap: () {
          print("Clicked on $item");
        },
      ),
    );
  }

  Widget _createRemovedTile(String item, Animation<double> animation) {
    // 创建被移除项的动画视图
    return SizeTransition(
      axis: Axis.vertical,
      sizeFactor: animation,
      child: ListTile(
        title: Text(item),
        color: Colors.grey[300],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Stream List'),
      ),
      body: Center(
        child: AnimatedStreamList<String>(
          streamList: listStream,
          itemBuilder: (String item, int index, BuildContext context, Animation<double> animation) =>
              _createTile(item, animation),
          itemRemovedBuilder: (String item, int index, BuildContext context, Animation<double> animation) =>
              _createRemovedTile(item, animation),
          duration: Duration(milliseconds: 300),
        ),
      ),
    );
  }
}

代码解释

1. listStream：

   • 使用 Stream.fromIterable 模拟动态数据流。
   • 数据流中的每一项是一个字符串列表，表示不同的列表状态。

2. _createTile：

   • 构建正常状态下的列表项，带有点击事件。

3. _createRemovedTile：

   • 构建被移除的列表项，通常为灰色背景，不带交互。

4. AnimatedStreamList：

   • 使用 streamList 提供的数据流。
   • itemBuilder 和 itemRemovedBuilder 分别定义正常和移除状态的动画效果。
   • duration 设置动画持续时间。

可选参数

除了基本参数外，还有一些可选参数可以进一步定制列表行为：

List<E> initialList; // 初始列表
Equalizer equals;    // 用于比较项是否相等的函数，默认使用 `==` 运算符

例如，自定义 Equalizer：

Equalizer equalizer = (dynamic item1, dynamic item2) {
  return item1 == item2; // 自定义比较逻辑
};