Flutter高效列表管理插件clever_list的使用

Clever List

CleverList 是一个 ListView 小部件，它隐式地对更改进行动画处理。CleverLists 是由数据对象列表构建的。

使用

使用 CleverList 非常直接。你需要创建一个项目列表，定义一个构建器函数来渲染每个项目，并指定可选的插入和删除动画。

首先，你需要为你的列表准备一些数据。列表使用 == 运算符进行比较。你也可以通过使用 equalityChecker 来设置自己的比较方法。

// 你想要用来构建列表的数据。
var persons = <String>[
  'Rick',
  'Beth',
  'Jerry'
];

然后你可以使用这些数据来构建你的小部件：

CleverList<String>(
  items: persons,
  builder: (context, value) {
    return ListTile(
      title: Text(value),
    );
  },
)

现在，当 persons 发生变化并且状态更新时，列表将自动对更改进行动画处理。

自定义

你可以使用 insertDuration 和 removeDuration 来自定义插入和删除的持续时间。

你还可以使用 insertTransitionBuilder 和 removeTransitionBuilder 参数来自定义插入和删除的动画效果。

对于更高级的用例，你可以扩展 CleverListBase 或 CleverListWidget 来实现自己的功能。

致谢

该包受 diffutil_sliverlist 的启发。

示例代码

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

import 'dart:math';

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

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

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

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

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 数据对象用于构建列表。
  var persons = <Person>[
    Person(name: 'Bert', age: 64),
    Person(name: 'Martin', age: 43),
    Person(name: 'John', age: 29),
    Person(name: 'Albert', age: 25),
    Person(name: 'Mike', age: 15),
    Person(name: 'Mohammed', age: 54),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CleverList'),
        actions: [
          IconButton(
            onPressed: () {
              // 向列表中添加一个项目。
              setState(() {
                final list = List<Person>.from(persons);
                list.add(Person(name: 'peter', age: Random().nextInt(200)));
                persons = list;
              });
            },
            icon: const Icon(Icons.add),
          ),
        ],
      ),
      body: CleverList<Person>(
        items: persons,
        builder: (context, value) {
          return ListTile(
            title: Text(
              value.name,
            ),
            onTap: () {
              setState(() {
                final list = List<Person>.from(persons);

                list.remove(value);
                persons = list;
              });
            },
          );
        },
      ),
    );
  }
}

class Person {
  final String name;
  final int age;

  Person({required this.name, required this.age});

  [@override](/user/override)
  bool operator ==(covariant Person other) {
    if (identical(this, other)) return true;

    return other.name == name && other.age == age;
  }

  [@override](/user/override)
  int get hashCode => name.hashCode ^ age.hashCode;

  [@override](/user/override)
  String toString() => 'Person(name: $name, age: $age)';
}