Flutter平滑动画列表插件smooth_animated_listview的使用

smooth_animated_list

一个为项目提供平滑过渡效果的动画列表插件。

特性

• 自动动画处理项的添加和移除
• 平滑的淡入淡出和大小变化过渡
• 支持自定义相等性检查
• 类型安全实现
• 简单的API

开始使用

在pubspec.yaml文件中添加依赖：

dependencies:
  smooth_animated_list: ^1.0.0

使用示例

基本用法

这是一个简单的例子：

SmoothAnimatedList<String>(
  items: ['Item 1', 'Item 2', 'Item 3'],
  itemBuilder: (context, item, animation) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(1, 0),
        end: Offset.zero,
      ).animate(animation),
      child: Card(
        child: ListTile(
          title: Text(item),
        ),
      ),
    );
  },
);

自定义对象相等性检查

对于具有自定义相等性的对象：

class Item {
  final String id;
  final String title;

  Item(this.id, this.title);
}

SmoothAnimatedList<Item>(
  items: [
    Item('1', 'Item 1'),
    Item('2', 'Item 2'),
    Item('3', 'Item 3'),
  ],
  itemBuilder: (context, item, animation) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(1, 0),
        end: Offset.zero,
      ).animate(animation),
      child: Card(
        child: ListTile(
          title: Text(item.title),
        ),
      ),
    );
  },
  areItemsTheSame: (oldItem, newItem) => oldItem.id == newItem.id,
);

额外参数

• duration: 动画持续时间（默认：300ms）
• areItemsTheSame: 自定义相等性检查函数

许可证

MIT许可证 - 详情请参阅LICENSE文件

### 完整示例代码

以下是完整的示例代码：

```dart
import 'package:flutter/material.dart';
import 'package:smooth_animated_listview/smooth_animated_listview.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ListExample(),
    );
  }
}

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

  [@override](/user/override)
  State<ListExample> createState() => _ListExampleState();
}

class _ListExampleState extends State<ListExample> {
  List<String> data = ["0", "1", "2", "3", "5"];

  bool show = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            onPressed: () {
              setState(() {
                show = !show;
              });
            },
            icon: const Icon(Icons.hide_source),
          ),
          IconButton(
            onPressed: () {
              setState(() {
                data = List.generate(13, (int index) => "$index");
              });
            },
            icon: const Icon(Icons.refresh),
          )
        ],
      ),
      body: show
          ? SmoothAnimatedList<String>(
              key: Key("data.length.toString()"),
              items: data,
              itemBuilder: (context, item, animation) {
                return SizeTransition(
                  sizeFactor: animation,
                  child: ListTile(
                    onTap: () {
                      data.remove(item);
                      setState(() {});
                    },
                    title: Text(item),
                  ),
                );
              },
            )
          : const CircularProgressIndicator(),
    );
  }
}