Flutter数据集合管理插件collection_providers的使用

collection_providers 是一个基于 Provider 包装的插件，用于快速和方便地管理常见的 Dart 集合（如 list、map 和 set）。它允许您像使用原生 Dart 集合一样使用这些提供者，并提供了所有可用的接口方法。

使用示例

1. 暴露值

您可以像平常一样使用 Provider 来暴露值。如果需要类型安全，可以使用 CollectionProvider 作为替代品来保证 ChangeNotifier 是本库中的集合类型之一。

2. 读取值

读取值的方法与 Provider 类似：

• context.watch<T>()：监听 T 的变化。
• context.read<T>()：返回 T 而不监听它。
• context.select<T, R>(R cb(T value))：允许小部件仅监听 T 的一部分。

也可以使用静态方法 Provider.of<T>(context)，其行为类似于 watch 或 read。

完整示例代码

以下是一个完整的示例应用程序，展示了如何使用 collection_providers 管理列表、集合和映射。

import 'package:flutter/material.dart';
import 'package:collection_providers/collection_providers.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        CollectionProvider(
          create: (_) => ListChangeNotifier(['list 1', 'list 2', 'list 3']),
        ),
        CollectionProvider(create: (_) => CustomMapChangeNotifier()),
        CollectionProvider(
          create: (_) => SetChangeNotifier({'set 1', 'set 2', 'set 3'}),
        ),
      ],
      child: MyApp(),
    ),
  );
}

class CustomMapChangeNotifier extends MapChangeNotifier {
  CustomMapChangeNotifier() : super({'map 1': 1, 'map 2': 2, 'map 3': 3});

  void addCountString(String key) {
    this[key] = length + 1;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Collection Providers Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _currentPage = 0;

  void _onChangePage(int index) {
    setState(() {
      _currentPage = index;
    });
  }

  void _onAdd(BuildContext context) async {
    if (_currentPage == 0) {
      final value = await _showTextDialog(context);
      if (value.isNotEmpty) {
        CollectionProvider.of<ListChangeNotifier<String>>(context, listen: false)
            .add(value);
      }
    } else if (_currentPage == 1) {
      final value = await _showTextDialog(context);
      if (value.isNotEmpty) {
        CollectionProvider.of<SetChangeNotifier<String>>(context, listen: false)
            .add(value);
      }
    } else if (_currentPage == 2) {
      final value = await _showTextDialog(context);
      if (value.isNotEmpty) {
        final customMapProvider =
            CollectionProvider.of<CustomMapChangeNotifier>(context, listen: false);
        customMapProvider[value] = customMapProvider.length + 1;
      }
    }
  }

  Widget _renderChild(BuildContext context) {
    if (_currentPage == 0) return ListBody();
    if (_currentPage == 1) return SetBody();
    if (_currentPage == 2) return MapBody();
    return Container();
  }

  Future<String> _showTextDialog(BuildContext context) async {
    final ctrl = TextEditingController();

    return await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          content: TextField(
            autofocus: true,
            controller: ctrl,
            decoration: InputDecoration(hintText: 'Enter a name'),
          ),
          actions: [
            ElevatedButton(
              child: Text('Save'),
              onPressed: () {
                var value = ctrl.text;
                Navigator.of(context).pop(value);
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Collection Provider Example')),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(child: _renderChild(context)),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Increment',
        child: Icon(Icons.add),
        onPressed: () => _onAdd(context),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentPage,
        onTap: _onChangePage,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.list), label: 'List'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Set'),
          BottomNavigationBarItem(icon: Icon(Icons.map), label: 'Map'),
        ],
      ),
    );
  }
}

class ListBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CollectionConsumer<ListChangeNotifier<String>>(
      builder: (context, listProvider, child) {
        return ListView.builder(
          itemCount: listProvider.length,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('Item[$index] = ${listProvider[index]}'),
            );
          },
        );
      },
    );
  }
}

class SetBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final setProvider = context.watch<SetChangeNotifier<String>>();

    final asList = setProvider.toList(growable: false);
    return ListView.builder(
      itemCount: setProvider.length,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text('Item[$index] = ${asList[index]}'),
        );
      },
    );
  }
}

class MapBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final customMapProvider = context.watch<CustomMapChangeNotifier>();

    final asList = customMapProvider.entries.toList(growable: false);
    return ListView.builder(
      itemCount: customMapProvider.length,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text('Item[${asList[index].key}] = ${asList[index].value}'),
        );
      },
    );
  }
}

这个示例展示了如何使用 collection_providers 插件来管理不同类型的集合，并在 UI 中动态更新它们。通过这种方式，您可以轻松地将状态管理和 UI 更新结合起来，提高开发效率和代码可维护性。