Flutter集合值监听插件 collection_value_notifier 的使用

collection_value_notifier 是一个用于在 Flutter 应用中监听列表、集合和映射变化的插件。它提供了内置的构建器，当集合发生修改时会触发重建。这些特性使其成为自定义控制器的理想基础类。

特性

• 监听底层数据集的变化。
• 仅在深度比较评估显示列表、集合或映射被修改时才重建小部件。
• 将集合注入子小部件，并智能地将这些更改传播到其他监听者。
• 在整个应用中维护一个复杂的基于集合的状态。
• 使用更多的无状态小部件与集合构建器小部件。

安装

要使用这个插件，请在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  collection_value_notifier: ^latest_version

然后运行 flutter pub get 来安装包。

使用示例

导入并声明

首先导入包并声明一个 ListNotifier 实例：

import 'package:collection_value_notifier/collections.dart';

final ListNotifier<int> listNotifier = ListNotifier([0, 1, 2]);

添加和移除监听器

可以像这样为 listNotifier 添加和移除监听器：

listNotifier.addListener(() {
  // 当列表发生变化时调用此回调
});

listNotifier.removeListener(() {});

使用 Builder

ListListenableBuilder 可以用来根据 listNotifier 的状态变化来更新 UI：

ListListenableBuilder<int>(
  valueListenable: listNotifier,
  builder: (context, list, _) {
    return Text('List: $list');
  },
);

修改集合

对集合进行修改（如添加、删除元素）会自动通知所有监听者：

listNotifier[0] = 10;
listNotifier.removeAt(1);

记得释放资源

与 ValueNotifier 类似，记得在不再需要监听器时调用 dispose() 方法：

listNotifier.dispose();

完整示例 Demo

以下是完整的示例代码，演示了如何在实际应用中使用 collection_value_notifier 包：

import 'dart:math';
import 'package:collection_value_notifier/collection_value_notifier.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Collection Value Notifier Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ListNotifier<int> _listNotifier = ListNotifier([0, 1, 2]);
  final SetNotifier<int> _setNotifier = SetNotifier({0, 1, 2});
  final MapNotifier<String, int> _mapNotifier = MapNotifier({'A': 0, 'B': 1, 'C': 2});

  void _incrementCounter() {
    _listNotifier.syncEditBlock((list) {
      list.shuffle(Random());
      return list;
    });

    _setNotifier.syncEditBlock((set) {
      Random random = Random();
      final result = set.union(<int>{random.nextInt(9)});
      if (result.length > 3) {
        result.remove(result.first);
      }
      return result;
    });

    _mapNotifier.syncEditBlock((map) {
      map['A'] = Random().nextInt(9);
      map['B'] = Random().nextInt(9);
      map['C'] = Random().nextInt(9);
      return map;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final style = Theme.of(context).textTheme.titleMedium;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Text(
                'Collections rebuild when they have changed without calling setState.',
                style: style,
              ),
            ),
            const Padding(padding: EdgeInsets.only(top: 16.0)),
            Text(
              'You have shuffled the list:',
              style: style,
            ),
            ListWidget(listListenable: _listNotifier),
            const Padding(padding: EdgeInsets.only(top: 16.0)),
            Text(
              'You have randomized a set:',
              style: style,
            ),
            SetWidget(setListenable: _setNotifier),
            const Padding(padding: EdgeInsets.only(top: 16.0)),
            Text(
              'You have randomized map values:',
              style: style,
            ),
            MapWidget(mapListenable: _mapNotifier),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        tooltip: 'Randomize the values',
        onPressed: _incrementCounter,
        label: const Text('Randomize'),
        icon: const Icon(Icons.numbers),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _listNotifier.dispose();
    _setNotifier.dispose();
    _mapNotifier.dispose();
    super.dispose();
  }
}

class ListWidget extends StatelessWidget {
  final ListListenable<int> listListenable;

  const ListWidget({Key? key, required this.listListenable}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final style = Theme.of(context).textTheme.headlineMedium;
    return ListListenableBuilder<int>(
      valueListenable: listListenable,
      builder: (context, list, _) {
        return Text('$list', style: style);
      },
    );
  }
}

class SetWidget extends StatelessWidget {
  final SetListenable<int> setListenable;

  const SetWidget({Key? key, required this.setListenable}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final style = Theme.of(context).textTheme.headlineMedium;
    return SetListenableBuilder<int>(
      valueListenable: setListenable,
      builder: (context, set, _) {
        return Text('$set', style: style);
      },
    );
  }
}

class MapWidget extends StatelessWidget {
  final MapListenable<String, int> mapListenable;

  const MapWidget({Key? key, required this.mapListenable}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final style = Theme.of(context).textTheme.headlineMedium;
    return MapListenableBuilder<String, int>(
      valueListenable: mapListenable,
      builder: (context, map, _) {
        return Text('$map', style: style);
      },
    );
  }
}