Flutter集合通知管理插件 collection_notifiers 的使用

collection_notifiers 是一个优化了重建和语法的Flutter插件，它通过将集合（如List、Set、Map等）与ChangeNotifier和ValueListenable接口结合，提供了一种高效的方式来处理集合的变化。

特性

• 性能提升：对中大型集合有显著的性能优势。
• 简洁的语法：最小化代码量，提供最佳的语法体验。
• 兼容性：完全兼容ValueListenableBuilder和Riverpod/Provider。
• 简单易用：使用非常简便。

使用示例

Riverpod/Provider 无 collection_notifiers

在没有使用collection_notifiers的情况下，每次修改集合都会触发setState并创建新的副本：

final setProvider = StateProvider((ref) => <E>{});

onAdd: (value) => ref.read(setProvider.state).update((state) {
  return <E>{...state, value}; // 创建新副本
});
onRemove: (value) => ref.read(setProvider.state).update((state) {
  return <E>{...state..remove(value)}; // 创建新副本
});

Riverpod/Provider 使用 collection_notifiers

使用collection_notifiers后，只有在需要时才会触发setState，并且不会创建任何副本：

final setProvider = ChangeNotifierProvider((ref) => SetNotifier<E>());

onAdd: ref.read(setProvider).add; // 不创建副本
onRemove: ref.read(setProvider).remove; // 不创建副本

对于List和Map，操作符也被重载：

final listProvider = ChangeNotifierProvider((ref) => ListNotifier([0]));
ref.read(listProvider)[0] = 1; // 触发setState
ref.read(listProvider)[0] = 1; // 不会再次触发setState

final mapProvider = ChangeNotifierProvider((ref) => MapNotifier());
ref.read(mapProvider)['a'] = 1; // 触发setState
ref.read(mapProvider)['a'] = 1; // 不会再次触发setState

实现细节

元素相等性

元素相等性（== 操作符）需要由开发者自行处理。推荐使用代码生成工具（如freezed、built_value等）或equatable库。

注意事项

• collection_notifiers 不处理任何异常。
• 被重写的逻辑方法总是模仿默认实现。
• 需要集合相等性的方法（如sort()、shuffle()等）总是会触发setState。

示例Demo

以下是一个完整的示例，展示如何使用collection_notifiers来管理集合变化：

import 'package:collection_notifiers/collection_notifiers.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(const ProviderScope(child: App()));
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

final notifier = SetNotifier<int>();

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Collection Notifiers Example')),
      body: ValueListenableBuilder<Set<int>>(
        valueListenable: notifier,
        builder: (context, value, child) {
          return ListView(
            children: [
              ...ListTile.divideTiles(
                context: context,
                tiles: List.generate(20, (index) {
                  return CheckboxListTile(
                    value: value.contains(index),
                    title: Text(index.toString()),
                    onChanged: (arg) {
                      if (arg == true) {
                        notifier.add(index);
                      } else {
                        notifier.remove(index);
                      }
                    },
                  );
                }),
              ),
            ],
          );
        },
      ),
    );
  }
}

在这个示例中，我们使用SetNotifier来管理一个整数集合，并通过ValueListenableBuilder来监听集合的变化。用户可以通过点击复选框来添加或移除集合中的元素，UI会自动更新以反映这些变化。